Sortie de Vue.js 3.0

C’était une sortie attendue depuis quelques temps au sein de l’agence, Vue.js est maintenant passée en version 3.0.

La nouvelle a été annoncée le 10 octobre par Damien Dulitz sur le site https://news.vuejs.org, le code source de la version 3.0 de Vue.js vient d’être publiée sur GitHub. C’est une version pre-alpha, à ne pas utiliser pour le moment sur des projets finaux. (edit : la version finale de Vue.js en version 3 est programmé pour le mois de janvier 2020, autant dire qu’il ne leur reste plus que quelques jours pour être dans les temps.

Parmi les grandes nouveautés de Vue.js 3, nous pouvons noter l’apparition de l’API Composition. L’idée est d’abord née des limitations de Vue.js 2.
La première raison est que quand vous commencer à travailler vos composants, il deviennent de plus en plus gros et de moins en moins maintenables. La deuxième raison est que la réutilisation de composants peut avoir des inconvénients. Enfin, le dernier point est que Vue.js en version 2 supporte mal TypeScript.

Les avantages de la version 3 de Vue.js

Le nouvelle version de Vue.js a été l’occasion de revoir totalement le code. Voici les avantages de cette version 3.

L’optimisation des performances

L’un des premiers avantage de le nouvelle version de Vue.js est très certainement la performance. On le sait, la performance web est aujourd’hui très importante, elle a un impact direct sur :

• le taux de conversion. Shopify a notamment publié récemment une étude qui montrait qu’un site e-commerce lent perd en moyenne 10% de chiffre d’affaire. Google communique de son coté qu’un site qui met plus de 3 secondes à s’afficher perd automatiquement 53% de son trafic…
• le référencement. Google ne le cache plus, plus un site s’affiche rapidement, plus il a de chance de mieux ressortir dans les résultats de recherche…

Bref, les améliorations de performance avec Vue3.js sont considérables. Le code a notamment été revu pour ne pas forcément intégrer tous les modules de Vue.js mais seulement ceux nécessaires à la bonne exécution du framework. Au final, les différents tests montrent que la nouvelle version est dans la majorité des cas plus de 2 fois plus rapide.

Vue.js 3 est près de 2x fois plus rapide lors des tests.

Enfin, la version 3.0 ne pèse plus que 10ko, soit 2 fois moins que la version 2.6.

Des composants vue.js plus lisibles.

Sans forcément rentrer dans les détails, l’API composition permet une lecture beaucoup plus simple des composants, avec la méthode setup(). Pas de problème de retro compatibilité. Tout les composants que vous avez pu créer dans une version antérieure à la 3.0 contrinueront à être compatibles. A l’agence, cela nous a un peu rassuré…

L’intérêt de cette nouvelle composition est une meilleure organisation des composants par fonctionnalité.

Une réutilisation plus faciles des composants Vue.js

Allez, ici, sans rentrer dans le détails, les méthodes existantes avec Vue.js 2 pour réutiliser des composants n’étaient pas forcément optimisées et quelque soit la méthode choisie, il y avait toujours des contraintes. Tout est maintenant facilité par la fonction de composition. Cette nouvelle solution permet de faire la même chose qu’avant mais avec moins de code, une écriture plus naturelle du JavaScript, est donne un résultat beaucoup plus flexible.

Un défaut pour Vue.js 3 ?

Vue.js en version 3 présente t’elle des défauts ? Si l’on peut y voir une seule source d’inquiétude, c’est que Vue.js 3 offre la possibilité de définir ses composants de deux manières différentes, rétro-compatibilité oblige, ce qui n’est pas vraiment recommandable.

L’autre défaut est que la dernière version de Vue.js 3 n’est pas compatible avec ie 11 sans l’utilisation d’un polyfill. Mais cela fait maintenant plusieurs mois que Microsoft a fait la demande explicite à leur utilisateurs de ie 11 de migrer vers une version plus récente.

Pour conclure, sachez qu’en tant qu’agence experte Vue.js, nous avons hâte d’utiliser toutes ces nouvelles fonctionnalités sur nos prochains projets

Retrouvez plus de détails sur les nouveautés de Vue.js 3 en vidéo à cette adresse : https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/