Vue.js : Développer des applications web modernes et performantes

Jour 1 :

Maîtriser l'environnement du développeur JS

• Les Single Page Applications
• Les limites de Javascript et de jQuery
• Lenteurs du DOM
• Positionnement de js
• Exemple de travaux pratiques : le formateur réalise une maquette simple d'une page web. Il réalise un diagramme de classe UML pour représenter la modélisation et le découpage de la page sous forme de composants web. A partir du diagramme de classe, il implémente une partie du code pour montrer le fonctionnement d'une SPA en “from scratch” (en partant de zéro, sans Framework) et mettre en application les syntaxes ES6. Les participants reproduisent et exécutent le code sur leur poste de travail.

Comprendre les principes clés et bonnes pratiques de Vue.js

• Migration vers js et les versions de Vue.js
• MVVM selon js
• Les outils nécessaires liés à l'utilisation de js (Vue CLI, etc.)
• Les notions et syntaxes de bases (Options API vs Composition API, …)
• Notion de component (HTML vs SFC…)
• La liaison de données (variables réactives et liaisons d'attributs)
• Les structures de contrôle
• Notion d'event
• Exemples de travaux pratiques : Le formateur illustre les principaux concepts à partir d'exemples de code. Les participants reproduisent les manipulations. Le formateur peut vérifier le résultat obtenu par les participants pour valider l'exercice.

Jour 2 :

Développer une SPA avec Vue.js

• Les essentiels de js
• Cycle de vie d'une requête dans js et son rôle
• Les modèles
• Notion d'interpolation
• Attributs, filtres et directives
• Les propriétés calculées
• Différence entre v-model et v-bind
• Le v-model
• Gérer des listes
• L'affichage conditionnel
• Event management
• Les composants dynamiques
• Echange de données entre composants
• L'organisation des composants
• Mixins et Composition API
• Custom Directives
• Render Functions & JSX
• Plugins
• Exemples de travaux pratiques : les participants mettent en pratique les modules présentés en suivant un énoncé qui leur permet de manipuler chaque cas de façon indépendante. Le formateur peut vérifier le résultat obtenu par les participants pour valider l'exercice.

Connaître les concepts et outils indispensables au développement d'applications web dynamiques avec Vue.js (1/2)

• Identifier les principales librairies de composants graphiques du marché
• Utiliser une librairie de composants graphiques avec Vuetify ou une alternative
• Créer une navigation avec Vue-router
• Présentation des routes
• Les modes
• Les liens
• Vue initiale et liens
• Exemples de travaux pratiques : les participants mettent en pratique les notions présentées en suivant un énoncé qui leur permet de manipuler chaque cas de façon indépendante : ils continuent par exemple le cas pratique démarré lors de la séquence précédente : ajouter un menu, une navigation avec différents liens.

Jour 3 :

Connaître les concepts et outils indispensables au développement d'applications web dynamiques avec Vue.js (2/2)

• Présentation des patterns de gestion d'états Flux et Redux
• Gestion des états simple et optimisée avec Pinia
• Gérer des états avec Vuex
• Consommer des API REST avec l'API native fetch ou la librairie Axios
• Exemples de travaux pratiques : Les participants continuent le cas pratique démarré lors de la séquence précédente : créer un store pour ajouter des articles dans un panier, valider la commande avec un appel API. Le formateur peut vérifier le résultat obtenu par les participants pour valider l'exercice.

Réaliser les tests

• La rétrocompatibilité pour les vieux navigateurs (si besoin avéré)
• La qualité du code avec les tests, l'analyse des dépendances
• Un code plus maintenable avec TypeScript et ES Lint
• Un code plus performant avec les outils de builds (production & deployment)
• Brainstorming : le formateur interroge les participants concernant les concepts ou problématiques présentés (rétrocompatibilité, qualité, maintenabilité et performance). Chacun peut faire part de son retour d'expérience, ou commenter.