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
  • TP Début du Moviez (plateforme de recherche de films)
• Events: payloads, casing
  • TP Rating des films
• Usage de $attrs $listeners
• Two way binding
  • Comprendre le modifier .sync
  • TP Appliquer au Rating
  • v-model sur les composants
    • Customisation
    • Encore plus loin avec les computed setter
• Composition
  • Slots
  • Slots nommés
  • Slots scopés
  • TP Composant 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
  • TP Rating en render function
• Redistribution de $slots et $scopedSlots
• Usage de scoped slots pour de la logique
  • TP Reimplement vue-promised
• Autres usages
  • vue-virtual-scroller
  • vue-local-scope
  • Media queries: https://github.com/flatanimals/vue-media-queries
  • 3D: https://github.com/fritx/vue-threejs
  • Vue canvas: https://github.com/konvajs/vue-konva

Composants fonctionnels

• Quand est ce que les utiliser
• Caveats
  • Pas d'instance
  • Re rendering
  • Evénements
• TP 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
  • TP simple \$t function to translate keys
• keep-alive
  • Cas d'usage
  • Include / exclude
• TP 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
  • TP Tests
    • MovieCard
    • Composant Search
  • Mocking de plugins
  • Mocking du store
  • Mocking du router

Le(s) formateur(s)

Jonathan Barthélémy

Consultant spécialisé dans les technologies du web utilisant Javascript (Vue.js/Nuxt, Node.js, Angular, React).

Après des débuts en tant que développeur dans plusieurs types d'entreprises, Jonathan délivre, depuis maintenant 4 ans, son expertise pour différents clients à travers la formation et l'accompagnement des équipes techniques dans leurs transformations numériques.

Voir son profil détaillé

Eduardo San Martin Morote

Eduardo est un membre de la core team Vue.js, il contribue à l'Open Source et est très actif dans l'écosystème Vue avec des projets comme vue-router, vuefire, vuexfire, vue-promised, vue-motion, vue-tweezing, ... Il est aussi Freelance Front End et évite toujours le gâchis en appliquant le principe du Lean un peu partout, des fois un peu trop ! En équipe, il prend plaisir à aider les autres. Les soirs, il fait souvent de la veille technique et partage ce qu'il apprend lors de ses discussions dans la journée. Il organise également le Meetup Vue.js à Paris.

Voir son profil détaillé

Guillaume Chau

Guillaume est un membre de la Core Team de Vue.js et travaille sur des composants officiels comme vue-devtools, vue-cli, vue-curated et vue-ui. Il est aussi contributeur d'autres projets Open Source liés à Vue.js, GraphQL et Node.js comme vue-apollo, vue-meteor, vue-virtual-scroller, nodepack et bien d'autres.
Actuellement développeur chez Livestorm, il participe également aux meetups Javascript et Vue.js sur la région de Lyon, ainsi qu'à de nombreuses conférences autour du globe.

Voir son profil détaillé

A propos de Human Coders

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

• une habilitation Datadock, 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...
• 74 formations au catalogue, 878 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