La formation Vue.js Avancée s'adresse à des développeur·se·s ayant déjà développé des applications en Vue.js et connaissant les bases Composants.

Si vous débutez avec ce framework, jetez un oeil à notre formation Vue.js pour débutant.

Durant les ateliers pratiques, les participant·e·s pourront approfondir les notions de composants ainsi que les bonnes pratiques associées. Ils verront également des usages plus avancés du framework, tels que les scoped slots, les render functions, et des composants avancés comme le keep-alive. Enfin une demi-journée sera consacrée aux tests.

À l'issue de la formation, les participant·e·s repartiront avec le code source développé lors de ces 3 jours, ainsi qu'une correction sur Gitlab et l'envie (on l'espère) de refactoriser leur applications Vue.js !

Covid-19 : Nous nous adaptons dans ces moments difficiles. Nous avons mis en place des outils permettant l'organisation de formations à distance.

Les objectifs

• Aborder les bonnes pratiques
• Développer des composants réutilisables
• Améliorer les performances de vos applications
• Comprendre les render functions (Vue.js sans templates!)
• Déveloper des mixins pour développer plus vite
• Avoir une approche plus déclarative
• Appréhender le Server Side Rendering avec Nuxt

Pré-requis

• Connaissances de HTML et CSS
• Une bonne connaissance de Javascript
• Avoir dévelopé des projets avec Vue.js, peu importe la taille
• Avoir utilisé au moins une fois des fichiers .vue
• Ordinateur portable à apporter

Le programme de la formation Vue.js Avancé

Jour 1: Créer des Composants wrappers avec des slots

Composants

• Nommage et bonnes pratiques
• Props: validation, surcharge

Mise en pratique : début du Moviez (plateforme de recherche de films)

• Events: payloads, casing

Mise en pratique : rating des films

• Usage de $attrs $listeners
• Two way binding
  • Comprendre le modifier .sync

Mise en pratique : appliquer au Rating

• v-model sur les composants
  • Customisation
  • Encore plus loin avec les computed setter
    • Composition
• Slots
• Slots nommés
• Slots scopés

Mises en pratique : composants de recherche
- Display cards as results (scoped slots)
- Responsible for fetching data
- Named slot when no results
- Use the v-for in slot

• Usage de template
  • Cas pour les slots scopés
  • Cas pour les v-for

Jour 2: Ecrire votre propre composant à base de render functions

Render functions

• Le Virtual DOM, createElement/h
• Les composants dynamiques
• Bonnes pratiques lazy loading de composants
• createElement
  • Les options
  • Passer des props
  • Passer des events
    • modifiers
  • Slots
  • Attributs spéciaux
    • slot
    • ref
    • key
  • directives

Mise en pratique : rating en render function

• Redistribution de $slots et $scopedSlots
• Usage de scoped slots pour de la logique

Mise en pratique : reimplement vue-promised

• Autres usages
  • vue-virtual-scroller
  • vue-local-scope
  • Media queries
  • 3D
  • Vue canvas avec vue-konva

Composants fonctionnels

• Quand est ce que les utiliser
• Caveats
  • Pas d'instance
  • Re rendering
  • Evénements

Mise en pratique : montrer la différence de performance pour MovieCard

Comment marche la compilation de template

Astuces pour débugger

Jour 3: Tests et Composition API

• Les Mixins
• Pourquoi l'api de Composition est meilleur
• Usage dans Vue 2.x
• setup dans les composants
• Accès global via Vue.prototype

Mise en pratique : simple \$t function to translate keys

• keep-alive
  • Cas d'usage
  • Include / exclude

Mise en pratique : refonte du composant de recherche avec l'api de composition

• Abstraction
• Réutilisation
  • Tests unitaires
• Jest + @vue/test-utils
• mount ou shallowMount?
• Comment aller plus vite avec les Snapshot testing

Mises en pratique : tests
- MovieCard
- Composant Search

• Mocking de plugins
• Mocking du store
• Mocking du router

Le(s) formateur(s)

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 78 formations au catalogue, 939 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation