Vue.js Amsterdam 2020 : le bilan
Jeudi 20 et Vendredi 21 février 2020 avait lieu la troisième édition de l’événement Vue.js Amsterdam, le rendez-vous annuel le plus important de la communauté Vue, l’occasion de faire le point sur les perspectives de cette année 2020.
Ces deux jours ont été riches en présentations des nouveautés de la version 3 de Vue avec notamment la Composition API, les nouveautés de Nuxt.js, Vue Test Utils, etc…
Cet article revient sur le déroulement de l’événement, l’intervention d’Evan You (créateur de Vue.js) et les meilleures conférences auxquelles nous avons assisté. Nous terminerons ce retour d’expérience avec les bons et mauvais côtés de notre aventure à Vue.js Amsterdam, si vous souhaitez y participer l’année prochaine !
Vous retrouverez également en fin d’article une sélection d’outils utilisés ou mentionnés durant la conférence.
Planning et organisation
Vue.js Amsterdam 2020 est la troisième édition de cet événement qui a été créé en 2018.
Doté d’un écran de 500m2, l’Amsterdam Theater a accueilli plus de 1200 participants pour 2 jours de conférences d’une vingtaine de minutes chacune. Sur les 30 présentations qui étaient prévues, seule une a été annulée.
Autour de ces conférences, il y a eu la diffusion en avant première du documentaire “Vue.js: The Documentary”, ainsi qu’un quizz avec des questions sur le langage javascript et sur les speakers. Et enfin une after party le vendredi soir.
Le rythme était de 4 conférences, puis une pause : soit 2 pauses par demi-journée et celle du déjeuner. Plusieurs buffets proposaient différents types de nourriture et boissons. Ces pauses étaient une bonne occasion d’échanger avec les speakers.
Accolée aux 2 jours de conférences, il y avait la journée du mercrerdi organisée par frontenddeveloperlove.com et, le samedi, une journée workshop “Deep Dive with Vue3” avec Evan You.
Evan You nous parle des nouveautés de Vue3
Jeudi matin, 9h00, arrivée d’Evan You (@youyuxi) sur scène sous les applaudissements d’un public impatient de connaître les dernières actualités de la version 3 de Vue.js.
Cette conférence intitulée “State of the vuenion” (comme en 2019) a permis de mettre en lumière les éléments suivants :
- Evan se sert du nombre d’utilisateurs des Vue.js devtools pour mesurer la popularité de son framework.
- Absent des sondages StackOverflow en 2018, Vue.js est maintenant second au classement des frameworks les plus appréciés des développeurs : https://insights.stackoverflow.com/survey/2019#technology-_-most-loved-dreaded-and-wanted-web-frameworks
- Concernant Vue3 :
- Vue3 intègre la Composition API, qui permet de mieux organiser le code des composants, de diminuer leur taille et de maximiser la réutilisation de code entre composants.
- Le renderer a été complètement réécrit pour obtenir des performances optimales. En utilisant les composants mono-fichier (single file component), le gain de performances est compris entre +55% et +130% sous Chrome.
- Vue3 SSR (server side rendering) est jusqu’à 3 fois plus rapide que celui de Vue2. Il s’agit de la dernière pièce du puzzle sur Vue3, il reste un peu de travail sur ce sujet.
- Le support de TypeScript est seamless dans Vue3 : on peut développer en Javascript ou en TypeScript tout en bénéficiant des types dans la complétion des composants standards de Vue.
- Passer à Vue3 sur un projet utilisant déjà Vue2 ne posera aucun problème : tout ce qui fonctionne sur Vue2 fonctionnera sur Vue3.
Durant sa présentation, Evan a fait une démonstration efficace de la façon dont Vue3 gère les blocs dynamiques et statiques en utilisant le site https://vue-next-template-explorer.netlify.com
Celui-ci permet de comprendre comment Vue interprète le code des templates (gestion des VNode et StaticNode) et permet d’activer ou non différentes options : SSR, hoistStatic, etc…
L’équivalent pour Vue2 est le site : https://template-explorer.vuejs.org
Vue3 est actuellement en version v3.0.0-alpha.7 et sera disponible en beta d’ici mi-mars.
La version finale est prévue en fin de Q1 2020, soit pour le mois d’avril.
Les meilleures conférences
En dehors de l’intervention d’Evan You, voici les conférences qui ont retenue notre attention.
Introduction into the Composition API
Cette conférence a été animée par Gregg Pollack (@greggpollack) qui est enseignant sur VueMastery (vuemastery.com).
Grâce à son support de présentation parfaitement réalisé, il a pu expliquer avec une très bonne pédagogie comment et dans quels cas se servir de la composition API. Cela a permis de préparer le terrain pour Thorsten Lünborg qui a donné, juste après, les premiers best practices sur la composition API.
Team First
Cette conférence a été animée par Tim Benniks (@timbenniks) qui est directeur des développements web chez Valtech (@Valtech).
Son sujet revient sur les différents rôles dans une équipe projet pour expliquer comment se comporter en tant que leader, en tant que développeur et en tant qu’équipe pour réussir les projets entrepris. Et ce pour une équipe qui peut être dans les mêmes bureaux ou dispersée géographiquement.
Vous trouverez dans ses slides, ses conseils et observations qui reposent sur des anecdotes de son expérience personnelle.
Voici le lien vers les slides de sa présentation : Team First
Test-Driven Development with Vue.js
Cette conférence a été animée par Sarah Dayan (@frontstuff_io) qui est Software Engineer chez Algolia (@Algolia).
En s’appuyant sur une démo live, Sarah a utilisé Vue, Vue Test Utils et Jest pour expliquer de façon très mécanique et très efficace, comment travailler en Test Driven Development (TDD) avec Vue.js.
Voici le lien vers les slides de sa présentation : Test-Driven Development with Vue.js by Sarah Dayan
Les très bonnes conférences
Scalable Vue Graphics for the Modern Web
Cette conférence a été animée par Dima Vishnevetsky (@dimshik100) qui est expert Frontend en freelance.
De nos jours, 92% des développeurs utilisent ou ont utilisé le format SVG pour les icônes et les images. Pourtant, SVG est l’une des technologies les plus puissantes du web et permet de faire bien plus que ça.
Lors de sa présentation, Dima a donné plusieurs exemples dont :
- Les micro interactions : https://codepen.io/andreasstorm/pen/aGqNJR (Andreas Stom)
- Les medias queries avec SVG : svgontheweb.com
- Les effets sur les textes par Dirk Weber : https://codepen.io/DirkWeber/pen/eyxbmq
- Le changement dynamique de couleurs sur des produits (vêtements, etc…) par Kyle Wetton : https://tympanus.net/codrops/2019/09/03/how-to-dynamically-change-the-colors-of-product-images-using-css-blend-mode-and-svg/
Le lien entre Vue.js et cette présentation est très faible, mais énonce tous les avantages du format SVG et ouvre le champ des possibles pour obtenir de meilleures performances sur le web.
Composition API Best Practices
Cette conférence a été animée par Thorsten Lünborg (@Linus_Borg) qui est membre de la Vue.js core team.
L’objectif de cette présentation était d’identifier les best practices émergents de la Composition API sur la base de l’utilisation de VueNext (Vue3) et du plugin Composition API pour Vue2 (https://github.com/vuejs/composition-api)
Il a notamment comparé l’utilisation de ref() et reactive().
J’ajouterai ici la vidéo de sa présentation et/ou ses slides dès qu’ils auront été publiés.
An Animated Guide to Vue 3 Reactivity and Internals
Cette conférence a été animée par Sarah Drasner (@sarah_edo) qui est responsable des développeurs chez Netlify et membre de la Vue.js core team.
Cette présentation technique s’attache à expliquer comment rendre une interface réactive pour proposer à l’utilisateur la meilleure expérience possible.
Avec des tacos et des burgers, Sarah passe en revue l’utilisation de Proxy, Reflect, Track, Trigger et Effects. Et détaille également l’intérêt des Set, Map et WeakMap.
Vuex ORM — Relational data management in Vue
Cette conférence a été animée par Kia King (@KiaKing85) qui est tech talent chez Global brains Japon et membre de la Vue.js core team.
Il est l’auteur de Vuex ORM (https://github.com/vuex-orm/vuex-orm) qui est l’équivalent de Redux ORM pour Vuex.
Dans cette présentation, Kia revient sur le pourquoi et le comment il a réalisé Vuex ORM.
Annonces
Vue.js: The Documentary
Le documentaire officiel sur Vue.js sobrement intitulé “Vue.js: The Documentary” a été diffusé en avant-première, en fin de journée.
Il est maintenant disponible sur Youtube :
GuiJS: The app that makes your #devlife easier
Guillaume CHAU (@akryum), membre de la Vue.js core team, a annoncé la disponibilité de son nouveau projet : GuiJS.
Il s’agit d’une interface graphique pour la gestion des projets javascript.
Basée sur Tauri et Rust, cette application gère les dépendances d’un projet javascript (Nuxt.js, Node.js, Vue.js, etc..) et permet d’en exécuter les différentes parties. GuiJS gère très bien les projets mono-repo.
Vous pouvez télécharger l’application dès maintenant depuis le github du projet : Akryum/guijs
Les bons côtés
La maîtresse de cérémonie
L’événement a été animé avec une belle maîtrise par Divya Sasidharan (@shortdiv) qui est developer advocate chez Netlify. Elle a su introduire les speakers, leur poser des questions pertinentes et même meubler lors des problèmes techniques et retards des speakers.
L’organisation globale
L’accueil des participants, les différents points de nourriture et boissons ainsi que le timing ont été très bien gérés, même si, sur ce dernier point, un léger retard a pu être constaté sur la journée du jeudi.
L’ordre des conférences
L’ordre des conférence a été très bien choisi : l’intervention d’Evan You introduisant la Composition API et été suivie par 2 conférences entrant dans le détail sur cette ajout de Vue3.
De même, plusieurs conférences sur Nuxt.js se sont succédées dans un ordre logique et pertinent.
La qualité des conférences
Toutes les présentations n’étaient pas nécessairement en rapport direct avec Vue.js, mais proposaient une très bon niveau d’information.
L’ensemble de l’événement véhicule un sentiment de qualité, de simplicité et de performances qui reflètent la vision du projet Vue.js dans son ensemble.
Les mauvais côtés
La quantité
Dérouler 30 conférences en 2 jours, c’est un maximum car il n’y a qu’une seule salle et on ne peut pas réellement choisir celles que l’on veut voir.
Le prix de la participation
Pour venir à Vue.js Amsterdam, il fallait s’acquitter du prix du billet, d’un montant avoisinant les 900€ (en moyenne), ce qui est cher pour seulement 2 jours. Pour participer aux journées du mercredi et samedi, il fallait ajouter quelques centaines d’euros à ce montant.
La remise des prix avant la fin de l’événement
C’est peut-être un détail, mais la remise des prix des différents concours organisés pendant l’événement a eu lieu avant la fin des conférences du Vendredi après-midi, ce qui a pu empêcher certains participants d’assister à l’ensemble des conférences à cause des trains et avions à prendre.
Conclusion
Vue.js Amsterdam est le plus grand événement annuel européen de la communauté Vue.js.
Il permet de faire le point sur l’état du projet, les nouveautés à venir et surtout de mettre un pied dans cette communauté très inspirante dont la vision commune est de proposer des outils très simples et très performants pour développer des applications web modernes.
Centré sur Vue.js, toutes les conférences ne sont pas pour autant directement liées à cette technologie et concernent le web en général.
En dehors des conférences, les échanges avec les speakers se faisaient simplement au moment des pauses café et déjeuner.
Tous les ingrédients sont réunis pour passer un très bon moment, c’est un événement que je referai sans hésiter l’année prochaine, si j’en ai l’occasion.
Je mettrai à jour cet article dès le 9 mars, date à laquelle les premières vidéos des conférences seront disponibles.
Outils et liens utiles
Durant les conférences, plusieurs outils ont été utilisés ou mentionnés, en voici une liste non exhaustive :
- Storyblok : headless CMS with a Visual Editor
- Shopware : E-commerce builder
- humaaans.com : Mix-&-match illustrations of people with a design library
- zzz.dog : Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
- Fauna.com : Global serverless database
- Jexia.com : Backend for applications
- websitecarbon.com : mesurer l’impact carbon de son site web
- notion.so : write, plan, collaborate, and get organized. Notion is all you need — in one tool
- Tauri : framework agnostic toolchain for building highly secure native apps that have tiny binaries and are very fast
- Netlify : one workflow. From local development to global deployment.
