Formation Vue.js Avancé

Notée : (56)*

Apprenez à maîtriser le framework Vue.js, ses composants avancés tels que keep-alive mais aussi à tester vos applications durant cette formation Vue.js Avancé !

Prix (Formation inter-entreprise)

2000€ HT / personne

Durée

3 jours

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 stagiaires 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.
🇺🇸 This training is also available in English

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éveloppé 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

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 meilleure
  • 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
    • Abstraction
    • Réutilisation

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

  • 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

Télécharger le programme

Le(s) formateur(s)

Jérémy Dumaye

Jérémy Dumaye

Développeur web Full Stack, et adepte des conseils en ergonomie web, et UX/UI, Jérémy intervient en tant que Lead pour différentes équipes, pour des agences qui ont des besoins précis en développement, ou encore avec des clients finaux pour un projet web bien défini.
Sa vision UX/UI lui permet également de proposer des wireframes complets pour créer une structure graphique personnalisée au besoin du client afin de réaliser et développer le site ou l'application web par la suite.

Maîtrisant les langages web tels que HTML, CSS, JavaScript, VueJS, PHP, ou encore Laravel, il passe également une grande partie de son planning pour transmettre son savoir en tant que formateur, une passion pour lui depuis de nombreuses années.

Que ce soit pour des étudiants en école supérieure de développement, ou des professionnels qui souhaitent augmenter leurs compétences, il prend du plaisir à apporter ses compétences et son expertise en étant un grand adepte de la pratique sur des cas concrets, tout en prenant soin de bien valider que tout a été bien assimilé et appris pour chacun de ses élèves.

Voir son profil détaillé

Eduardo San Martin Morote

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 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é

Guillaume Lefrant

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.

Voir son profil détaillé

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...
  • 87 formations au catalogue, 1121 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

14 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
La Compagnie Fiduciaire

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
Syspertec

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
Wemind

Bonne formation avec Eduardo. Formateur sympa et contenue intéressant

Etienne FONTAINE
Disruptual

Le mix théorie/TP est une bonne idée pour aidé à comprendre un peu mieux les différentes parties.

Stéphane GIBERNE
Yomeva

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
ASKORAD

Le formateur a été à l'écoute et n'hésitait pas à revenir sur des notions plus basiques de la technologie lorsque j'en avais besoin. Le support utilisé lors de la formation (un projet de site web pré-codé par le formateur) était à la fois assez complexe pour que la montée en compétence soit ressentie, mais assez digeste pour être parcouru avec aisance en moins d'une journée.

Nicolas SAULNIER
DESOUTTERTOOLS

Très bon formateur, pédagogue qui sait adapter son cours aux besoins des personnes suivants la formation.

Romain BIGNON
SII Atlantique

Formation très enrichissante qui entre en profondeur sur les fonctionnements internes de VueJS, et ne se limite pas à présenter les fonctionnalités. Un point d'attention, les prérequis recommandés pour suivre la formation ne sont vraiment pas là au hasard. Il vaut mieux avoir de solides acquis sur VueJS / JS / TS pour ne pas se sentir trop dépassé par les nouveaux concepts présentés et certaines syntaxes. Cependant, même si vous n'arrivez pas à assimiler rapidement toutes les choses présentées, cela sera forcément bénéfique sur le long terme en revoyant tout cela à tête reposée et avec de la pratique.

Fabien DAUBANES
OpenXtrem

C'était super, le fait de voir les concepts à travers le développement d'un projet et son code review est très formateur, et Guillaume a une vision très pédagogique

Gautier VAILLANT
Hachette Livre

Perfect

Frédéric GUILLAUME

La formation est à échelle humaine, des petits groupes pour pouvoir plus librement s'exprimer et interagir. Il y a une vrai écoute avec un entretien avant la formation et mieux comprendre mes besoins. On sent que le formateur s'intéresse à chaque personne.

Benjamin CHESSON
Fundimmo

Un petit peu rapide au début des tp, il faut prendre le rythme.

Mehdi AYACHE
Kizeo

Formation super enrichissante. Enormément de connaissances acquises, un formateur passionné, pédagogue et patient

François-Xavier SUAREZ
KAROS

Besoin d'aide ?

Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?


Rappel Email

Nos forces

  • Des formations à taille humaine
  • Des formateurs passionnés
  • Des véritables workshop
Accéder au Manifeste

Nos clients

BNP Paribas
La Poste
INRIA
Société Générale
Moody's Analytics
Axa

Formation Vue.js Avancé

Notée : (56)*

Apprenez à maîtriser le framework Vue.js, ses composants avancés tels que keep-alive mais aussi à tester vos applications durant cette formation Vue.js Avancé !

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 stagiaires 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.
🇺🇸 This training is also available in English

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éveloppé 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

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 meilleure
  • 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
    • Abstraction
    • Réutilisation

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

  • 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

Télécharger le programme

Le(s) formateur(s)

Jérémy Dumaye

Jérémy Dumaye

Développeur web Full Stack, et adepte des conseils en ergonomie web, et UX/UI, Jérémy intervient en tant que Lead pour différentes équipes, pour des agences qui ont des besoins précis en développement, ou encore avec des clients finaux pour un projet web bien défini.
Sa vision UX/UI lui permet également de proposer des wireframes complets pour créer une structure graphique personnalisée au besoin du client afin de réaliser et développer le site ou l'application web par la suite.

Maîtrisant les langages web tels que HTML, CSS, JavaScript, VueJS, PHP, ou encore Laravel, il passe également une grande partie de son planning pour transmettre son savoir en tant que formateur, une passion pour lui depuis de nombreuses années.

Que ce soit pour des étudiants en école supérieure de développement, ou des professionnels qui souhaitent augmenter leurs compétences, il prend du plaisir à apporter ses compétences et son expertise en étant un grand adepte de la pratique sur des cas concrets, tout en prenant soin de bien valider que tout a été bien assimilé et appris pour chacun de ses élèves.

Voir son profil détaillé

Eduardo San Martin Morote

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 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é

Guillaume Lefrant

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.

Voir son profil détaillé

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...
  • 87 formations au catalogue, 1121 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

14 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
La Compagnie Fiduciaire

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
Syspertec

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
Wemind

Bonne formation avec Eduardo. Formateur sympa et contenue intéressant

Etienne FONTAINE
Disruptual

Le mix théorie/TP est une bonne idée pour aidé à comprendre un peu mieux les différentes parties.

Stéphane GIBERNE
Yomeva

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
ASKORAD

Le formateur a été à l'écoute et n'hésitait pas à revenir sur des notions plus basiques de la technologie lorsque j'en avais besoin. Le support utilisé lors de la formation (un projet de site web pré-codé par le formateur) était à la fois assez complexe pour que la montée en compétence soit ressentie, mais assez digeste pour être parcouru avec aisance en moins d'une journée.

Nicolas SAULNIER
DESOUTTERTOOLS

Très bon formateur, pédagogue qui sait adapter son cours aux besoins des personnes suivants la formation.

Romain BIGNON
SII Atlantique

Formation très enrichissante qui entre en profondeur sur les fonctionnements internes de VueJS, et ne se limite pas à présenter les fonctionnalités. Un point d'attention, les prérequis recommandés pour suivre la formation ne sont vraiment pas là au hasard. Il vaut mieux avoir de solides acquis sur VueJS / JS / TS pour ne pas se sentir trop dépassé par les nouveaux concepts présentés et certaines syntaxes. Cependant, même si vous n'arrivez pas à assimiler rapidement toutes les choses présentées, cela sera forcément bénéfique sur le long terme en revoyant tout cela à tête reposée et avec de la pratique.

Fabien DAUBANES
OpenXtrem

C'était super, le fait de voir les concepts à travers le développement d'un projet et son code review est très formateur, et Guillaume a une vision très pédagogique

Gautier VAILLANT
Hachette Livre

Perfect

Frédéric GUILLAUME

La formation est à échelle humaine, des petits groupes pour pouvoir plus librement s'exprimer et interagir. Il y a une vrai écoute avec un entretien avant la formation et mieux comprendre mes besoins. On sent que le formateur s'intéresse à chaque personne.

Benjamin CHESSON
Fundimmo

Un petit peu rapide au début des tp, il faut prendre le rythme.

Mehdi AYACHE
Kizeo

Formation super enrichissante. Enormément de connaissances acquises, un formateur passionné, pédagogue et patient

François-Xavier SUAREZ
KAROS

* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012