Niji utilise des cookies techniques pour le bon fonctionnement du site et des cookies de mesure d’audience pour analyser le trafic. Des cookies sont également déposés par des tiers pour vous permettre de partager des contenus sur les réseaux sociaux. Si les cookies techniques ne nécessitent pas votre consentement, vous pouvez choisir d’accepter, de personnaliser ou de refuser les autres cookies. Votre choix est conservé pendant un an, il est modifiable à tout moment via le lien « Gérer vos cookies ». L’absence de choix sera considérée comme un refus.

Pour en savoir plus sur ces cookies, consultez notre politique de gestion des données via le lien « Vos données ».

30 septembre 2020

Vue.js : Les nouveautés de Vue 3

Vue.js : Les nouveautés de Vue 3

Ce contenu propose une synthèse cadrée et rédigée par Arnaud Leray, Architecte Solution chez Niji.

 

Après 2 ans de développement et plus de 2600 commits, la nouvelle version de Vue.js est arrivée !

Baptisée "One Piece", Vue 3 promet de meilleures performances, un bundle plus petit, une meilleure intégration de TypeScript, et de nouvelles APIs pour faciliter la gestion de gros projets.

 

Découpage modulaire

Bien que Vue 3 soit toujours utilisable en CDN via une simple balise script (sans builder l'application), cette nouvelle version a été entièrement réécrite selon une architecture modulaire, afin d'embarquer uniquement les modules importés dans le code de nos applications. Ainsi, au lieu d'embarquer le framework Vue.js complet, on peut réduire la taille du runtime de moitié via le tree-shaking (soit une dizaine de ko !)

 

Amélioration des performances

D'après l'équipe de développement, les gains de performances sont conséquents par rapport à Vue 2 :

  • Taille du bundle jusqu'à 41% plus petite grâce au tree-shaking
  • Rendu initial jusqu'à 55% plus rapide
  • Mises à jour jusqu'à 133% plus rapides
  • Réduction de la mémoire utilisée jusqu'à 54%

 

Composition API : une meilleure organisation du code

Vue 3 introduit la Composition API, qui est un ensemble d'APIs facilitant la gestion d'applications à grande échelle. De manière similaire aux Hooks de React, la Composition API permet une composition et une réutilisation de la logique métier avec une structure de code plus flexible.

En effet, en Vue 2, une même feature était éparpillée dans plusieurs sections (appelées "options") au sein d'un composant, comme par exemple "data" pour les variables de binding, "computed" pour les variables calculées automatiquement, "created" ou "mounted" pour l'initialisation du composant, etc. Ainsi, si un composant implémentait plusieurs features, elles se retrouvaient entremêlées au travers de ces sections, ce qui nuisait à la lecture du code (cf. colonne "Options API" à gauche dans l'image ci-dessous, où chaque couleur représente une feature différente) :

 

En Vue 3, une nouvelle fonction "setup" permet d'associer nous-même chaque fragment de code à des hooks, afin de pouvoir regrouper tout le code concernant une feature, rendant ainsi le composant plus lisible et plus maintenable (cf. colonne "Composition API" dans l'image précédente). Il est ainsi possible de créer des composants plus complexes permettant une meilleure scalabilité du code en fonction de la taille des projets.

Exemple de code :

En Vue 2, le code d'une application était structuré ainsi :

En Vue 3, on peut regrouper le code de chaque feature :

Pour en savoir plus sur la Composition API : https://v3.vuejs.org/guide/composition-api-introduction.html

A noter que la Composition API peut être utilisée en Vue 2 via le plugin @vue/composition-api.

 

Meilleure intégration de TypeScript

Vue 3 a été entièrement réécrit en TypeScript, permettant ainsi d'intégrer pleinement ce langage dans notre code et de profiter ainsi des contrôles de typage dès le build ainsi que d'une meilleure complétion de code, et donc une meilleure maintenabilité.

L'intégration de TypeScript permet même l'utilisation du TSX.

 

De nouvelles fonctionnalités expérimentales

Setup script

Un des reproches faits à la Composition API est de devoir répéter les bindings que l'on veut exposer (dans le return du setup) :

Vue 3 propose une syntaxe simplifiée via la balise <script setup> :

Cette feature est encore expérimentale mais est déjà embarquée dans Vue 3.0 afin de récolter des feedbacks. Pour en savoir plus, vous pouvez consulter la RFC : https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md

 

Binding de variables CSS

Les variables CSS sont un puissant outil permettant par exemple de faciliter la création de thèmes graphiques. Cependant, il n'est pas pratique de binder une de ces variables CSS avec une variables JS.

Vue 3 propose la syntaxe <style vars> :

La modification de la data "color" entrainera ainsi la modification de la variable CSS correspondante.

Cette feature est également expérimentale. Pour en savoir plus : https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md

 

Teleport

Comme son nom l'indique, Teleport est un composant permettant de téléporter son contenu n'importe où dans le DOM. Cela peut par exemple faciliter la gestion de modales, en téléportant leur contenu dans le <body> depuis un composant interne quelconque :

Il est possible de définir la destination de la téléportation de plusieurs manières :

Pour en savoir plus : https://v3.vuejs.org/guide/teleport.html

 

Fragment

Les fragments sont des wrappers virtuels qui ne sont pas réellement intégrés au DOM. Ils permettent notamment de définir des templates avec plusieurs éléments enfants :

 

Suspense

Le composant Suspense permet d'afficher un composant de chargement (ex : un texte "Loading...") pendant le chargement asynchrone d'un autre composant (ex : chargement des données du profil d'un utilisateur)

 

Migration et support d'IE11

Afin de ne pas retarder la sortie de la v3 de Vue.js, le build d'une version de migration (build v3 compatible v2 avec warnings facilitant la migration) n'est pas encore disponible, de même que le support IE11. Ils devraient l'être d'ici la fin de l'année (Q4 2020).

 

Next steps

A court terme, la team Vue.js va se concentrer sur :

  • Le build de migration
  • Le support d'IE11
  • L'intégration du Router et de VueX dans le nouveau devtools
  • D'autres améliorations au niveau de l'inférence de types dans les templates via Vetur (le plugin Vue.js pour Visual Studio Code)

 

Conclusion

Comme nous avons pu le constater, Vue 3 apporte bon nombre de nouveautés : amélioration significative des performances, meilleur support de TypeScript, nouveaux composants innovants (Teleport, Fragment, Suspense...), binding de variables CSS...

Mais la nouveauté la plus marquante est sans doute la Composition API : elle permet une meilleure modularité du code, offrant de nouvelles perspectives pour des projets complexes tout en améliorant la maintenabilité des applications.

Fort de sa popularité toujours grandissante, Vue.js a maintenant toutes les cartes en main pour rivaliser avec React et Angular sur des projets de toute taille !

 

Contact Relations Presse
Frédéric PAYEN
Directeur Marketing et Communication
presse@niji.fr