Vue 3: La mise à jour tant attendue du Framework progressif JavaScript

Rayed Benbrahim

Publié le 19 septembre 2020

Depuis sa conception en 2013, Evan You, le créateur de Vue JS, a voulu un Framework "progressif" dans le sens où sa prise en main devait être facile et dont l'apprentissage pouvait se faire de façon incrémentale.

Vendredi 18 Septembre 2020, Evan You a annoncé la release officielle de Vue 3 lors d'une Keynote Live que vous pourrez revoir ci-dessous.

Baptisée One Piece, cette mise à jour majeure a nécessité plus de 2600 commits et plus de 600 pull requests provenant d'une centaine de contributeurs. Un effort de plus de deux ans qui apporte aux millions de développeurs JS une version renforcée de ce framework.

Améliorations de performances pour Vue 3

L'argument numéro un pour l'upgrade de version vers Vue 3 est l'amélioration des performances. Dans une époque où google valorise le temps de chargement des pages, Vue 3 a su réduire la taille de son bundle jusqu'à 41% en utilisant sa nouvelle fonctionnalité de tree-shaking. Le temps de chargement initial est jusqu'à 55% plus rapide et le temps est plus que deux fois plus rapide et l'utilisation de la mémoire est réduite de moitié.

Qu'est-ce que le tree-shaking?

Le temps de chargement d'un site web est directement lié au volume de fichiers JavaScript que le navigateur va avoir à charger. C'est pourquoi il est souvent préférable d'utiliser du Vanilla JavaScript - autrement dit du JavaScript sans framework - lorsqu'on veut réaliser de simples opérations plutôt que d'importer toute une librairie ou framework.

Le concept de Tree-Shaking est le fait de n'importer que les modules dont votre code a besoin de la librairie, et non pas son intégralité. De ce fait, vous pouvez réduire la taille des fichiers JavaScript à exécuter par le navigateur et améliorer le temps de chargement.

// Code en Vue 2
import Vue from 'vue'

Dans la version 2, il n'y avait pas d'autre choix que d'importer le bundle complet Vue, même si vous n'allez pas utiliser tous ses composants ou directives.

Grâce à Vue 3, vous pourrez importer que les éléments nécessaires à votre code, même s'il s'agit d'éléments issus de la Global API:

// Code en Vue 3
import { nextTick } from 'vue'

nextTick(() => {})

Vue 3 utilise les Proxy JavaScript pour de meilleures performances

Dans sa version précédente, VueJS avait du mal a réagir aux changements dans des objets. Il a fallu contourner le problème avec l'utilisation de Vue.set et Vue.delete afin de garder la réactivité de Vue dans son application.

Vue 3 réduit la taille du bundle de moitié

Vue 3 réduit la taille du bundle de moitié

Grâce à l'utilisation des Proxy Javascript, plus besoin d'utiliser ce contournement et l'impact se reflète sur le temps de chargement et de rechargement des composants.

Prise en charge native de TypeScript

Après avoir longtemps sous estimé TypeScript, Evan You et la core team de Vue a été contraint de se rendre à l'évidence. TypeScript est essentiel dans l'écosystème JavaScript et ne pas l'adopter n'est pas une option.

Le code source de Vue 3 a été complètement réécrit en TypeScript et fournit automatiquement des Types Definitions mis à jour avec chaque mise à jour. Vue 3 va permettre aux développeurs d'utiliser TypeScript dans leur code plus facilement qu'avec la version précédente et offre même la possibilité de faire du TSX

Nouvelle API de Composition pour les projets de grande envergure

Ce nouveau jeu de fonctionnalités a été conçu avec l'intention de réduire les difficultés que peuvent connaître les développeurs travaillant sur des applications ayant plusieurs centaines de composants.

Similaire au Hooks de React, l'API de Composition permet de réagir au cycle de vie des composants en utilisant des fonctions globales importées dans le composant.

Quel avenir pour Vue ?

Depuis plusieurs années Vue s'est taillée une part non négligeable dans le cœur des développeurs JavaScript. Étant clairement 2nd dans les préférences parmi les framework Frontend, Vue cherche avec sa version 3 à gagner du terrain dans des projets plus ambitieux où React domine encore.

Nul doute que l'écosystème va accueillir cette nouvelle version tant attendue avec attention. L'équipe Nuxt, framework SSG lié à Vue a déjà annoncé une évolution de son framework pour capitaliser sur l'arrivée de Vue 3.

Derniers articles

Dans l'univers du Big Data et du Cloud, Snowflake a vu le jour en étant le premier fournisseur d'un Data Warehouse sur le cloud 100% scalable. Dans cet article, découvrez ce qu'est un Data Warehouse et en quoi Snowflake est une solution innovante pour les entreprises.

Souvent portée par une équipe d'analystes, la QA vient supporter l'équipe tech pour assurer que les évolutions en cours de développement et récemment déployés ne viennent pas perturber l'application. Dans cet article, découvrez comment les méthodes Shift-Left et Shift-Right viennent se complémenter pour assurer un bon niveau de qualité du logiciel déployé.

Docker Desktop est le client permettant de faire tourner des containers depuis son poste. Découvre ce tutoriel pour installer Docker sur ton Mac et faire tourner tes premiers containers.

Docker Desktop est le client permettant de faire tourner des containers depuis son poste. Découvre ce tutoriel pour installer Docker sur ton PC Windows et faire tourner tes premiers containers.

Recruter un développeur passe forcément par une évaluation technique de ses compétences. Comment intégrer un test technique dans un processus d'embauche, suivant le niveau de seniorité ?

Mardi 15 Juin 2021, Vercel a dévoilé la version 11 du framework Next.js. Cette nouvelle version apporte des optimisations sur le plan des performances mais facilite également la collaboration entre développeurs et entre les différents partis prenants du projet.

Les Jobs