Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?
Rappel Email
Dates
Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)
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 !
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 3.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)
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.
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.
Guillaume Lefrant
Guillaume est un freelance engagé dans la montée des startups françaises. Il accompagne de petites structures dans leur développement, des balbutiements jusqu'à l'arrivée des premiers utilisateurs, voire en phase de croissance.
Grâce à son parcours universitaire, il est à même de conseiller sur les aspects techniques, comme les aspects marketing ou financier.
Guillaume a travaillé plus de 2 ans en tant que responsable pédagogique à la [email protected] et a formé plus 300 étudiants au métier de Développeur Web Fullstack.
Le partage de connaissance est pour lui une chose primordiale au fonctionnement de notre monde moderne et la pédagogie est son casse-tête préféré.
Spécialisé en développement Laravel et VueJS, il est à même de résoudre les différents challenges techniques et métiers qui peuvent se présenter, comme par exemple, l'installation d'un système de temps réel pour gérer des enchères ou la création d'une librairie de composants personnalisables et extensibles.
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...
- 80 formations au catalogue, 969 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
8 témoignages
Formation très intéressante et modulable, Eduardo prends bien le temps de réexpliquer et s'assure que chaque aspect de la formation a bien été assimilé.
Lucas CINI
Bonne formation, animée par un formateur de très haute qualité. Eduardo nous a donné de précieux conseils pour utiliser pleinement la puissance de VueJS et mettre en place des bonnes pratiques de code. Il nous a également appris comment utiliser au mieux Vue DevTools pour débugger efficacement une application. Je recommande.
Charles ARMAND
Le formation VueJS Avancée m'a permis de mieux maitriser des outils importants (composition, router, tests, store, etc). Grâce à un formateur de très haut niveau, j'ai pu appréhender les concepts dont j'ai besoin pour travailler avec des développeurs expérimentés Matthieu Varagnat, CTO Wemind.io
Matthieu Varagnat
Bonne formation avec Eduardo. Formateur sympa et contenue intéressant
Etienne FONTAINE
Le mix théorie/TP est une bonne idée pour aidé à comprendre un peu mieux les différentes parties.
Stéphane GIBERNE
Jonathan est très compétent et à l'écoute. Il n'hésite pas à passer du temps avec chacun pour débugger les exercices et répond aux questions personnelles.
Vincent DAVID
Un petit peu rapide au début des tp, il faut prendre le rythme.
Mehdi AYACHE
Formation super enrichissante. Enormément de connaissances acquises, un formateur passionné, pédagogue et patient
François-Xavier SUAREZ
Besoin d'aide ?
Nos forces
- Des formations à taille humaine
- Des formateurs passionnés
- Des véritables workshop
Nos clients
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 restons ouverts. Cette formation est disponible à 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 3.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)
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.
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.
Guillaume Lefrant
Guillaume est un freelance engagé dans la montée des startups françaises. Il accompagne de petites structures dans leur développement, des balbutiements jusqu'à l'arrivée des premiers utilisateurs, voire en phase de croissance.
Grâce à son parcours universitaire, il est à même de conseiller sur les aspects techniques, comme les aspects marketing ou financier.
Guillaume a travaillé plus de 2 ans en tant que responsable pédagogique à la [email protected] et a formé plus 300 étudiants au métier de Développeur Web Fullstack.
Le partage de connaissance est pour lui une chose primordiale au fonctionnement de notre monde moderne et la pédagogie est son casse-tête préféré.
Spécialisé en développement Laravel et VueJS, il est à même de résoudre les différents challenges techniques et métiers qui peuvent se présenter, comme par exemple, l'installation d'un système de temps réel pour gérer des enchères ou la création d'une librairie de composants personnalisables et extensibles.
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...
- 80 formations au catalogue, 969 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
8 témoignages
Formation très intéressante et modulable, Eduardo prends bien le temps de réexpliquer et s'assure que chaque aspect de la formation a bien été assimilé.
Lucas CINI
Bonne formation, animée par un formateur de très haute qualité. Eduardo nous a donné de précieux conseils pour utiliser pleinement la puissance de VueJS et mettre en place des bonnes pratiques de code. Il nous a également appris comment utiliser au mieux Vue DevTools pour débugger efficacement une application. Je recommande.
Charles ARMAND
Le formation VueJS Avancée m'a permis de mieux maitriser des outils importants (composition, router, tests, store, etc). Grâce à un formateur de très haut niveau, j'ai pu appréhender les concepts dont j'ai besoin pour travailler avec des développeurs expérimentés Matthieu Varagnat, CTO Wemind.io
Matthieu Varagnat
Bonne formation avec Eduardo. Formateur sympa et contenue intéressant
Etienne FONTAINE
Le mix théorie/TP est une bonne idée pour aidé à comprendre un peu mieux les différentes parties.
Stéphane GIBERNE
Jonathan est très compétent et à l'écoute. Il n'hésite pas à passer du temps avec chacun pour débugger les exercices et répond aux questions personnelles.
Vincent DAVID
Un petit peu rapide au début des tp, il faut prendre le rythme.
Mehdi AYACHE
Formation super enrichissante. Enormément de connaissances acquises, un formateur passionné, pédagogue et patient
François-Xavier SUAREZ
Nos clients
* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012