Objectifs pédagogiques
- Décrire les aspects avancés du Vue.js
- Créer des composants plus réutilisables
- Développer une application plus optimisée.
Modalités et moyens pédagogiques
Formation délivrée en présentiel ou distanciel* (e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).
Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :
- Ordinateurs Mac ou PC (sauf pour les cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
- Environnements de formation installés sur les postes de travail ou en ligne
- Supports de cours et exercices
En cas de formation intra sur site externe à M2i, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatique...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.
* nous consulter pour la faisabilité en distanciel
** ratio variable selon le cours suivi
Niveau requis
Avoir des connaissances sur Vue.js.
Public concerné
Développeurs Vue.js souhaitant produire des applications Vue.js plus optimisées et qualitatives.
Programme
Jour 1
Approfondissement de Vue Router
- Chargement dynamique des composants
- Le mode "historique"
- La configuration server-side
- Les paramètres d'URL
- Routes imbriquées / Nested routes
- Navigation par le code
- Redirection
- Gestion d'erreur
- Flash message
- La pagination
- Les gardes
Exemple de travaux pratiques (à titre indicatif)
- Mise en oeuvre des routes Vue.js dans l'application
Les slots
- Définition et utilité des slots
- Injection de contenu dans un template
- Slots et composants génériques
- Slots et composants parents
- Props et slots
- La directive v-slot
- Les slots nommés
- La portée des slots
- Les slots à nom dynamique
Exemples de travaux pratiques (à titre indicatif)
- Utilisation des slots pour réaliser un composant dont le contenu dépend de sa position dans la page (composant générique)
- Ajout de chargement lazy pour des routes référençant des composants sur le projet existant
Les composants asynchrones
- Utilité de composants asynchrones
- Chargement des composants à la demande
- La fonction "defineAsyncComponent"
- Retour sur les promises
- Gestion des erreurs et de l'état
Exemple de travaux pratiques (à titre indicatif)
- Intégration d'appels de composants de manière asynchrones dans l'application écrite
Jour 2
Vuex et Pinia
- Définition du modèle de gestion d'état (state management pattern)
- Vuex ou Pinia ?
- Un seul stockage par application
- Exemple de stockage le plus élémentaires
- Gestion de l'état Vuex dans les composants
- Les getters
- Les mutations d'état (modifications)
- Les commits
- Gestion des actions
- Différence avec Pinia
Exemples de travaux pratiques (à titre indicatif)
- Création d'un store de données d'état avec Vuex dans l'application en cours et mise à jour des données
- Exemple des mêmes fonctions avec Pinia et démonstration
Test avec Vue.js
- Pourquoi tester les applications Vue.js
- Les différents types de test
- Tester uniquement avec Vue.js
- Les frameworks à disposition (Jest...)
Exemple de travaux pratiques (à titre indicatif)
- Mise en oeuvre d'un test avec Jest
La performance
- Le code splitting
- Pourquoi le lazy loading est important dans Vue.js
- Le chargement à la demande
- Chargement lazy des routes avec "dynamic import"
- Les directives v-once et v-memo
Vuex et authentification
- Schéma de l'authentification
- Authentifier avec un Token
- JWT (JSON Web Token)
- Connexion / déconnexion
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)
