Formation Vue.js 3

Programme de notre formation Vue.js

Environnement de développement moderne

• Node.js & npm : Installation et gestion des dépendances
• Vite : Serveur de développement rapide et configuration zéro
• VS Code & Extensions : Outils pour améliorer la productivité
• Structure d’un projet Vue 3 : Organisation des fichiers et conventions
• Atelier pratique : Initialiser un projet Vue 3 avec Vite et configurer l’environnement de développement.

Rappels sur TypeScript et JS

• JS vs TypeScript
• Introduction à TypeScript et son utilisation dans Vuejs
• Types de base et variables
• Interfaces et classes
• Fonctions et paramètres optionnels

Introduction à Vue.js

• Vue 3 Composition API : Comprendre la nouvelle approche de composition
• Fonction Render
• Réactivité : Mécanismes de liaison des données et du DOM virtuel
• Syntaxe de base : Directives v-if, v-for, v-model
• Templates : Utilisation des expressions moustache {{ }}
• Atelier pratique : Créer un composant simple affichant des données dynamiques.

Composants et communication

• Single File Components (SFC) : Structure et avantages
• Props & Events : Communication entre composants parent et enfant
• Slots : Insertion de contenu dynamique
• Cycle de vie des composants : Hooks onMounted, onUpdated
• Atelier pratique : Développer une carte de film réutilisable avec des props et des événements personnalisés.

Routage avec Vue Router

• Introduction à Vue-Router et usage
• Configuration des routes : Définir les chemins et les composants associés
• Navigation : Utilisation de <RouterLink> et <RouterView>
• Routes dynamiques : Paramètres et redirections
• Les sous-routes (nested routes)
• Lazy Loading : Chargement différé des composants
• Atelier pratique : Implémenter la navigation entre la liste des films et les détails d’un film.

Gestion d’état avec Pinia (Data Store)

• Principe du Storage (magasin de données)
• Introduction à Pinia : Remplaçant de Vuex pour Vue 3
• Comment typer son store Pinia ? Comment gérer un état global sur sa SPA ?
• Création de stores : Définir l’état, les getters et les actions
• Intégration avec les composants : Utiliser les stores dans les composants
• Persistance de l’état : Sauvegarder l’état dans le localStorage
• Atelier pratique : Mettre en place un store pour gérer la liste des films et les favoris.

Formulaires et validation

• FormKit : Création de formulaires robustes avec validation intégrée
• VeeValidate : Validation des champs de formulaire
• Gestion des erreurs : Affichage et traitement des erreurs utilisateur
• Accessibilité : Bonnes pratiques pour des formulaires accessibles
• Atelier pratique : Créer un formulaire d’ajout de film avec validation des champs requis.

Tests automatisés

• Comment bien tester son application pour ne rien laisser au hasard ?
• Introduction à Vue-Test-Utils et Vitest
• Tests unitaires avec Vitest
• Installation et configuration
• Simuler des événements et des interactions
• Mocks et stubs
• Tests end-to-end avec Cypress
• Bonnes pratiques de tests
• Automatisation via une pipeline CI/CD
• Atelier pratique : Implémenter des tests automatisés sur les fonctions et interactions clés.

Optimisation des performances

• Analyse des performances : Utilisation de Vite Bundle Analyzer et Vue DevTools
• Optimisations : Techniques de lazy loading, virtualisation des listes
• Monitoring : Intégration de Sentry pour le suivi des erreurs
• Best practices : Conseils pour maintenir une application performante
• Atelier pratique : Optimiser le chargement des composants et analyser les performances de l’application.

Bonnes pratiques de déploiement

• Build de production : Générer une version optimisée de l’application
• Déploiement : Publier l’application sur Netlify ou Vercel
• CI/CD : Mettre en place une pipeline d’intégration et de déploiement continus
• Documentation : Utiliser Storybook pour documenter les composants
• Atelier pratique : Déployer l’application complète et configurer une pipeline CI/CD basique.

Nouveautés clés de Vue.js

• Dernières nouveautés Vue 3.4 et 3.5
• Réactivité optimisée
• Parser de template rapide
• defineModel() stabilisé
• useId() génération IDs
• useTemplateRef() simplifié
• Hydratation paresseuse
• onWatcherCleanup() nettoyage
• Shorthand v-bind
• Atelier pratique : Intégrer defineModel() et useId() dans un formulaire dynamique pour simplifier la gestion des champs.