Vue.js
Des bases solides pour développer des applications avec Vue.js
Présentation du cours
Vue est une librairie sortie en février 2014. Cette librairie est adaptée pour réaliser des applications légères, robuste, fiable et facilement évolutive sur le long terme en se concentrant sur la logique business. Réalisant la liaison dynamique entre composant et vue, cette librairie vous assure de vous laisser libre choix dans l’écosystème qui s’articulera autour de celle-ci.
Cette formation rédigée, par nos formateurs experts et qualifiés sur la technologie (certifié Vue Js Developer Expert et contributeurs sur la librairie), vous permettra d’acquérir les connaissances nécessaires (débutant à expertise complète) afin de réaliser des applications robustes, évolutives et maintenables dans le temps.
Les librairies externes et les tests occupant une grande part dans l’écosystème Vue, certains modules seront fortement orientés vers ceux-ci et tous les exercices vus au cours de la formation seront testés avec un couverture de tests à 100%.
Public cible
- Développeurs frontend
- Développeurs Full-stack type JavaScript / Node.js
- Développeur web intéressé par le développement d’une application Vue
- Tout public intéressé par le développement d’une application Vue
Prérequis
Avoir suivi ou avoir des connaissances équivalentes aux cours:
- Javascript Moderne (scope, arrow function, class, notion du this, programmation asynchrone avec les promises)
- TypeScript, ou notions de base (typages basiques)
Objectifs pédagogiques
- Développer une application Vue
- Réaliser des tests pour garantir une maintenabilité dans le temps
- Appréhender l’écosystème de Vue dans sa globalité (librairies externes)
Programme
Jour 1
A la découverte d’une nouvelle librairie et première prise en main des fondations de celle-ci
Module Intro : Présentation du déroulement
- Présentation du speaker
- Tour de table pour tous se connaître
- Présentation du déroulement de la formation
Module 1 : Initiation à Vue
- Configuration de son IDE: Webstorm vs Vscode
- A quoi ressemble Vue
- Le tooling de Vue
- La différence entre composition API et option API
Ateliers:
- Bootstrapper une application Vue
- Intégrer une librairie externe à Vue
Module 2: Instance de Vue
- L’instance de Vue
- Deep Dive sur la création d’une instance Vue
- Les différents cycle de vie d’une instance de Vue
- Les différents types de propriétés
- non réactive
- réactive
- computed
- méthodes
- La différences entre computed et watcher
- Les composants Vue
- les composants local
- les composants global
- Deep Dive dans la réactivité de Vue
Ateliers:
- Créer vos premier composants
Module 3: Rendu dynamique
- DataBinding
- les différents types de databindings
- Différence entre propriété et attributs
- La composition API
- A quoi sert-elle ?
- Comment la mettre en place ?
- Comment en tirer le profit maximum
Ateliers:
- Afficher une personne dans une card
- Réagir à l’événement click d’un bouton pour afficher une autre personne de manière aléatoire.
Module 4: Réaliser des requêtes réseaux
- Le client fetch native
- Le client axios
- Faire le bon choix de son client http
- La Suspense API et composant asynchrone
Ateliers:
- Réaliser un appel au serveur pour afficher une personne
- Réaliser un appel au serveur lors de l’évènement click sur un bouton
Jour 2
Vers des notions plus poussées du framework mais vitales pour créer des applications plus poussées comportant des formulaires et ayant des UIs plus riches.
Module 1: Réaliser un routing de base
- Appréhender le routing
- La philosophie de routing dans une app de type CSR
- La configuration de base du routing en Vue
- Configurer un routing
- Naviguer dans son application
Ateliers:
- Mettre en place un système de routing au sein d’une application Vue
- Naviguer par défaut sur une route
- Naviguer vers une route en particulier
Module 2: Le code flow de Vue
- Les directives built-in
- v-if
- v-for
- template
Ateliers:
- Utilisation de la directive v-for pour créer la vue d’une liste de personne
Module 3: Communication composants – Parents / Enfants
- Communication Parent – Enfant
- La fonction defineProps
- Rendre des inputs requis par typage
- Communication Enfant – Parent
- La fonction defineEmits
- Rendre les paramètres d’une évent emitter requis par typage
Ateliers:
- Créer un composant customisable à l’aide d’Input et d’Output
Module 4: Les formulaires – Temlate Driven
- Les bases du formulaires
- la directive v-model
- les modifiers
- Créer des composants custom de formulaires
- Template Driven Form avec Veelidate
- Les high order components
- La validation avec Veelidate
- La performance avec Veelidate
Ateliers:
- Créer un formulaire
- Créer un formulaire d’update
- Créer un formulaire avec Veelidate
Module 5: Les formulaires – Reactive Form
- Reactive Form avec Vuelidate
- La composition Api avec Vuelidate
- La validation avec Vuelidate
- La performance avec Vuelidate
- Créer ses propres règles de validation
- Les formulaires déstructurés
Ateliers:
- Créer un formulaire avec Vuelidate
- Réaliser de la validation
Module 6: Modifiers et directrices
- Les modifiers clavier
- La directive
- Cycle de vie d’une directive
- Les paramètres d’une directive
- Les directives locals
- Les directives globals
Ateliers:
- Créer une directives
Module 7: State Management avec Pinia
- Le Store management
- Gérer son store avec Pinia
- state
- actions
- sélecteurs
Ateliers:
- Mise en place d’un store avec Pinia
Module 7: Le Lazy Loading
- Layloader des composants avec le routing
- Affichez dynamiquement des composants
- Gardez en cache des composant dynamique déjà render
Ateliers:
- Lazyload à l’aide du routeur des composants