La version 3 de Vue.js, le framework JavaScript progressif, est disponible avec de nouvelles API

Et des améliorations de performance

Le 19 septembre 2020 à 14:17, par Bill Fassinou

238PARTAGES

Vue.js est un framework JavaScript progressif open source conçu pour la construction d'interfaces utilisateurs. La bibliothèque centrale de Vue.js se concentre uniquement sur la couche vue et est facile à prendre en main et à intégrer à d'autres bibliothèques ou projets existants. En outre, Vue est également capable de gérer des applications sophistiquées de page unique quand vous le combinez avec des outils modernes et des bibliothèques de support. Vue.js 3.0 est sortie cette semaine avec plusieurs améliorations et embarque également de nouvelles fonctionnalités.

Vue.js 3.0 porte le nom de code “One Piece” et l’équipe de développement du framework a annoncé qu’elle représente plus de deux ans d'efforts de développement. Cela comprend notamment plus de 30 RFC, plus de 2600 commits, 628 demandes d’extraction de 99 contributeurs, et une quantité considérable de travail de développement et de documentation en dehors du cœur du système. Cette nouvelle version majeure du framework offre des bundles plus petits, de nouvelles API pour traiter les cas d'utilisation à grande échelle, etc. Voici ci-dessous les points marquants de Vue.js 3.0.

Approfondissement du concept de “framework progressif”

Selon l’équipe, dès ses humbles débuts, Vue avait une mission simple : être un framework accessible que chacun peut apprendre rapidement. Au fur et à mesure que sa base d’utilisateurs s’est agrandie, Vue s'est également développé pour s'adapter aux demandes croissantes. Il a donc évolué pour devenir ce que l’équipe appelle un “framework progressif” : un framework qui peut être appris et adopté progressivement, tout en offrant un soutien continu à l'utilisateur qui traite des scénarios de plus en plus exigeants. Il compterait aujourd’hui plus de 1,3 million d’utilisateurs dans le monde.

L’équipe de Vue.js a annoncé qu’il voit le framework utilisé dans une large gamme de scénarios, qui vont de l'interactivité saupoudrée sur des pages traditionnelles rendues par le serveur, aux applications complètes sur une seule page avec des centaines de composants. Et à présent, Vue.js 3.0 va encore plus loin dans cette flexibilité.

Modules internes superposés

Vue.js 3.0 core peut toujours être utilisé via une simple balise <script>, par contre ses composants internes ont été réécrits de fond en comble en une collection de modules découplés. D’après l’équipe, la nouvelle architecture offre une plus grande maintenabilité et permet aux utilisateurs finaux de réduire de moitié la taille du runtime grâce à l'arborescence. Ces modules exposent aussi des API de niveau inférieur qui débloquent de nombreux cas d'utilisation avancés, dont :

le compilateur supporte les transformations AST personnalisées pour les personnalisations du temps de construction (par exemple le temps de construction i18n) ;
le runtime de base fournit une API de première classe pour la création de rendus personnalisés ciblant différentes cibles de rendu (par exemple mobile natif, WebGL ou terminaux). Le moteur de rendu DOM par défaut est construit en utilisant la même API ;
le module “@vue/reactivity” exporte des fonctions qui fournissent un accès direct au système de réactivité de Vue, et peut être utilisé comme un ensemble autonome. Il peut être utilisé pour s'associer à d'autres solutions modèles (par exemple lit-html) ou même dans des scénarios hors interface utilisateur.

De nouvelles API pour lutter contre le changement d'échelle

Selon l’équipe, l'API 2.x basée sur l'objet est largement intacte dans la Vue 3. Cependant, la version 3.0 introduit également l'API de composition, un nouvel ensemble d'API visant à traiter les points sensibles de l'utilisation de Vue dans les applications à grande échelle. Cette API s'appuie sur l'API de réactivité et permet une composition et une réutilisation de la logique semblables aux Hooks de React, des modèles d'organisation du code plus flexibles et une inférence de type plus fiable que l'API basée sur l'objet 2.x.

L'API de composition peut aussi être utilisée avec Vue.js 2.x via le plug-in “@vue/composition-api”, et il existe déjà des bibliothèques utilitaires d'API de composition qui fonctionnent à la fois pour Vue.js 2 et 3 (par exemple vueuse et vue-composable).

Améliorations des performances

Selon l’équipe de développement du framework, Vue.js 3 offre des améliorations significatives de performance par rapport à Vue 2 en matière de taille de bundle (jusqu'à 41 % plus léger avec le traitement des arbres), de rendu initial (jusqu'à 55 % plus rapide), de mises à jour (jusqu'à 133 % plus rapide), et d'utilisation de la mémoire (jusqu'à 54 % de moins). Par ailleurs, l’équipe a annoncé qu’elle a adopté à partir de Vue.js 3 l'approche du “DOM virtuel assisté par le compilateur”.

Via cette approche, le compilateur de modèles effectue des optimisations agressives et génère un code de fonction de rendu qui élève le contenu statique, laisse des indices d'exécution pour les types de liaison et, surtout, aplatit les nœuds dynamiques à l'intérieur d'un modèle afin de réduire le coût de traversée du runtime. Selon l’équipe, l'utilisateur obtient de ce fait le meilleur des deux mondes : des performances optimisées par le compilateur à partir de modèles, ou un contrôle direct via des fonctions de rendu manuelles lorsque le cas d'utilisation l'exige.

L’amélioration de l’intégration de TypeScript

D’après l’équipe, la base de code de Vue.js 3 est écrite en TypeScript, avec des définitions de types générées, testées et regroupées automatiquement afin qu'elles soient toujours à jour. Elle a ajouté que l'API de composition fonctionne très bien avec l'inférence de type. En outre, Vetur, l’extension VS Code officielle, prend désormais en charge l'expression des modèles et la vérification des types d'accessoires tout en tirant parti de la typographie interne améliorée de Vue.js 3. Enfin, elle a aussi précisé que la typographie de Vue 3 prend entièrement en charge le TSX si c'est ce que vous préférez.

Fonctionnalités expérimentales

L’équipe a annoncé qu’elle a aussi proposé deux nouvelles fonctionnalités pour les composants monofichiers :

<installation du script> : sucre syntaxique pour l'utilisation de l'API de composition dans les SFC ;
<style vars> : variables CSS à état dans les SFC ;

Elle a expliqué que ces fonctionnalités sont déjà mises en œuvre et disponibles dans Vue 3.0, mais elles sont fournies uniquement dans le but de recueillir des commentaires. Elles resteront expérimentales jusqu'à ce que les RFC soient fusionnés. L'équipe a également implémenté un composant <Suspense> actuellement non documenté. Celui-ci permet d'attendre les dépendances asynchrones imbriquées (c’est-à-dire les composants avec async setup() ou les composants asynchrones) lors du rendu initial ou du changement de branche.

Elle a déclaré être en train de tester cette fonctionnalité avec l'équipe de Nuxt.js (Nuxt 3 est en cours de développement) et elle envisage de la consolider probablement dans la version 3.1.

Processus de libération progressive

D’après l’équipe, la sortie de Vue.js 3 marque l'état de préparation général du framework. Bien que certains des sous-projets du framework puissent encore nécessiter des travaux supplémentaires pour atteindre un statut stable (en particulier le routeur et l'intégration de Vuex dans les outils de développement), elle pense qu'il est approprié de lancer dès aujourd'hui de nouveaux projets avec Vue 3. Elle encourage les auteurs de bibliothèques à commencer à mettre à jour leurs projets pour soutenir Vue.js 3.

Migration et support IE11

L’équipe a repoussé la construction de la migration (construction v3 avec comportement compatible avec la v2 + avertissements de migration) et la construction d'IE11 en raison de contraintes de temps. Ainsi, elle prévoit de se concentrer sur eux au quatrième trimestre 2020. Par conséquent, les utilisateurs qui prévoient de migrer une application v2 existante ou qui ont besoin du support d'IE11 doivent être conscients de ces limitations pour le moment.

Source : Page GitHub de Vue.js 3.0

Et vous ?