#3 - Vue.js en 2023, l'avenir de Vue Router, les patterns avec Pinia : retour de la Vue.js Amsterdam 2023

Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.

Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !

Cet article est le troisième des quatre, vous pourrez retrouver chaque partie de cette série ici :

• Partie 1
• Partie 2
• Partie 3
• Partie 4

Dans cet article on va parler de Vue en 2023, de patterns Pinia, du futur de vue-router, de l’écosystème Vue et de TypeScript avec Vue.

Beaucoup de sujets à traiter, alors, c’est parti !

State of the Vuenion 2023 - Evan You (Replay)

Le deuxième jour de la Vue.js Amsterdam débute avec la roadmap de Vue pour 2023, présentée par Evan You, son créateur.

Rétrospective de l'année 2022

Amélioration des IDE & TypeScript :

• Volar 1.0
• vue-tsc

L'écosystème Vue 3 qui mûrit :

• Nuxt
• Vuetify
• Quasar
• VueUse
• NaiveUI
• PrimeVue

En 2023, stabilité & performance !

La stabilité est toujours la clé !

Des releases plus petites, mais plus fréquentes.

Améliorations du coeur de Vue :

• CI d'écosystème pour lever plus de régressions avant les releases.
• tests plus rapides :

En passant de Jest à Vitest, le temps de tests unitaires dans la CI est passé de 1min et 38s à 32s !

• build plus rapide :

En comptant l'étape de build, de vérification de type et de déclaration de type avec Rollup, on passe de 222,8s à 18,8s !

Roadmap 2023

Q1 : améliorer la qualité et correction de bugs

• Adieu Reactivity Transform : ça sera séparé dans un autre package / plugin.
• La décomposition des props avec réactivité arrivera très probablement :

Q2 : améliorer le SSR (Server Side Rendering)

• Finaliser Suspense
• Lazy Hydration
• v-ssr-only
• Amélioration des avertissements liés à l'hydratation.

Q3~Q4 : Vapor Mode

• un mode de compilation optionnel, axé sur les performances pour les SFCs (Single File Components).
• sous-ensemble d'APIs complètement compatibles.
• embarqué dans toutes les applications Vue 3.
• le but est d'avoir une utilisation mixte libre.

Vue 2 : réactivité + pure VDOM

Vue 3 : compiler-informed VDOM

Vapor Mode

Comment ça fonctionne ?

Quelles performances ?

Comment l'utiliser ?

• Au niveau du composant, on ajoute l'extension .vapor au nom de son fichier, par exemple : Counter.vapor.vue.

• Au niveau de l'application :

  import { createApp } from 'vue/vapor';
  import App from './App.vapor.vue';
  createApp(App).mount('#app');

Vite a mûri et son adoption a explosé en 2022

Volar.js

• Le cœur de Volar a été extrait pour être framework agnostique.
• Volar pour Vue devient donc vuejs/language-tools.
• Johnson Chu travaillera sur ce projet à temps plein ! 🚀

VitePress 1.0 arrive bientôt 👀

Traduction de la documentation de Vue 3

• Finie en chinois et japonais.
• En cours (plus de 50% fait) pour le français et l'ukrainien.

N'hésitez pas à contribuer !

Une certification en partenariat avec Vue School

Vue 2 : fin de vie le 31 Décembre 2023 !

Plus de conférences en 2023

• Vue.js Live : le 12 et 15 Mai à Londres.
• VueConf US : du 24 au 26 Mai à la Nouvelle-Orléans.
• VueFes : au Japon (pas plus d'informations pour le moment).

Patterns Pinia éprouvés - Adam Jahr (Replay)

Pinia par rapport à Vuex c'est :

• plus léger
• plus modulaire
• moins normatif
• et donc plus libre

Plus de liberté implique des responsabilités. Plus de responsabilités impliquent de la créativité. Plus de créativité, c'est aussi plus de façons d'exceller !

Est-ce qu'on ne pourrait pas juste utiliser la Composition API ? Pourquoi utiliser Pinia et quand ?

• Mettre en place des patterns pour collaborer plus facilement.
• Définir clairement les actions permettant de modifier l'état.
• Sécurité SSR.
• DevTools pour debug.
• Support de TypeScript.
• Développeur Expérience (DX).

Les différentes façons de composer ses stores

Dans son exemple, Adam code une application permettant de rechercher un restaurant selon sa localisation et selon le type souhaité (italien, japonais, indien, etc.).

• Options : semblable à Vuex.
• Setup :

On peut aussi utiliser les watchers à l'intérieur d'un store :

Modulaire par design

Dans Vuex, on avait 1 seul store et plusieurs sous-modules.

Dans Pinia, on a autant de stores que l'on souhaite, ce qui permet :

• d'aider les bundlers avec le fractionnement du code.
• d'aider à la déduction de type.
• améliorer la collaboration des équipes.
• d'ajouter de la clarté pour debug.

L'organisation du store

Dans l'exemple d'Adam, on fait une recherche d'un restaurant selon une localisation et un type (italien, japonais, indien, etc.), mais le store restaurant dépend du store geolocation. On a donc besoin des stores imbriqués :

En résumé :

Comment accéder à l'état ?

Comment mettre à jour l'état ?

• Dans Vuex :

• Dans Pinia :

• On peut faire les mutations avec des actions.
• En mutant l'état directement.
• Ou en mutant avec $patch :

=> $patch peut prendre un objet ou une fonction en paramètre (et cette fonction reçoit l'état en paramètre).

=> Il existe aussi $reset qui permet de remettre son store aux valeurs initiales. Attention, ça ne fonctionne pas avec les stores "Options".

=> Il existe aussi $onAction qui est une hook permettant d'ajouter de la logique quand une action se produit sur le store.

Routing et nouvelles fonctionnalités - Eduardo San Marin Morote (Replay)

Vue Router, le but

• garder les choses en ordre.
• réduire la répétition.
• améliorer l'expérience développeur (DX).

Des APIs bizarres et en constante évolution

Est-ce qu'on peut simplifier ça ?

Oui, on fait globalement toujours les mêmes tâches :

• on crée une route => on crée le fichier associé.
• on configure les routes.

La solution : le routage par fichiers !

Mais ça peut compromettre la flexibilité.

Le but est donc de réduire la répétition de code sans compromettre la flexibilité !

L'ambition :

• enregistrement des routes
• imports
• routes typées

• data fetching
• typer les meta des routes

Il y a un problème avec tout ça ... Le typage au runtime peut être particulièrement lent ! En plus d'être complexe et difficile à maintenir...

unplugin-vue-router répond à toutes ces problématiques !

⚠️ Attention c'est encore à l'état expérimental ! ⚠️

Il permet d'avoir notamment des erreurs de typage à la navigation.

Pour le chargement des données, il y a plusieurs méthodes :

• avec Suspense :

• avec les Data Loaders :

=> ils ne sont pas limités au système de routing par fichier.

=> ça permet de faire du cache côté client.

=> ça fonctionne avec toute fonction asynchrone.

=> supporte Vue Apollo et VueFire.

=> c'est encore expérimental !

En résumé : pourquoi utiliser le routage par fichiers ?

Retrouvez les slides ici : https://posva-slides-stop-writing-your-routes.netlify.app

Plongée technique dans Histoire - Guillaume Chau (Replay)

Histoire est un outil qui permet de générer des scénarios dans lesquels vous présentez dans votre navigateur un ou plusieurs composants pour des cas d'utilisation spécifiques.

Les histoires sont utiles pour :

• organiser et documenter les composants pour les autres développeurs.
• présenter différents cas d'utilisation couverts par vos composants.
• développer des composants de manière isolée.
• tester les régressions visuelles en prenant des captures d'écran.

Les histoires sont généralement utilisées lors de la construction du design system d'une entreprise ou d'une bibliothèque de composants.

Les fonctionnalités

Comment Vite fait tourner Histoire ?

• réutilisation de la même pipeline de build.
• moins de temps et d'effort de mise en place.
• démarrage rapide et HMR (Hot Module Reloading) instantané.

Après une démonstration, Guillaume nous montre un exemple concret de comment faire communiquer le serveur de dev Vite avec le navigateur et comment faire un plugin Vite.

Vous pouvez retrouver sa démonstration pour en savoir plus.

Ce que vous allez adorer avec Vue en 2023 - Alex Kyriakidis (Replay)

Fondateur de Vue School, Alex nous fait l'état des lieux de Vue.js et son écosystème.

Des chiffres

• 1,5 millions de développeurs éduqués (22% de plus en comparaison à 2021).
• 4 millions de sites utilisent Vue.

L'écosystème

Mature & Stable

• Migration complétée !
• Vue 3 par défaut !
• Nuxt et Vuetify supportent Vue 3 !

Des librairies pour tous les besoins

• Quasar : le framework Vue.js multiplateformes fait pour les entreprises. (Alternative à Nuxt.js, Vuetify, Ionic)
• FormKit : construire des formulaires Vue 3 dix fois plus vite.
• VueUse : collection d'utilitaires Vue : onClickOutside, useDraggable, useRefHistory, etc.
• NaiveUI : assez complet, thème personnalisable, utilise TypeScript, rapide, très intéressant.
• Vue Macros : explorer et étendre des macros et ajouter du sucre syntaxique à Vue.
• Storefront UI : design system et librairie UI pour du e-commerce.

Mentions spéciales :

L'éducation

• facile à apprendre
• un excellent contenu disponible
• documentation officielle bien écrite

2 plateformes d'apprentissage :

• Vue School : 47 cours / 900 leçons / tutoriels / ateliers
• Vue Mastery

La communauté

• des conférences en présentiel
• des conférences en ligne : Vue.js Nation / Vue.js Forge / Nuxt Nation

Les news

• le blog Vue.js
• newsletters
• Twitter

Le marché du travail

• vuejobs.com
• dashboard Vue School

Nouveau projet : la certification

• Programme officiel de certification Vue.js.

Quel but ?

• rassurer les développeurs
• offrir une garantie pour les employeurs

Quel contenu ?

• examen en ligne avec de la théorie et les meilleures pratiques.

Si on utilise déjà Vue dans notre travail, on est déjà probablement prêt pour passer la certification !

TypeScript dans Vue - Daniel Kelly (Replay)

Pourquoi utiliser TypeScript ?

1. Vue 3 est écrit en TypeScript.
2. Prévenir les erreurs lors du développement.
3. Rendre les refactor moins risqués et moins stressants.

Utiliser : npm run typecheck !

4. Donner des super-pouvoirs à l'autocomplétion.

Comment utiliser TypeScript dans Vue ?

1. Le bootstraping d'un projet TypeScript + Vue est facile.
2. TypeScript avec la Composition API.

Daniel nous fait une démonstration de ces deux points que je vous invite à visionner.

Merci d’avoir lu ce résumé de la première partie du deuxième jour de la Vue.js Amsterdam 2023.

Vous trouverez la suite juste ici : Partie 4.