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

Caractéristiques

Livre (broché) - 17 x 21 cm
ISBN : 978-2-409-02942-4
EAN : 9782409029424
Ref. ENI : EIVUEJS

Caractéristiques

HTML
ISBN : 978-2-409-02943-1
EAN : 9782409029431
Ref. ENI : LNEIVUEJS

Téléchargements

Des fichiers complémentaires (12 114 Ko)

Introduction

Quelles notions ce livre couvre-t-il ?
Prérequis
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
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)
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
Futur de Vue.js

Notions essentielles de JavaScript

Introduction
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
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
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
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
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
Gestion des exceptions
1. 1. L’utilité
2. 2. La structure try…catch…finally
3. 3. L’objet Error et les erreurs personnalisées
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
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

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
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
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
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
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
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>
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
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
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
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

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
Les champs particuliers de formulaire
1. 1. Champs date
2. 2. Champs de chargement de fichier
3. 3. Sliders
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
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

Qu'est-ce qu'un composant ?
1. 1. Définition
2. 2. Structure d’un composant
3. 3. Structuration d’une application en composants
Création d'un composant
1. 1. Manière globale
2. 2. Manière locale
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
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
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

Utiliser les slots pour injecter du contenu
1. 1. Définition
2. 2. Slots nommés
3. 3. Props de slot
Utiliser les composants sans rendu
1. 1. Définition
2. 2. Création d’un composant de captures d’erreurs
Utiliser les mixins
1. 1. Définition
2. 2. Stratégies de fusion des options
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
Les directives personnalisées
1. 1. Définition
2. 2. Arguments et modificateurs

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

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 ?
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
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
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

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
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
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
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
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

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
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
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
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

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
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
Utiliser les modules pour organiser son store
1. 1. Séparer le store en plusieurs fichiers
2. 2. Utiliser les modules Vuex

Conclusion

Conclusion

05/01/2022Version papier

Le livre est très bien fait

Anonyme

29/12/2021Version papier

RAS DE PLUS

Anonyme

Yoann GAUCHARD

Après avoir débuté en SSII en tant que développeur et testeur, Yoann GAUCHARD s’est ensuite tourné vers les technologies web et mobile. Aujourd’hui développeur fullstack indépendant, passionné par les technologies web, il est spécialisé dans la conception et la réalisation de sites web avec Symfony ainsi que dans le développement d’applications web mobiles et de Progressive Web Apps avec Vue.js. Son expertise et ses compétences profitent autant à ses clients (start-up, PME/TPE et grands groupes), qu’aux stagiaires d’une école d’informatique à qui il dispense des formations. Aujourd’hui, il souhaite, avec l’écriture de ce livre, partager ses connaissances au plus grand nombre.

Yoann GAUCHARD vous dit tout sur la sortie de son nouveau livre Vue.JS, aux Editions ENI :
Pourquoi l'a-t-il écrit ?
À qui se destine-t-il ?