Vue.js Global 2020 : le récap

Gildas Morel des Vallons
Sep 22 · 9 min read
Image for post
Image for post

Vue.js Global Online Conférence est la seconde grande conférence dédiée à Vue.js de l’année, après Vue.js Amsterdam 2020.

C’est avec grand plaisir que nous avons retrouvé les membres de la core team Vue et bien sûr Evan You, pour deux jours de conférences 100% online.
Au menu : 26 conférences sur Vue 3, Vuex, Vite et Vitepress, Cypress, Gridsome, Nuxt ou encore Vercel.
Autant vous dire que le café et autres boissons énergisantes étaient de mise pour rester concentré pendant toute la durée de l’événement et tenir jusqu’à l’intervention live d’Evan You programmée le deuxième jour à 18h, avec la promesse d’une annonce exclusive.

Cet article revient sur cet événement qui permet de faire un point d’étape complet sur l’écosystème Vue.

Planning et organisation

Initialement prévue les 13 et 14 août, l’événement a été décalé aux 17 et 18 septembre à la demande de la communauté pour éviter un événement en pleines vacances d’été (selon l’information officielle).

Il s’agit d’un événement 100% online organisé sur la plateforme hopin.to et accessible à ceux qui se sont acquittés du prix de la place : un peu moins de $100 hors early brids. Seule la conférence d’Evan You a été diffusée publiquement et en live, et suivie d’une session de questions / réponses.

L’événement était co animé par Jos Gerards, Maria Lamardo et Ben Hong qui assuraient les transitions et sessions de questions / réponses avec dynamisme et… des chapeaux improbables.

Maria Lamardo et Ben Hong — maîtres de conférence.

Evan You annonce la disponibilité de Vue 3

Programmée le second jour en milieu de journée, le talk d’Evan You était le temps fort de ces deux jours de conférences. Il a été diffusé sur Youtube en live et accessible à tout le monde, même si vous ne disposiez pas d’un billet Vue.js Global.

L’annonce exclusive qui a (presque) bien été cachée jusqu’au talk tant attendu était la disponibilité immédiate de Vue 3, nommée “One Piece”.

Durant son talk, Evan You est surtout revenu sur l’histoire du développement de Vue 3 : de la genèse de l’idée jusqu’à sa sortie en version finale en ce 18 septembre 2020.
Il a également évoqué Vue Reactivity et une LTS d’un an et demi sur Vue 2.
Vous pouvez revoir l’intégralité de son talk ci-dessous :

Image for post
Image for post
Image for post
Image for post
L’histoire de Vue 3
Image for post
Image for post
Image for post
Image for post
Vue 3 “One Piece” est disponible — Merci à la communauté

Le top 3 des conférences

Bien évidemment, cela n’engage que moi, mais voici quelques conférences que j’ai vraiment appréciées.

Vite et Vitepress

C’est Tim Benniks qui s’est chargé de ce talk que j’attendais particulièrement depuis son excellent Team First qu’il avait donné à Vue.js Amsterdam 2020.

Il a présenté les bases de Vite.
C’est un outil de build utilisant les native ES Module imports pendant le développement de votre application et Rollup pour assembler le package de production.

Par rapport aux autres bundlers, Vite propose les avantages suivants :
- Démarrage ultra rapide
- Vraie compilation à la demande
- HMR instantané (Hot Module Replacement)
- Le support complet de Vue 3 et TypeScript
- Transpilation automatique jusqu’à ES 2015

Le projet a été initié par Evan You pendant la période de confinement et est encore en développement. Il n’est pas conseillé, pour l’instant, de l’utiliser en production.
Les premiers retours sont très positifs, notamment sur la rapidité de l’outil.
N’hésitez pas à l’essayer, tout ce dont vous avez besoin pour démarrer se trouve sur le projet Vite sur Github.

Dans la seconde partie de son talk, Tim Bennicks a détaillé Vitepress qu’il a présenté comme le petit frère de Vuepress.
A la différence de Vuepress, Vitepress utilise Vue 3 et surtout Vite à la place de Webpack.

Vue 3 reactivity under the hood

Une autre conférence qui m’a particulièrement marquée est celle de Marc Backes intitulée “Vue 3 reactivity under the hood”.

En l’espace de seulement 25 minutes, ce talk revient sur l’implémentation technique de la réactivité dans Vue 2, le pattern Observer et son utilisation pour Vue 3 Reactivity : le module qui se charge de la réactivité de Vue 3.

Dès que la vidéo de cette conférence sera disponible, je l’ajouterai ici.
Le live coding qu’elle contient est vraiment intéressant à suivre.

A noter que Vue 3 Reactivity est un module indépendant de Vue 3, il peut être utilisé à part comme indiqué dans cet échange sur Twitter.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Définition de la réactivité et comparaison Vue 2 vs Vue 3
Image for post
Image for post
Image for post
Image for post
Implémentation de la réactivité de Vue 3

The state of Nuxt

Dans l’écosystème Vue, Nuxt.js tient une place prépondérante. Vue.js Global Online Conference mettait en avance trois conférences dédiées à cet outil très populaire, et plusieurs autres y faisaient référence.

C’est bien sûr Sebastien Chopin qui a animé ce talk pour présenter les nouveautés et les perspectives court terme de ce framework.

Il a commencé par une démo du SSR (Server Side Rendering) de Nuxt 2.14.
A enchaîné avec quelques statistiques d’utilisation :
- 1.1 millions de téléchargements (Août 2020).
- 200 000 visiteurs uniques sur nuxtjs.org.
- Plus d’1 million de projet créés.

Les membres de Nuxt sont également à l’origine de Vue Telemetry, un outil de mesure qui a été créé pour la communauté Vue afin de détecter les différents composants d’un site fait avec Vue, Vuepress, Quasar Framework, Gridsome ou Nuxt.

Et enfin, une bonne partie de la conférence détaillait Nuxt 3 qui présente les caractéristiques suivantes :
- Utilisation de : Webpack 5, postCSS 8, ESBuild.
- Le core a été réécrit en TypeScript.
- Introduction de Nuxt pages (avec l’implémentation de Vue Router 4).
- Ajout d’un module Data Fetching et démo live de l’utilisation de useFetch.

La communauté Nuxt compte aujourd’hui 10 000 contributeurs.

Image for post
Image for post
Image for post
Image for post
Nuxt community et Vue Telemetry
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Utilisation du Data Fetching et autres ajouts de Nuxt 3

Les conférences à retenir

Future of Vuex

Kia King Ishii, core team member et créateur de Vuex ORM avait préparé une présentation de Vuex 5, qui apporte :
- La suppression des mutations, tout se fera maintenant dans les actions.
- Un support complet de TypeScript
- Un code plus léger et plus simple
- La RFC de Vuex 5 sera disponible après la sortie officielle de Vuex 4

Vuex 5 est actuellement encore en preview.
La démo de la conférence montrait le state, les getters et les actions au sein d’un même fichier définissant le store.

Image for post
Image for post
Image for post
Image for post
Vuex 5 et définition d’un store
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Utilisation d’une store avec la composition API

Test driving Vue 3

Talk d’ouverture de Vue.js Global Online Conférence, il a été animé par Anthony Gore qui est Vue community partner et créateur de vuejsdeveloper.com.

C’était une bonne entrée en matière avec une explication claire d’une refactorisation d’un composant utilisant une modal. Techniquement, on a pu voir l’utilisation des méthodes setup() et ref() et l’utilisation de la fonctionnalité Teleport de Vue 3.

Les slides de cette présentation ainsi que le projet démo sont disponibles ici.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Root component, teleport et event emitting

JAMStack from scratch

Parmi les nombreux sites proposant des actualités et des tutoriels sur Vue, il y a le blog VueDose.
Alex Jover Morales en est l’un des contributeurs et dans le cadre de sa conférence “JAMStack from scratch” il a expliqué en sept étapes comment recréer VueDose en mode JAMStack :
1/ Configurer Nuxt pour générer un site statique.
2/ Créer un design de blog en utilisant Tailwind CSS.
3/ Créer une structure de contenu à l’aide de Storyblok.
4/ Créer des pages et afficher le contenu avec Nuxt
5/ Rendre la navigation facile
6/ Optimiser le SEO et le partage sur les réseaux sociaux.
7/ Déployer le blog sur Netlify, en tant que site statique.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Définition de la JAMStack et stack technique de VueDose
Image for post
Image for post
Image for post
Image for post
Définition et utilité d’un design system

PrimeVue, The Next-Gen UI Component Suite

La dernière conférence de cette section est celle de PrimeTek, avec la présentation de leur bibliothèque de composants UI nommée PrimeVue.

Comme son nom l’indique, il s’agit de la bibliothèque PrimeTek adaptée pour Vue, à l’image de PrimeNG pour Angular et PrimeReact pour React.

J’ai retenu cette conférence d’une part car je ne connaissais pas cette bibliothèque de composants, et d’autre part car leur interface de documentation permet de tester les différents rendus et options de chaque composant, ce qui facilite leur utilisation.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
PrimeTek, PrimeVue et Templates

Le bon côté du format online

Le format “online” de cette événement était assez intéressant : chaque talk d’une durée de 25 minutes avait été préenregistré par le speaker, et celui-ci était présent pendant la diffusion pour échanger avec les spectateurs dans le chat.
Suite à la diffusion de la conférence, une séance de questions / réponses de 5 minutes permettait de répondre aux premières questions, puis le speaker se plaçait dans une rubrique du site hopin.to pendant 30 minutes, pour continuer les échanges avec la communauté.
Cela a permis d’avoir un accès facile aux speakers pour approfondir le sujet avec eux. C’est plus simple que dans un événement en présentiel pendant lequel il faut réussir à trouver les personnes lors des pauses.

Conclusion

Avec un format online adaptée à la situation sanitaire et des maîtres de conférence agréables et dynamiques, Vue.js Global Online Conference a été un bon événement à un prix très attractif : un peu moins d’une centaine d’euros pour le tarif le plus élevé.

Même si je me suis lancé dans une sélection ci-dessus, je vous invite à regarder les vidéos des conférences dès qu’elles seront disponibles car certaines que je n’ai pas citées pourront vous intéresser.
Je pense notamment à :

  • “What you’ll love in Vue 3” d’Alex Kyriakidis qui revient sur toutes les nouveautés
  • “Nuxt.js as a headless CMS” de Debbie O'Brien qui était bien animé, avec de l’humour et du Taekwondo.
  • “Vercel” qui est surtout un retour d’expérience de la création de Next.js avec des parallèles intéressants avec Vue.

Ces deux jours de conférences ont permis à la communauté Vue de se réunir et de fêter la sortie surprise de la version 3 du framework, intitulée “One Piece”.

Un dernier mot pour remercier SFEIR, mon employeur, pour m’avoir donné l’opportunité de participer à cet événement.

Longue vie à Vue 3 !

P.S : Je mettrai à jour cet article au fur et à mesure que les vidéos seront disponibles. Elles sont publiées progressivement à cette adresse : https://www.youtube.com/c/VuejsAmsterdam/videos

CodeShake

Learnings and insights from SFEIR community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store