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é.

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(() => {})

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

Avoir des tests automatisés permet à une application d'être plus durable et résistante aux évolutions. Entre les tests unitaires, tests fonctionnels ou tests end-to-end, comment prioriser son temps de dev?

L'agent de développeur vous accompagne et vous informe tout au long de votre carrière pour vous aider à atteindre vos objectifs. Découvrez pourquoi faire appel à un agent

En tant que développeur backend, vous serez attendu sur plusieurs problématiques qui ne sont pas abordées lors des tutos ou des formations. Découvrez les points à travailler pour devenir un bon développeur backend.

Après un an de loyaux services, j'ai décidé de migrer de Wordpress vers une stack NextJS. Découvrez les enjeux d'une telle migration.

Pour devenir développeur employable après une reconversion, il va falloir continuer à travailler sur votre montée en compétences et assurer une veille techno active afin d'arriver au niveau nécessaire pour décrocher votre premier CDI. Découvrez comment prioriser les différentes notions tech pour monter en compétences efficacement

En tant que développeur spécialiste du data scraping, je suis régulièrement sollicité par des personnes ou des entreprises souhaitant automatiser certains processus. Le tutoriel d’aujourd’hui reprend l’un de ces projets, réalisé pour une startup qui cherchait à effectuer une veille automatisée via un bot Instagram.