Objectifs de la formation

• Comprendre les concepts clés de Vue.js
• Être capable de développer une application Single Page App complète avec Vue.js
• Connaître les outils indispensables au développement d'applications Vue.js

---

Programme de la formation

L'écosystème du développeur JS moderne

• La spec ECMAScript.
• La syntaxe ES6+.
• Les nouveautés d'ES9/ES10.
• Babel & Webpack.

Travaux pratiques

Mise en place d'un environnement de développement JS optimisé.

Premiers pas avec Vue.js

• Principes clés de Vue.js.
• Vue.js vs React vs Angular.
• Roadmap et prochaines versions.
• Créer et gérer un projet avec vue-cli.
• La base d'une application : l'instance Vue.
• Créer son premier composant Vue.js.
• Gérer les événements du DOM.
• Débugger avec vue-devtools.

Travaux pratiques

Créer le projet Vue.js qui servira de base au reste des TP.

Répartir son code dans des composants

• L'imbrication de composants et les props.
• Passer du contenu à un composant : les slots/children.
• Déclencher des événements custom.
• Le cycle de vie des composants.

Travaux pratiques

Refactorisation du code de l'application fil rouge : répartition dans des sous-composants.

Enrichir ses templates

• Filters et computedProps : simplifier l'écriture des templates.
• Templates vs render methods & JSX.
• Composants fonctionnels.
• Animations & transitions : améliorer l'expérience utilisateur.

Travaux pratiques

Améliorer l'affichage de l'application : les différentes techniques de rendu.

Gérer la navigation

• Développer un système de routing maison.
• Principes de Vue router.
• Configurer des routes.
• Sécuriser une application : les Navigation Guards.
• Transitions entre écrans.

Travaux pratiques

Mettre en place la navigation avec Vue router.

Gestion des données avec Vuex

• Vuex : concepts de base.
• Installation et mise en œuvre.
• Étendre Vuex avec les plugins.
• Librairies alternatives.

Travaux pratiques

Optimiser l'architecture de l'application par la conversion à Vuex.

Développer une application connectée

• Charger et envoyer des données avec AJAX : les différents scénarios.
• Gestion des formulaires.
• "two-way data binding" vs "one way data flow".
• Vuex et les formulaires.
• Validation de la saisie utilisateur.

Travaux pratiques

Chargement de données issues d'une API REST/JSON et création d'un formulaire.

Aller plus loin avec Vue.js, bonnes pratiques

• Mixins et plugins.
• Regrouper son code dans des Single File Components .vue.
• Créer des custom directives.
• Typage flow/TypeScript.
• Rendre son code robuste grâce aux Prop types.
• Compilation & optimisation des performances.
• Server Side Rendering.
• Développement d'applications mobiles.

Travaux pratiques

Améliorer la qualité du code de l'application.