De retour de Vue.js Amsterdam 2022

Le 2 et 3 Juin 2022 a eu lieu Vue.js Amsterdam, une des plus grandes conférences sur l’univers Vue.js en Europe.

Vue.js Amsterdam en quelques chiffres, c’est plus de 2000 participant·e·s sur 2 jours de conférence, 1 scène sur laquelle présentent aussi bien des membres de la core team de Vue.js que des membres de la communauté.

Grâce à Zenika, nous (Jimmy Kasprzak, Lise Quesnel et Yann Bertrand) avons eu la chance d’assister à cet événement directement sur place, à Amsterdam.

Dans cet article, nous allons faire un focus sur 3 talks qui nous ont marqués et terminerons avec les principales informations qu’il fallait retenir de cet événement. Même si nous n’allons évoquer que 3 talks (un chacun), cela ne veut pas dire que nous n’avons pas aimé les autres, au contraire ! Il n’est simplement pas possible de faire un retour complet sur chaque présentation dans un court article de blog 😀

Après 2 éditions de Vue.js Amsterdam en ligne, c’était évidemment un plaisir de retrouver le chemin de cette conférence en présentiel. Elle a d’ailleurs été décalée de Mars à Juin pour s’assurer des conditions sanitaires. Point positif de ce décalage : il faisait beaucoup moins froid et beaucoup plus beau à Amsterdam à cette période de l’année !

Et en effet, nous n’avons pas été déçus. On y a trouvé une foule de profils et de nationalités différentes, des stands de sponsors comme Passionate People ou Sourcegraph, des stickers, des jeux, etc. Ça a été pendant deux jours un beau lieu d’échanges, de discussions et de rencontres où tout le monde pouvait apprendre quelque chose. 

Ce qui nous amène aux présentations.

Component testing with Vite, Vue and Cypress

Par Jessica Sachs – Staff Software Engineer chez PathAI

Hasard du calendrier, la veille de Vue.js Amsterdam, Cypress – l’outil de test e2e – est sorti en version 10. Avec cette version est introduite de manière officielle la capacité de tester nos composants directement à travers Cypress.

Jessica Sachs, à l’époque Tech Lead chez Cypress, est donc venue nous parler de cette nouveauté de Cypress et son intégration avec Vue.js.

Un des points que nous avons appréciés est qu’elle a pris le temps de détaillé pourquoi il est intéressant d’avoir un outil comme Cypress pour tester nos composants :

Cypress can tests anything that can run in the browser. Vitest and Jest can test using an emulated DOM and are great for headless business logic or composable.

Jessica Sachs

Autrement dit, Cypress semble être l’outil idéal pour réaliser des tests visuels sur nos composants, tests qui sont trop souvent sous-estimés où du moins compliqués à mettre en place de manière sûre. Et tout ça en bénéficiant d’une expérience développeur au top, comme toujours avec Cypress.

Enfin, tout cela a été illustré de manière très concrète avec une démo de Cypress 10 pour tester notamment le composant VColorPicker de Vuetify.

Fast stories Powered by Vite: Histoire

Par Guillaume Chau – membre de la Vue Core Team

Guillaume nous a habitués à des releases en live depuis Amsterdam, il n’a une nouvelle fois pas déçu.

Cette année, il a annoncé le nouveau projet sur lequel il travaille actuellement : une application pour lister et tester ses composants dans un contexte isolé nommé Histoire (en référence aux stories de Storybook).

Basé sur Vite, qu’on pourrait comparer à un Webpack extrêmement rapide, Histoire se positionne comme un nouveau concurrent à Storybook.

Là où l’intégration Vue pour Storybook est assez compliquée, Histoire est directement branché avec Vue. L’application est ainsi nativement capable de détecter les props d’un composant pour leur fournir des entrées correctement typées. Elle permet aussi de se brancher à Pinia (le remplaçant de VueX) et propose une intégration à Tailwind pour lire les Design Tokens d’un projet (devrait à terme être agnostique).

Lors de la démo, l’outil nous a déjà paru assez abouti malgré le fait qu’il ne soit pas encore en version alpha.

From Startup to Unicorn

Par Loïck Le Digabel – Senior Staff Engineer & Front-end chapter lead chez Backmarket

Durant ces 2 jours à Vue.js Amsterdam, il n’y avait pas uniquement des conférences portant sur l’écosystème Vue, contrairement à ce que l’on pourrait s’attendre à voir. Cette conférence-ci en est un bon exemple. Malgré un titre quelque peu racoleur, Loïck Le Digabel raconte les challenges qu’il a pu rencontrer dans ses différentes expériences (leboncoin, dailymotion et backmarket) et en tire des leçons.

Tout d’abord, Loïck cherche à définir les termes dont on parle : Startup et Licorne. Pour lui, une Startup :

• n’a pas beaucoup d’argent
• peut pivoter, c’est-à-dire qu’elle change de marché et/ou de produit
• met une importance capitale au time to market
• son code est “quick & dirty”

Ensuite, la licorne :

• se déploie à l’international
• gère son expansion, notamment en interne, et est capable de se réorganiser
• planifie et agit de manière pragmatique
• gère son code legacy

Pour passer de l’un à l’autre, Loïck va donc donner quelques conseils. Le premier est de définir ses priorités. Cela passe par exemple par faire une étude de marché. Il est important de prendre en considération le contexte notamment. En clair : être à l’écoute de la donnée ou data-driven.

Le deuxième conseil porte sur le fait de garder à l’esprit la “Big Picture”. En effet, le produit est construit de manière itérative. C’est facile de dire oui à un nouveau besoin : on gagne de l’argent, les clients sont contents, etc. Mais si ce nouveau besoin s’écarte de la cible du produit ça peut poser problème. Le produit perdra son sens et sa raison d’être.

Le troisième conseil que Loïck Le Digabel donne est celui d’adapter son organisation à ses besoins. Si le marché évolue à l’international, alors l’organisation interne doit refléter cette évolution par exemple.

Le dernier conseil nous dit que prendre des raccourcis n’est pas forcément une mauvaise chose, le tout est de bien contrôler les impacts de ces raccourcis. Ces raccourcis peuvent permettre à la Startup de répondre à un besoin plus rapidement, avant les concurrents par exemple. Le plus important est de faire cela en bonne intelligence.

Au final, malgré le titre racoleur, cette intervention était très intéressante. La diversité de talks comme celui-ci apporte également une diversité sur le profil des speakers.

Ce qu’il fallait retenir en plus

Très concrètement, la priorité de la core team de Vue reste l’adoption de Vue 3 dans l’écosystème. Pour cela, plusieurs mesures ont été annoncées.

Certaines fonctionnalités de Vue 3 comme l’api composition sont back-portées de Vue 3 à Vue 2.7. Il était déjà possible d’utiliser certaines de ces fonctionnalités en Vue 2.x, mais à partir de Vue 2.7 cela ne nécessite du setup supplémentaire. De plus, Vue 2.7 est la dernière version mineure de Vue 2. Elle sera en LTS jusqu’à fin 2023.

Vue 3.3 est en cours de développement.

VitePress devient la solution recommandée pour de la génération statique en Vue 3.

Enfin la sortie de Nuxt 3 a été annoncée par Sébastien Chopin pour l’été 2022 !

Conclusion

Vous l’aurez compris si vous avez lu cet article jusqu’au bout : pas d’énormes nouveautés annoncées pour l’écosystème Vue.

Est-ce qu’on est quand même content d’être allé à Vue.js Amsterdam ? Totalement ! Même s’il n’y a pas eu de nouveautés majeures, l’écosystème de Vue continue à évoluer petite touche par petite touche et assister à cette conférence est un des meilleurs moyens de se tenir à jour.

De plus, c’était aussi l’occasion de voir des présentations de très bonnes qualités sur autre chose que directement du Vue, comme l’accessibilité ou les tests. Cela nous a également permis de découvrir de nouveaux speakers de la communauté et de revoir des membres de la core team de Vue.

Pour finir, encore un grand merci à Zenika et l’organisation de Vue.js Amsterdam pour cette expérience, et si vous-même avez un jour l’opportunité d’y aller, n’hésitez pas : c’est une conférence inoubliable dans un lieu top (et l’after party est très sympa aussi !).