Alliant théorie et pratique avec ses nombreux exemples, ce livre sur Vue.js, framework JavaScript facile à prendre en main, s’adresse à tout développeur Front End désireux de développer des applications web fluides, dynamiques et réactives. Bien que des connaissances sur les langages HTML, CSS et JavaScript soient un plus pour appréhender la lecture de ce livre, un chapitre dédié à JavaScript permettra au lecteur d’être à jour des nouvelles syntaxes apparues ces dernières années.

Après une introduction sur le concept de DOM virtuel et d’architecture MVVM dont Vue.js s’inspire, le lecteur passe rapidement à la pratique avec l’installation et la configuration des outils d’aide au développement. Il apprend à utiliser Vue.js sur un nouveau projet ou sur un projet existant et devient ainsi en mesure de manipuler le DOM d’une page web, de mettre en place les comportements attendus suite aux actions de l’utilisateur ou encore de gérer des styles CSS à l’aide des directives introduites par le framework. Un chapitre est également dédié à la création de formulaires dynamiques.

Dans la suite du livre, l’auteur détaille la manière d’organiser son code en composants et d’architecturer une application en fonction de sa taille, en ayant notamment recours à la mutualisation du code. Le lecteur apprend également à utiliser l’empaqueteur de modules Webpack pour compiler et déployer une application en production.

Ayant pris soin de rappeler les concepts de sécurité liés aux applications web (CORS, cookies, jetons JWT, attaques CSRF et XSS, protocole OAuth 2.0), l’auteur explique ensuite comment consommer des API dans une application de manière sécurisée, d’abord sous la forme d’une API REST puis sous la forme d’une API GraphQL.

Pour finir, le lecteur appréhende le routage avec Vue Router pour simuler les URLs de l’application dans un navigateur, ainsi que la centralisation de la gestion des données avec le plug-in Vuex.



Quizinclus dans
la version en ligne !

• Testez vos connaissances à l'issue de chaque chapitre
• Validez vos acquis

Téléchargements

• Des fichiers complémentaires (12 114 Ko)

Introduction

1. Quelles notions ce livre couvre-t-il ?
2. Prérequis
3. Historique de Vue.js
   1. 1. Pourquoi Vue.js ?
      1. a. Ses origines
      2. b. Ses atouts
   2. 2. Qu’est-ce que le Virtual DOM ?
      1. a. Définition
      2. b. API DOM pour mettre à jour une page web
      3. c. Limites de l’API DOM
      4. d. Apparition du concept de DOM virtuel
      5. e. Manipulation du DOM virtuel
   3. 3. Le DOM virtuel avec Vue.js
4. Modèles d'architectures
   1. 1. MVC (Modèle - Vue - Contrôleur)
      1. a. MVC pour toutes applications
      2. b. MVC adapté aux applications web
   2. 2. MVVM (Model - View - ViewModel)
5. Comparatifs avec les autres frameworks
   1. 1. Popularité entre Vue, React et Angular
   2. 2. Avantages et inconvénients
      1. a. Angular
      2. b. React.js
      3. c. Vue.js
      4. d. Quel framework pour quel besoin ?
      5. e. Aller plus loin dans la comparaison avec les autresframeworks
6. Futur de Vue.js

Notions essentielles de JavaScript

1. Introduction
2. Bases algorithmiques
   1. 1. Variables et types de valeurs
      1. a. Déclaration d’une variable
      2. b. Types de valeurs
      3. c. Contextes d’exécution global et local
      4. d. Portée de variable
      5. e. Conversion de types de données
      6. f. Affectation par décomposition
   2. 2. Structures de contrôle
      1. a. Instructions conditionnelles
      2. b. Boucles
3. Fonctions
   1. 1. Définition et utilisation des fonctions
   2. 2. Fermetures (closures)
   3. 3. Fonction en argument d’autres fonctions
   4. 4. Paramètres par défaut et paramètresdu reste
   5. 5. Fonctions fléchées
   6. 6. Fonctions anonymes autoexécutantes
4. Manipulation de tableaux
   1. 1. Déclarer, lire, modifier, supprimer des éléments
   2. 2. Itérer sur un tableau
   3. 3. Décomposer avec l’opérateur spread
   4. 4. Filtrer un tableau
   5. 5. Trier un tableau
5. Manipulation d’objets
   1. 1. Définir un objet et son prototype
   2. 2. Instancier un objet
   3. 3. Lire, ajouter, modifier ou supprimer une propriété
   4. 4. Copier ou fusionner des objets
   5. 5. Itérer sur un objet
   6. 6. Chaîner les méthodes d’objet
6. Utilisation du mot-clé this
   1. 1. En dehors d’une fonction
   2. 2. Dans une fonction appelée de manièreclassique
   3. 3. Dans une fonction appelée via call() et apply()
   4. 4. Avec bind() pour associer un objet à this
   5. 5. Dans une fonction appelée en tant que méthoded’objet
   6. 6. Dans un gestionnaire d’évènement
   7. 7. Dans une fonction fléchée
7. Gestion des exceptions
   1. 1. L’utilité
   2. 2. La structure try…catch…finally
   3. 3. L’objet Error et les erreurs personnalisées
8. Utilisation des promesses
   1. 1. Objet natif Promise
   2. 2. Méthode then()
   3. 3. Gestionnaires de then()
   4. 4. Méthode catch()
   5. 5. Chaînage de traitements asynchrones avecles promesses
   6. 6. Création de promesses déjà tenuesou rompues
   7. 7. Exécution de tâches asynchronesen parallèle
   8. 8. Gestion de la pile d’appels
   9. 9. Fonctions asynchrones avec async
9. Utilisation des modules JavaScript
   1. 1. L’historique des modules JavaScript
      1. a. Introduction
      2. b. Application sans module
      3. c. Objets en tant que modules et fonctions auto-invoquées
      4. d. Modules CommonJS
      5. e. Modules AMD
      6. f. Chargeur de modules
      7. g. Empaqueteur de modules
   2. 2. Les modules ES 6
      1. a. Introduction
      2. b. Déclarer et utiliser un module
      3. c. Éviter les conflits de nommage
      4. d. Agréger plusieurs modules
      5. e. Importer dynamiquement

Comprendre les fondamentaux de Vue.js

1. Installation
   1. 1. Une version par environnement
   2. 2. Via téléchargement manuel
   3. 3. Via l’inclusion d’un CDN (le plus simple)
   4. 4. Via npm ou yarn pour de plus gros projets
      1. a. Téléchargement du package vue
      2. b. Explication des différents builds
   5. 5. Via Vue-CLI
2. Outils de développements
   1. 1. VS Code et ses plugins
      1. a. Installer et configurer VS Code
      2. b. Déboguer avec VS Code
   2. 2. Vue Devtools
   3. 3. Vue Performance Devtool
   4. 4. CodeSandbox
   5. 5. Git
3. Instance Vue.js
   1. 1. Hello World
   2. 2. Liaison de données entre View et ViewModel
   3. 3. Cycle de vie d’une instance
   4. 4. Utilisation du mot-clé this
4. Virtual DOM et réactivité
   1. 1. Le système de liaison de données
   2. 2. Le fonctionnement de la file d’attente  demise à jour asynchrone
   3. 3. La déclaration de propriétésréactives
   4. 4. Les limitations de la détection de changement
   5. 5. Les directives pour manipuler le DOM
      1. a. Un attribut HTML spécial
      2. b. Les arguments et les arguments dynamiques
      3. c. Les modificateurs
5. Liaison de données
   1. 1. Liaison réactive uni-directionnelle
      1. a. Afficher des données réactives avecl’interpolation texte
      2. b. Rendre un attribut réactif avec v-bind
   2. 2. Liaison bidirectionnelle avec v-model
6. Affichage des données dans la View
   1. 1. L’interpolation avec des données plus complexes
   2. 2. La directive v-html
   3. 3. La directive v-once
   4. 4. Le rendu conditionnel
      1. a. La directive v-show
      2. b. Les directives v-if, v-else-if et v-else
   5. 5. La balise <template></template>
7. Traitement et formatage des données
   1. 1. Valeurs traitées avec les propriétéscalculées
   2. 2. Valeurs traitées avec les méthodes
   3. 3. Propriétés calculées vsméthodes
   4. 4. Mutateurs calculés
   5. 5. Valeurs traitées avec les observateurs watch
   6. 6. Utilisation des filtres pour formater les données
8. Affichage de listes de données
   1. 1. Utiliser la directive v-for
   2. 2. Filtrer les éléments d’une liste
      1. a. Ne pas utiliser v-if avec v-for
      2. b. En utilisant une propriété calculée
   3. 3. Trier les éléments d’une liste
   4. 4. Muter un tableau ou un objet
9. Capture des évènements déclenchés par l'utilisateur
   1. 1. Directive v-on
      1. a. Mettre à jour une donnée suite à un évènementdu DOM
      2. b. Récupérer l’évènementdans la méthode
   2. 2. Modificateurs d’évènements
   3. 3. Évènement dynamique et syntaxe objet
10. Gestion des styles CSS
    1. 1. Scoped styles
    2. 2. Les styles dynamiques
    3. 3. Les styles dynamiques avec un objet
    4. 4. Les styles dynamiques avec un objet sans CSS

Utiliser les formulaires

1. Les éléments de formulaire
   1. 1. L’utilisation de librairies tierces
   2. 2. Les champs text et textarea
   3. 3. Les cases à cocher et les boutons radio
   4. 4. Les listes déroulantes
2. Les champs particuliers de formulaire
   1. 1. Champs date
   2. 2. Champs de chargement de fichier
   3. 3. Sliders
3. Les modificateurs de la directive v-model
   1. 1. Formater une saisie en tant que nombre
   2. 2. Réagir sur l’évènementchange plutôt qu’input
   3. 3. Retirer les espaces
4. La validation du formulaire
   1. 1. Les librairies de validations de formulaire
   2. 2. Utiliser VeeValidate
      1. a. Installer
      2. b. Utiliser les règles de validation par défaut
      3. c. Ajouter ses propres règles de validation
      4. d. Gérer la soumission du formulaire
   3. 3. Utiliser Vuelidate
      1. a. Installer
      2. b. Utiliser les règles de validation par défaut
      3. c. Ajouter ses propres règles de validation
      4. d. Gérer la soumission de formulaire

Utiliser les composants

1. Qu'est-ce qu'un composant ?
   1. 1. Définition
   2. 2. Structure d’un composant
   3. 3. Structuration d’une application en composants
2. Création d'un composant
   1. 1. Manière globale
   2. 2. Manière locale
3. Communication entre composants
   1. 1. Parent - enfant
      1. a. Définition des props dans la Vue
      2. b. Types de données
      3. c. Définition des props dans le ViewModel
      4. d. Validation des props
      5. e. Utilisation des props dans le ViewModel
   2. 2. Enfant - parent
      1. a. Émettre un évènement depuisun composant enfant
      2. b. Écouter un évènement dansle composant parent
   3. 3. Enfant - Enfant
      1. a. Limite de l’utilisation des props et des évènementspersonnalisés
      2. b. Utilisation d’un bus d’évènements
4. Pour aller plus loin
   1. 1. Les différentes propriétésd’instance d’un composant
   2. 2. L’utilisation de la directive v-model surun composant
      1. a. V-model pour un composant contenant un champ texte
      2. b. V-model pour un composant contenant une case à cocher  ouun bouton radio
   3. 3. L’héritage des attributs du composant
   4. 4. Les évènements natifs à relierau composant
   5. 5. La liaison bidirectionnelle d’une prop  avecle modificateur .sync
5. Plusieurs types de composants
   1. 1. Les composants dynamiques
      1. a. L’élément <component> et l’attributis</component>
      2. b. L’élément <keep-alive></keep-alive>
   2. 2. Les composants monofichiers
   3. 3. Les composants basiques
   4. 4. Les composants asynchrones pour améliorer  lesperformances
   5. 5. L’utilisation de la fonction render() pourle rendu
   6. 6. Les composants fonctionnels

Mutualiser des fonctionnalités

1. Utiliser les slots pour injecter du contenu
   1. 1. Définition
   2. 2. Slots nommés
   3. 3. Props de slot
2. Utiliser les composants sans rendu
   1. 1. Définition
   2. 2. Création d’un composant de captures d’erreurs
3. Utiliser les mixins
   1. 1. Définition
   2. 2. Stratégies de fusion des options
4. Utiliser les plugins
   1. 1. Définition
   2. 2. Optimisation des performances
      1. a. Vérifier la taille des plugins et leur vitessede chargement
      2. b. Utiliser le tree-shaking pour les plugins qui le permettent
5. Les directives personnalisées
   1. 1. Définition
   2. 2. Arguments et modificateurs

Créer et déployer une application avec Vue CLI

1. Plusieurs types d'applications
   1. 1. Une SPA classique
      1. a. Définition
      2. b. Contraintes d’une SPA classique
   2. 2. Une application universelle (SPA + SSR)
      1. a. Définition
      2. b. Contraintes d’une application universelle
   3. 3. Un générateur de site statique
      1. a. Définition
      2. b. Architecture JAMstack
      3. c. Contraintes des sites statiques
   4. 4. Une PWA
      1. a. Définition
      2. b. Différents types de caches
      3. c. Contraintes d’une PWA
   5. 5. Quel type d’application pour quel besoin ?
2. Création d’un projet avec Vue CLI
   1. 1. Présentation
   2. 2. Installation
      1. a. Prérequis
      2. b. Prototypage rapide d’une application
      3. c. Création d’une application Vue.jscomplète
   3. 3. Comprendre l’arborescence du projet
      1. a. Racine du projet
      2. b. Dossier src
      3. c. Modification de l’arborescence pour un projet de taillemoyenne
      4. d. Modification de l’arborescence pour un gros projet
3. Fonctionnalités de Vue CLI
   1. 1. Les plugins et les presets
      1. a. Les plugins
      2. b. Les presets
   2. 2. Le rechargement à chaud
   3. 3. La configuration de Webpack
      1. a. Comprendre le fonctionnement
      2. b. Accéder aux fichiers de configurations desdifférents modes
      3. c. Modifier la configuration
      4. d. Utiliser l’API de chaînage pour modifierplus finement la configuration
   4. 4. Les modes et variables d’environnement
      1. a. Les modes pour chaque environnement
      2. b. Les variables d’environnement
   5. 5. Le dossier public
      1. a. Interpolation dans les fichiers HTML
      2. b. Fichiers statiques
   6. 6. La compatibilité des navigateurs
      1. a. La liste des navigateurs compatibles
      2. b. Le mode moderne
      3. c. Les contrôles CORS en mode moderne pour lesmodules ES6
4. Déploiement de votre application en production
   1. 1. Procédure de déploiement
      1. a. Compiler votre application avec Webpack
      2. b. Prévisualiser en local
      3. c. Déployer votre application sur un serveur
   2. 2. Déploiement simple avec des plateformes PaaS
      1. a. Déployer sur Netlify
      2. b. Déployer sur Heroku
      3. c. Créer une image Docker avec Nginx

Consommer des API REST et GraphQL

1. Plusieurs types d'API (REST et GraphQL)
   1. 1. Définition et historique
   2. 2. API REST
      1. a. Définition
      2. b. Contraintes d’une API REST
   3. 3. API GraphQL
      1. a. Définition
      2. b. Description du fonctionnement
2. Sécurité et modes d'authentification
   1. 1. Principes à adopter
   2. 2. Cookie d’authentification
      1. a. Cookie de session
      2. b. Attaques CSRF (Cross Site Request Forgery)
      3. c. Attaques XSS (Cross Site Scripting)
   3. 3. Authentification basique (Basic)
   4. 4. Authentification avec jeton porteur (Bearer)
   5. 5. Authentification avec jeton signé (Bearer + JWT)
      1. a. Signature
      2. b. Principe clé privée - clé publique
      3. c. Composition d’un jeton JWT
   6. 6. Authentification avec une clé API
      1. a. Authentification de l’application par le fournisseurd’API
      2. b. Problématique de sécurité surle réseau de l’utilisateur
      3. c. Où conserver les clés API ?
   7. 7. Authentification avec OAuth 2.0
      1. a. Un serveur d’authentification
      2. b. La problématique de conservation du jeton
3. Créer une API rapidement avec Strapi
   1. 1. Créer le backend de votre API
      1. a. Présentation
      2. b. Installation
   2. 2. Créer le schéma de base de données
      1. a. Présentation du tableau de bord
      2. b. Créer le schéma de base de données
      3. c. Gérer les rôles et les permissions
   3. 3. Tester l’API REST
      1. a. Tester les requêtes GET, POST, PUT et DELETE
      2. b. Utiliser des paramètres pour filtrer unecollection
   4. 4. Tester l’API GraphQL
      1. a. Utiliser Postman ou l’éditeur GraphQL deStrapi
      2. b. Récupérer des données
      3. c. Créer un enregistrement
      4. d. Modifier un enregistrement
      5. e. Supprimer un enregistrement
      6. f. Utiliser des filtres
      7. g. Fonctions d’agrégation et clause groupBy
4. Fetch et Axios pour consommer des API REST
   1. 1. Fetch
      1. a. Définition et usage
      2. b. Les objets Request et Response
      3. c. Gérer les erreurs
      4. d. Interrompre une requête
      5. e. Limiter les appels trop fréquents avec debounceet throttle
      6. f. Exécuter des requêtes en parallèle
   2. 2. Création d’un catalogue de produits
      1. a. Afficher la liste des produits avec fetch
      2. b. Gérer les erreurs avec un composant sansrendu
      3. c. Mutualiser la fonctionnalité d’appel API
      4. d. Mettre en place une pagination
      5. e. Ajouter un menu déroulant pour filtrer laliste par catégorie
      6. f. Utiliser une barre de recherche
   3. 3. Axios
      1. a. Définition et usage
      2. b. L’objet config et l’objet response
      3. c. Gérer les erreurs
      4. d. Interrompre une requête
      5. e. Utiliser les intercepteurs
      6. f. Centraliser la configuration axios dans l’application
5. Apollo pour consommer des API GraphQL
   1. 1. Installation
      1. a. Installation avec Vue CLI
      2. b. Installation manuelle pour consommer une API Strapi
      3. c. Installation du plugin VS Code
   2. 2. Récupérer des données
      1. a. Les requêtes intelligentes
      2. b. Utiliser des paramètres dans la requête
      3. c. Requête conditionnelle
      4. d. Modifier les données reçues
      5. e. Intercepter les erreurs
      6. f. Les options supplémentaires
   3. 3. Placer le code des requêtes dans des fichiers.gql
      1. a. Créer un fichier .gql
      2. b. Importer un fichier .gql
      3. c. Utiliser les fragments
   4. 4. Créer, modifier ou supprimer une ressource
      1. a. La méthode this.$apollo.mutate
      2. b. Le composant ApolloMutation
   5. 5. Mise à jour du catalogue de produits avecApollo
      1. a. Nettoyer l’ancienne logique métier de l’APIREST
      2. b. Définir les requêtes GraphQL
      3. c. Définition des requêtes intelligentes

Utiliser Vue Router pour la navigation

1. Définition et installation
   1. 1. Définition
   2. 2. Installation
      1. a. Télécharger le plugin ou utiliserun CDN
      2. b. Utiliser npm
      3. c. Utiliser Vue CLI
   3. 3. Déclaration du routeur
2. Usage
   1. 1. Définition d’une route
   2. 2. Résolution d’une route
   3. 3. Mode historique
   4. 4. Affichage des composants dans des vues routeur
      1. a. La vue par défaut
      2. b. Les vues nommées
   5. 5. Naviguer à l’aide des liens <router-link></router-link>
      1. a. Fonctionnement
      2. b. La classe active
      3. c. Les props de <router-link></router-link>
      4. d. Les routes nommées
   6. 6. Routes dynamiques
      1. a. Utilisation des segments dynamiques
      2. b. Récupérer les segments dynamiquesavec $route
      3. c. Utiliser les segments dynamiques pour passer des valeurs  auxprops d’un composant
      4. d. Passage entre deux chemins liés à lamême route
   7. 7. Les routes imbriquées
3. Navigation programmée
   1. 1. Navigation programmée avec $router
      1. a. $router.push() et $router.replace()
      2. b. $router.forward(), $router.back(), $router.go()
   2. 2. Les intercepteurs de navigation
      1. a. Des intercepteurs globaux, par route ou par composant
      2. b. Flux de résolution lors d’un passage d’uneroute à l’autre
      3. c. Déclaration d’un intercepteur
      4. d. Exemple d’utilisation d’un intercepteur global
      5. e. Exemple de chargement de données avant lanavigation
   3. 3. Les redirections
4. Pour aller plus loin
   1. 1. Les transitions
      1. a. Le composant <transition></transition>
      2. b. Exemple d’une transition entrante et sortante en fondu
   2. 2. Optimisation des performances
      1. a. Utilisation du lazy-loading avec les composants asynchrones
      2. b. Utiliser le préchargement avec la méthodewebpackPrefetch

Utiliser Vuex pour la gestion d'états

1. Partager un état global entre plusieurs composants
   1. 1. Problématique
      1. a. Le flux de donnée unidirectionnel
      2. b. Utiliser les props et les évènementspour partager  et accéder à l’état global
      3. c. Utiliser un bus d’évènement pourréagir aux actions
   2. 2. Utilisation d’un store pour centraliser les données
      1. a. Déporter les états dans un objetpartagé
      2. b. Tracer les mutations
      3. c. Utiliser Vuex
2. Installer et utiliser le store Vuex
   1. 1. Installation
      1. a. Avec un CDN
      2. b. Avec npm ou yarn
      3. c. Avec Vue CLI
   2. 2. État
      1. a. Définir et accéder à unedonnée de l’état
      2. b. Utiliser mapState() pour générerles propriétés calculées
   3. 3. Accesseurs
      1. a. Accéder à une donnée d’étatvia un accesseur
      2. b. Utiliser mapGetters() pour générerles propriétés calculées
   4. 4. Mutateurs
      1. a. Muter une donnée de l’état du store
      2. b. Muter plusieurs données avec une mutation
      3. c. Muter un objet ou un tableau
      4. d. Utiliser un fichier de constantes pour lister lestypes de mutations
      5. e. Utiliser mapMutations() pour générerles propriétés calculées
      6. f. Les mutations avec la directive v-model
   5. 5. Actions
      1. a. Utiliser les actions pour des traitements asynchrones
      2. b. Utiliser mapActions pour générerles méthodes
      3. c. Chaîner des actions asynchrones
3. Utiliser les modules pour organiser son store
   1. 1. Séparer le store en plusieurs fichiers
   2. 2. Utiliser les modules Vuex

Conclusion

1. Conclusion