Vue.js Global 2020 : le récap
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.
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 :
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.
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.
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.
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.
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.
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.
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
