Retour sur le VueJS Amsterdam 2024

Nous étions en cette fin février 2024 à une des plus grands événements dédiés au développement frontend et à l'écosystème Vue Vite Nuxt et UnJS, retour sur nos conférences préférées...

State of Vue and Vite - Evan You

Evan you a ouvert la 7ème édition du Vue.js Amsterdam en faisant un état des lieux du framework.

Il a tout d'abord retracé l'histoire du framework depuis sa sortie officielle il y a 10 ans en février 2014, puis de la version 2.0 en 2016 et enfin de la version 3.0 en 2020.

Il nous a parlé de son aventure en tant que maintainer open-source et des défis que cela représente. Il est passé par plusieurs phases durant les premiers moments du framework, d'abord l'excitation des débuts lorsque l'adoption a été au rendez-vous. Puis le doute lorsque les bugs commencent à être remontés par la communauté, pour enfin se stabiliser sur le long terme.

En parlant de communauté, Evan a remercié toutes les personnes qui ont contribué au projet, il dit être vraiment motivé par la communauté.

Il a rappelé que Vue est le seul framework front-end vraiment indépendant, n'étant rattaché à aucune entreprise, et que ça laisse à la core team toute latitude pour répondre aux besoins des utilisateurs.

Enfin il nous a livré les perspectives pour l'année 2024 qui sont de continuer à améliorer les performances du framework, notamment grâce au nouveau Vapor mode toujours en développement.

Un autre point intéressant de la conférence : Evan revient sur les burnouts qu'il a connu au fil de ces 10 années à travailler sur Vue et son écosystème.

Il y en a plusieurs, et il semble difficile de faire autrement : l'open source à haute dose nécessite des périodes d'investissement maximal, avec une attention très importantes aux retours de la communautés, et ces périodes là aboutissent généralement à l'épuisement, le burnout, la remise en question, et une réorganisation pour continuer à travailler sur le projet de façon plus durable.

Ci-dessous un graphe des contributions d'Evan où l'on voit clairement une période Away From Keyboard, pour différentes raisons qui illustrent la vie d'un contributeur open source à temps plein.

Au final, ce feedback est touchant et montre aux nouveaux arrivants dans l'aventure de l'open source qu'ils peuvent prévoir des moments difficiles à gérer, mais néanmoins prévisibles.

FormKit - Justin Schroeder

Justin est le fondateur de FormKit une librairie Vuejs pour la gestion des formulaires et avant ça de VueFormulate (pour vue2.x).

Son constat de départ est direct : gérer les formulaires, c'est tout sauf simple.

En allant un peu plus loin dans l'explication, il nous montre que le principal problème des formulaires est qu'ils sont représentés sous la forme d'une arborescence (formulaire, puis groupes, puis champs etc...) mais que plusieurs types de contenus peuvent être mêlés dans cette arborescence.

En fonction de l'usage (affichage, interaction, récupération de la donnée), l'arbre peut prendre une partie de l'arborescence globale et c'est cela qui rend l'usage des formulaires si complexe.

FormKit vise à régler ces difficultés intégrant plusieurs features essentielles : une UX et une DX au top, la validation des données, la gestion des erreurs backend, la communication entre les inputs, les schémas pour définir les formulaires à partir d'un json, les expressions etc.

Pour en savoir plus, le site de formkit

Les slides : le lien bientôt ici !

Efficient server state management

Elise Patrikainen est venue nous parler de la gestion du state dans une application, elle a pris l'exemple d'un e-commerce pour illustrer son propos.

Le state d'une application est composé de deux parties :

• la donnée qui vient du serveur, une liste de produits par exemple
• la donnée de l'application client, comme le panier de l'utilisateur

La donnée serveur est par nature asynchrone et partagée, car elle peut être mise à jour sans action de l'utilisateur (par un administrateur qui mettrait à jour le prix du produit par exemple) et elle est disponible pour n'importe quelle application client qui la demande.

La donnée de l'application en revanche est synchrone et privée, lorsqu'un utilisateur ajoute un produit au panier, le serveur en est notifié immédiatement. Le panier n'est pas non plus partagé à d'autres clients.

Dans le contexte d'une application Vue.js, il est possible de stocker la donnée serveur à deux endroits :

• dans le composant, par exemple dans le cas d'un composant qui irait chercher la liste des produits pour les rendre sous forme de liste
• dans un store, si l'on veut réutiliser la donnée à plusieurs endroits

Chaque solution offre un avantage et un inconvénient : dans le composant, la donnée est fraîche mais il n'y a pas de mise en cache possible, une fois que le composant est retiré du DOM, la donnée est perdue.

Dans un store la donnée est conservée, mais sa fraîcheur n'est pas garantie.

Elise nous a donc présenté un outil pour répondre à ces deux problématiques : Tanstack Query

L'outil nous permet via des queries et des mutations d'ajouter du cache à nos requêtes ou de pouvoir la rafraîchir en arrière-plan si celle-ci est périmée.

Il est également possible d'utiliser une partie de la donnée déjà récupérée pour commencer à hydrater une nouvelle page, par exemple réutiliser le titre du produit de la liste dans le détail de ce produit.

Rendering Revealed

Au moyen d'un voyage animé, Adam Jahr nous a parlé de l'histoire des modes de rendu pour le web.

Il a ainsi listé les différents modes de rendu en commençant par le rendu statique, ce mode de rendu ne comporte qu'une seule page HTML sans aucun contenu dynamique.

Vient ensuite le rendu côté serveur avec plusieurs pages. C'est le rendu le plus répandu, qui offre de bons résulats SEO, permet d'être étendu facilement par l'ajout de nouvelles pages, mais souffre d'une expérience utilisateur minimale à cause du rechargement systématique entre chaque navigation.

Pour améliorer l'expérience utilisateur, les frameworks front-end comme Vue.js ont commencé à emmerger et avec eux les single-page app (SPA). Mais bien que ce type d'application offre une ux très plaisante, ils ne sont pas adaptés à une application qui a un besoin en SEO car le serveur n'envoie au client qu'une page HTML vide, avec le Javascript nécessaire pour la construire.

Puis sont arrivés les méta-frameworks comme Nuxt, basé sur Vue.js. Nuxt fonctionne avec un mode de rendu universel, lors de la première requête au serveur, celui-ci retourne une page HTML complète ainsi que le Javascript nécessaire pour rendre la page interactive. Ensuite, l'application est rendue en mode SPA pour maximiser l'expérience utilisateur.

Nuxt propose également un mode SSG où toutes les pages sont compilées en amont du déploiement. Ce mode de rendu est le plus performant qui soit car le serveur n'a aucun calcul à faire, mais il ne permet pas d'avoir du contenu dynamique, comme le nom de l'utilisateur par exemple. Il convient par contre parfaitement à un blog.

Enfin, Nuxt propose un mode de rendu hybride, basé sur l'url qui permet de rendre des pages selon des modes de rendu différents. On peut donc imaginer une page d'accueil dynamique, rendue en mode serveur, et une page à propos, moins sujette aux changements, rendue en mode statique.

Adam a conclu en nous présentant une aide visuelle pour faire notre choix en fonction des besoins de l'application.

A Vue into Rock & Roll Part 2

Le deuxième jour de conférences à commencé de façon... originale !

En effet, Tim Benniks est venu nous présenter une application, faite en Vue.js bien entendu, qui a permis au public de voter en direct pour des chansons que Tim jouera plus tard à la guitare électrique.

Seulement voilà, sur scène il n'y a pas d'amplificateur ! Tout passe par l'application qui modifie le son en entrée grâce à des preset configurés par chanson.

L'application utilise Supabase pour le back-end, qui grâce à sa fonctionnalité Realtime permet à l'interface de se mettre à jour à chaque vote du public. Mais le plus gros du travail pour Tim a été de retravailler les chansons pour éviter les problèmes de copyright et permettre à sa guitare de ressortir sur les morceaux. Il a pour ça utilisé l'intelligence artificielle.

Comme il nous l'avait promis, après son talk nous étions bien réveillés !

The Magic of Mobile with Vue and Vite

Jessica Sachs est venue nous parler des applications mobiles hybrides et des différentes technologies à notre disposition pour les développer.

Avant tout, il convient de se poser la question de savoir si l'on a réellement besoin d'une application hybride, si l'on fait un jeu ou une application connectée à un objet c'est pertinent. Mais si c'est un e-commerce ou un CRM ça l'est peut être moins.

Elle nous a ensuite présentées les différentes solutions à notre disposition pour faire de l'application hybride à partir du Javascript. Il y a Tauri, Capacitor et enfin NativeScript.

NativeScript ne fonctionne qu'avec Webpack et ne permet pas facilement de faire, et du mobile, et du web. Tauri fonctionne bien et permet depuis peu de faire du mobile en version beta, mais il faut avoir quelques connaissance en Rust pour l'utiliser.

Capacitor est donc la façon la plus aisée de créer des applications hybride avec Vue.js et Vite, tout en gardant une expérience de développement de qualité.

Pour terminer, Jessica nous a livré un récapitulatif de ce mois (très chargé) de février concernant les applications mobiles. Y figure notamment la nouvelle sur les PWA qui seront désormais considérées comme de simples application web sur iOS à partir de la version 17.4.

Anthony's Road to Open Source: The Progressive Path

Anthony Fu a commencé son talk en nous parlant de son travail à plein temps dans l'open-source, et en nous livrant qu'il se pose toujours la question lorsqu'il démarre un nouveau projet : "Est-ce que ce projet sera utile à quelqu'un d'autre que moi ?"

Il enchaîne en nous disant qu'il faut jamais perdre de vue le "coût" de l'outil :

• le coût de découverte, l'outil est-il facile à trouver ?
• le coût d'apprentissage, l'outil est-il bien documenté ? Suffisament simple pour être pris en main rapidement ?
• le coût pécunier, l'outil est-il payant ?
• le coût d'utilisation, l'outil peut-il s'intégrer facilement dans un système existant ? Peut-on l'étendre si besoin ?

Il nous a ensuite partagé sa vision sur le développement d'outils "progressif" en prenant en exemple Nuxt, qui a été conçu comme un framework progressif.

En effet, avec Nuxt on peut commencer petit, et ajouter des fonctionnalités au fur et à mesure.\ Besoin de composants ? De pages ? Il suffit d'ajouter les dossiers correspondant et tout fonctionnera automatiquement.\ Besoin de plus qu'une SPA ? Il suffit d'ajouter un dossier server, une route et hop ! L'application est devenue full-stack.\ Et c'est la même chose pour Typescript, les devtools, et les nombreux modules compatibles avec le framework.\ Même le déploiement a été pris en compte grâce aux preset de Nitro, le serveur utilisé par Nuxt.

Pour terminer, Anthony a évoqué comment lui et le reste de la team Vite appliquent cette philosophie pour le développement de l'outil, notamment sur les nouvelles fonctionnalités majeures en assurant une rétro-compatibilité et la possibilité d'utiliser des fonctionnalités expérimentale.

How to turn Open Source project into a large-scale business - Vue Storefront case study

En préambule, Filip Rakowski nous rappelle que le nombre de e-commerce est passé de 9.2 à 26.5 millions entre 2019 et 2023.

Il nous a ensuite détaillé son parcours qu'il a tout d'abord commencé sur Wordpress avec WooCommerce en 2013.\ Il a ensuite successivement travaillé avec Magento, puis est passé sur la partie front-end avec Angular.

Peu de temps après, Filip a découvert Vue.js et a été séduit par sa simplicité, Vue Storefront était néé.\ Aujourd'hui la solution est agnostique de tout framework front-end, et se compose d'un sdk supportant plusieurs intégrations avec des solutions e-commerce, et d'une librairie de composants actuellement disponible sur Vue.js et React.

Il a ensuite partagé avec nous les raisons pour lesquelles, selon lui, un e-commerce headless pouvait échouer :

• le SEO est crucial pour un e-commerce, l'utilisation d'une spa est donc absolument prohibé
• selon lui, utiliser une librairie de composants d'interfaces peut être utile, car au final tous les e-commerce ont plus ou moins la même structure
• il ne faut pas sur-ingéniérer un projet simple

Il a terminé en nous donnant quelques conseils sur la gestion du cache pour améliorer au maximum les performances et l'expérience utilisateur :

• mettre en cache tous les éléments statiques
• pour les éléments dynamiques comme le nombre de produits dans le panier, il est d'usage d'utiliser des contenus de substitution le temps que le navigateur récupère la donnée
• enfin dans une application Nuxt, il est préférable d'utiliser useFetch() avec en option server: false lors du chargement de données spécifiques à l'utilisateur, pour ne pas récupérer deux fois la donnée et ainsi améliorer les performances

Extraits marquants

« Le monde est bâti sur l'open source, même une machine à laver utilise de l'open source aujourd'hui »

Niklas Dzoch

« Cela a toujours été mon rêve de faire de l'open source, et grâce à ça, de rencontrer des gens du monde entier »

Anthony Fu

« Si votre projet [open source] marche, alors les vrais problèmes vont apparaître quand les gens vont l'utiliser »

Evan You

« Qu'est-ce qu'un bon composant d'interface [UI component] ? C'est un composant qui peut être adapté visuellement, et dans son fonctionnement »

Cagatay Civici

« C'est difficile de faire simple, simple is hard »

Pooya Parsa

« Le périmètre ou la date de livraison, il faut choisir »

Daniel Roe

« Un bon test plante pour un problème généré par votre composant, et passe pour tout problème généré en dehors du composant »

Natalia Tepluhina

« Les formulaires sont tout sauf faciles, ils représentent une part considérable du temps d'un développeur »

Justin Shroeder