Vue.js

• 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

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)

• 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)

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