Développement

Vue 3 avancé : architecture, performance et industrialisation d'applications professionnelles

3 jour(s) • 21h

Description

Vue.js 3 a profondément transformé la manière de construire des applications web modernes : Composition API, reactivity réécrite, écosystème consolidé autour de Pinia et Vue Router 4, intégration native de TypeScript, outillage Vite. Pour les équipes qui ont déjà adopté le framework, l'enjeu n'est plus d'apprendre Vue mais de structurer des applications professionnelles maintenables sur la durée, de maîtriser les patterns avancés et de garantir des performances exploitables en production. Cette formation s'adresse à des développeurs déjà autonomes sur Vue.js qui souhaitent franchir un cap vers une véritable maîtrise. Elle combine l'approfondissement de la Composition API et des composables, les patterns d'architecture pour applications complexes, la gestion d'état avancée avec Pinia, l'optimisation des performances et les pratiques de test modernes. L'approche est résolument orientée pratique : chaque concept est mis en œuvre sur des scénarios représentatifs d'un environnement de développement professionnel, intégrant TypeScript, Vite, Vitest et l'écosystème Vue moderne. La formation se concentre sur Vue 3 en environnement applicatif front moderne. Les sujets Nuxt, SSR et SSG peuvent être abordés en ouverture, sans constituer le cœur du programme.

Objectifs pédagogiques

Approfondir la Composition API et la syntaxe pour structurer des composants maintenables et typés.
Comprendre le système de réactivité de Vue 3 et ses implications opérationnelles.
Concevoir des composables réutilisables pour structurer la logique applicative.
Structurer une application Vue complexe selon des patterns d'architecture éprouvés.
Maîtriser la gestion d'état avec Pinia : stores, modularité, plugins.
Mettre en œuvre Vue Router 4 avancé : guards, lazy loading, gestion des routes dynamiques.
Identifier les principaux leviers d'optimisation d'une application Vue : lazy loading, code splitting, composants asynchrones, rendu et réactivité.
Écrire des tests unitaires et de composants avec Vitest et Vue Test Utils.
Intégrer Vue dans une chaîne d'industrialisation moderne (TypeScript, Vite, CI/CD).

Public concerné

Développeurs front et fullstack ayant déjà pratiqué Vue.js

Lead développeurs et tech leads front

Architectes logiciels intervenant sur des applications Vue

QA engineers et automaticiens de test disposant d'une pratique réelle du code Vue

Prérequis

Pratique régulière de Vue.js, bases solides en Vue 3 recommandées

Maîtrise des fondamentaux : composants, props, events, directives, watchers, computed

Bonne pratique de JavaScript ES6+ (modules, destructuring, async/await, classes)

Familiarité avec TypeScript appréciée

Expérience d'un outillage moderne (Vite, npm/pnpm, Git)

Déroulé du programme

Jour 1 / Composition API en profondeur et architecture des composants (7h)

Module 1 / Composition API et système de réactivité (2h30)

Rappel positionnement Options API vs Composition API : pourquoi et quand utiliser l'une ou l'autre
La syntaxe : structure, avantages, conventions
ref, reactive, computed, watch, watchEffect : usage avancé et différences fondamentales
Système de réactivité Vue 3 : Proxy, dépendances, détection des changements
Pièges courants de la réactivité : perte de réactivité, accès direct, déstructuration
shallowRef, shallowReactive, toRef, toRefs : cas d'usage avancés
Cycle de vie en Composition API : onMounted, onBeforeUpdate, onUnmounted, etc.

Module 2 / Composables et logique réutilisable (2h)

Principe des composables : extraire et réutiliser la logique réactive
Conventions de nommage et structure d'un composable
Composables avec état partagé vs état local
Composables typés avec TypeScript : signatures, retours, génériques
Composables courants de la communauté : VueUse, panorama et usage
Approfondi en TP : conception d'un composable métier réutilisable

Module 3 / Patterns d'architecture et communication entre composants (2h30)

Provide / Inject : injection de dépendances entre composants
Slots avancés : nommés, scoped, dynamiques
Composants dynamiques : keep-alive, transition, gestion du cycle de vie
Teleport: rendre du contenu hors du flux DOM normal
Patterns d'architecture : Smart vs Dumb components, composants headless, render functions
TypeScript dans les composants Vue : props typées, emits typés, ref typés

Jour 2 / Écosystème Vue : Pinia, Vue Router et performance (7h)

Module 4 / Gestion d'état avancée avec Pinia (2h30)

Pinia : positionnement, architecture, différences avec Vuex
Stores avec setup function : exploiter pleinement la Composition API
État, getters, actions : conventions et bonnes pratiques
Modularité : stores multiples, communication entre stores
Persistance d'état : plugins, localStorage, synchronisation
Plugins Pinia: étendre les capacités du store
Tests de stores Pinia : isolation, mocking
Approfondi en TP : architecture d'une application multi-store avec Pinia

Module 5 / Vue Router 4 avancé (1h30)

Routes dynamiques et paramètres : matching, validation, type safety
Routes imbriquées : architecture, transitions, redirections
Navigation guards : beforeEach, beforeEnter, beforeRouteEnter, scénarios d'authentification
Lazy loading des routes : optimisation du bundle initial
Meta fields et gestion des permissions
Approfondi en TP : mise en place d'un système de routing avec authentification et lazy loading

Module 6 / Performance et optimisation (3h)

Comprendre la performance d'une application Vue : rendu, reactivity, taille de bundle
Lazy loading des composants : defineAsyncComponent
Suspense : orchestration de composants asynchrones et gestion des états de chargement
Code splitting et optimisation du bundle Vite : analyse, configuration
v-memo, v-once : optimisations ciblées du rendu
shallowRef et shallowReactive : éviter la réactivité profonde quand inutile
Watchers et effects : éviter les exécutions inutiles, debounce et throttle
Mesure et profiling : Vue Devtools, Performance API, Lighthouse
Approfondi en TP : audit et optimisation d'une application Vue existante

Jour 3 / Tests, qualité et industrialisation (7h)

Module 7 / Tests unitaires et de composants avec Vitest (2h30)

Vitest: positionnement, configuration, intégration avec Vite
Tests unitaires de composables : isolation, assertions, mocking
Tests de composants avec Vue Test Utils : montage, props, events, slots
Tester les interactions utilisateur : clics, saisies, navigations
Mocking des dépendances : stores, router, modules externes
Bonnes pratiques : que tester, quelle granularité, comment maintenir les tests
Approfondi en TP : suite de tests sur un composant et un composable

Module 8 / TypeScript dans une application Vue (1h30)

Configuration TypeScript dans un projet Vue : tsconfig, vue-tsc
Typage des props, emits, slots, ref, computed
Generics dans les composants et les composables
Typage des stores Pinia
Patterns courants : types utilitaires, type guards, narrowing
Erreurs courantes et stratégies de résolution

Module 9 / Industrialisation et déploiement (2h)

Vite en profondeur : configuration, plugins, modes (dev, prod)
Optimisation du bundle : analyse avec rollup-plugin-visualizer, tree-shaking
Variables d'environnement et configuration multi-environnement
Intégration CI/CD : lint, tests, build, déploiement (GitHub Actions, GitLab CI, Azure DevOps)
Stratégies de versionnement et de publication
Sécurité : Content Security Policy, gestion des dépendances, audit npm

Atelier final de synthèse (1h)

Mise en perspective d'un projet Vue complet incluant composables, Pinia, Router, tests et optimisations
Discussion ouverte sur les pratiques et défis rencontrés par les participants
Recommandations personnalisées pour la mise en application immédiate