Vue.js

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

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%.

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