Que nous réserve Vue 3.0 ?

7 janvier 2020 0 Commentaires

/!\ Read.me /!\

L’article ci-dessous a pour objectif de présenter certaines des nouveautés et évolutions apportées par la prochaine version de Vue.js, Vue 3.

Le choix des contenus présentés dans cet article a été effectué en fonction des besoins récurrents de son auteur et des différentes problématiques rencontrées au cours de développement passés.

Par conséquent, les différents points qui seront abordés dans cet article constituent une liste non exhaustive de l’ensemble des nouveautés de cette nouvelle version. Vous pouvez cependant retrouver la note d’intention d’Evan You, créateur de Vue.js, concernant version 3 du framework afin de vous faire une idée plus précise.

Cet article s’adresse en priorité aux personnes ayant déjà mis les mains dans du code rédigé en utilisant le framework Vue.js et sa version 2.X. Mais tous les curieux de passage sont évidemment les bienvenus !

Soon soon soon…

Depuis la sortie de Vue et sa seconde version en septembre 2016, le framework n’a eu de cesse de voir sa popularité grimper. Il a fait parti des trois frameworks les plus populaires de 2018 et 2019 (aux côtés d’Angular 2+ et React.js).

La troisième version du framework fut annoncée à Londres en automne 2018 et sa mise à disposition est actuellement prévue, d’après la roadmap, pour le premier trimestre 2020. Un bon début d’année en perspective !

Motivés, motivés !

Comme toute nouvelle version majeure d’un framework, cette dernière mouture de Vue doit apporter des évolutions et améliorations de manière significative. L’idée de cette nouvelle version est issue d’un constat au cours des 3 dernières années : Vue.js est très populaire lorsqu’il s’agit de développer des applications de petite et moyenne taille mais devient difficile à maintenir lorsqu’une application commence à prendre de l’ampleur.

Une application qui est sujette à plusieurs itérations de développement et qui voit par conséquent (souvent) différentes équipes de développeurs se passer le flambeau est plus difficile à maintenir sur le long terme. Evidemment, et c’est le cas pour toute application, mais l’API de programmation proposée par Vue.js 2.X commence à montrer ses premiers signes de faiblesse et premières limitations. L’initiative a donc été prise par la team Vue, une nouvelle version est en développement et s’articule autour de plusieurs points :

Une meilleure réutilisabilité de la logique des composants Vue.js
Une lisibilité et maintenabilité améliorées des composants à la logique complexe
Une meilleure inférence des types
Un framework plus rapide
Un framework plus léger

La grosse nouveauté: la Composition API

Comme expliqué précédemment, plus Vue s’installe dans les habitudes des développeurs et leurs projets, plus il y a de projets de grandes tailles qui sont réalisés en utilisant le framework. Ces applications vont avoir des cycles de développement et de vie plus longs et nombreux sont les développeurs qui vont passer sur les différents parties et composants du code. Au cours de ces dernières années, le modèle de programmation proposé par l’API actuelle de Vue.js a parfois montré ses limites, en particulier sur ce type de projets.

Les composants les plus complexes deviennent difficiles à maintenir et à faire évoluer, ceci étant dû à l’actuelle API de Vue. Cette dernière étant conçue pour organiser le code par options alors que des composants plus complexes devraient, la plupart du temps, être plutôt organisés par logique.

Il est également en l’état trop complexe et chronophage d’extraire une logique d’un composant et de pouvoir la réutiliser dans d’autres.

Pour pallier à ces problèmes, une nouvelle API est mise en place afin d’offrir aux développeurs plus de flexibilité quant à l’organisation d’un composant : la Composition API, LA grosse nouveauté de cette version 3 de Vue.

Grâce à cette dernière, le code d’un composant n’a plus l’obligation d’être organisé grâce aux options de l’API classique de Vue 2.X mais il peut désormais être structuré grâce à un ensemble de fonctions, chacune d’entre elles traitant d’une partie de la logique du composant ou d’une fonctionnalité particulière.

Comment ça marche ?

L’objectif de la composition API est de mettre à disposition les fonctionnalités au coeur de Vue en tant que fonctions séparées. Comprenez par là qu’il sera possible d’importer ces éléments de la manière suivante :

import { watch, computed, ref, ... } from 'vue'

Il est également possible d’importer les hooks du cycle de vie de Vue de cette manière :

import { onMounted, onUnmounted, ... } from 'vue'

Un exemple un peu plus concret :

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition () {
  // ref() prend en entrée une valeur et retourne un objet ref réactif et
  // mutable. ref.value retourne la valeur de l'objet ref
  const x = ref(0)
  const y = ref(0)

  function update (e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted (() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return {
    x,
    y
  }
}

Cet exemple constitue ainsi ce que l’on appelle une fonction de composition. Cette dernière peut être écrite dans un fichier séparé puis réimportée quand le besoin se présente dans n’importe quel composant, dans l’option setup().

On pourra ainsi écrire un composant de la manière suivante :

<template>
  ...
</template>
<script>

  import { ref, onMounted, onUnmounted } from 'vue'
  export default {
    setup() {
      const x = ref(0)
      const y = ref(0)

      function update (e) {
        x.value = e.pageX
        y.value = e.pageY
      }

      onMounted (() => {
        window.addEventListener('mousemove', update)
      })
      onUnmounted(() => {
        window.removeEventListener('mousemove', update)
      })

      return { x, y }
    }
  }
</script>
<style>
  ...
</style>

Mais si on utilise le fichier dans lequel on a écrit séparement la fonction de composition, il est alors possible d’écrire le composant de cette manière :

<template>
  ...
</template>
<script>
  import { useMousePosition } from './mouse'
  export default {
    setup() {
      const { x, y } = useMousePosition()
      // autre traitement au choix...
      return { x, y }
    }
  }
</script>
<style>
  ...
</style>

Il est tout à fait possible de se servir de la Composition API tout en utilisant les options fournies par l’API 2.X de Vue. L’utilisation de la Composition API est pour ainsi dire optionnelle.

Les fonctions mises à disposition par la Composition API sont résolues entre deux parties du cycle de vie de Vue, à savoir entre le beforeCreate() et le created() et donc avant les options data, computed et methods. L’API ne pourra donc pas accéder aux différentes propriétés définies par ces options.

Cependant, les options 2.x auront accès aux propriétés mises à disposition par setup() via this.

Grâce à l’option setup() un composant peut alors devenir une simple fonction. Beaucoup plus de détails sont disponibles sur la RFC de la Composition API.

Si vous voulez vous faire la main avec ce nouveau fonctionnement, il est possible d’intégrer la Composition API dans votre projet Vue 2.X grâce au package @vue/composition-api. Pas besoin d’attendre pour apprendre !

Un support de Typescript amélioré

Une meilleure intégration et une facilité d’utilisation de Typescript sera possible. En effet, la nouvelle Composition API proposera d’utiliser majoritairement des fonctions et des variables simples, qui sont quant à elles naturellement adaptées à l’utilisation des types.

Ainsi, le code qui sera rédigé en utilisant la Composition API pourra profiter pleinement d’une inférence de types améliorée, sans avoir besoin d’effectuer une foultitude de modifications manuelles. Le code écrit sera presque identique que ce soit en Typescript et Javascript pur ce qui signifie que tous les utilisateurs pourront éventuellement bénéficier du typage et ainsi une meilleure intégration pour les IDE.

Des performances globalement améliorées

Cette version 3 sera significativement plus rapide, ceci grâce à un grand nombre d’optimisations.

Amélioration du tree shaking

La nouvelle base de code a été créée pour renforcer le tree-shaking.

Des composants intégrés (comme <transition>, <keep-alive> etc.) ou encore certaines directives (comme v-model ou encore v-show) seront à présent importés sur demande et donc pris en compte par le tree-shaking.

Actuellement, peu importe les features qui sont utilisées dans un projet, elles seront exportées dans le code de production car Vue est instancié en tant qu’unique objet. Dans cette version 3, la plupart des éléments composants l’objet Vue sont importés par des exports nommés, permettant ainsi aux bundlers d’appliquer le tree-shaking.

Réactivité basée sur les proxies Javascript

Le système de réactivité de Vue.js ne sera plus basé sur Object.defineProperty mais sur les proxies Javascript. Actuellement, Vue ne peut pas suivre correctement l’ajout ou le retrait des propriétés d’objets réactifs, il est nécessaire d’utiliser Vue.set et Vue.delete. Avec les proxies JS, plus besoin et nous pouvons donc remplacer :

Vue.set(this.object, key, value)

par :

this.object[key] = value

La nouvelle propriété sera ainsi bien prise en compte pour la réactivité globale de l’objet.

En plus d’offrir une syntaxe plus sympathique pour le développeur, les proxies offrent surtout des performances beaucoup plus élevées. On parle ici de quelque chose comme 2 fois plus rapide :

Ce gain de performance est principalement dû au fait que pour faire fonctionner ses getters et setters, Vue devait effectuer un parcours récursif à travers tous les objets et toutes les propriéts afin de les transformer. Ce processus est grandement simplifié grâce aux proxies JS.

A noter que le support pour Internet Explorer jusqu’à sa version 11 ne sera plus pris en charge, en partie à cause de l’utilisation de ces proxies JS. Pas de panique, Edge restera compatible.

Un outil plus léger

Actuellement, le Vue runtime environnement (minifié et compressé) pèse environ 20 kB. Pour cette troisième mouture de Vue, on parle d’une taille estimée à environ 10 kB, soit moitié moins.

Toujours plus !

Nous ne pouvons pas couvrir tous les changements apportés par Vue 3 en terme de performance, mais sachez qu’il y en bien d’autres comme :

Le code généré sera plus facilement optimisable par le compilateur Javascript ;
Le code généré sera (beaucoup) mieux optimisé ;
Les algorithmes de rendu seront améliorés permettant ainsi d’éviter de réeffectuer des rendus parents/enfants inutiles.

Conclusion

Vue est un framework aimé de sa communauté, soutenu par cette dernière et a un gain de popularité constant pour tout un tas de bonnes raisons. Les changements apportés par sa nouvelle version ont de quoi faire envie, bien qu’ils aient été sujets à débat. Plus de rapidité, plus de souplesse, le bonheur pour un développeur en somme.

Cependant, un grand pouvoir impliquant de grandes responsabilités, de nouvelles bonnes pratiques et méthodes pour l’utilisation du framework sont en cours de création afin de permettre à tous de profiter des avantages et nouveautés de la nouvelle version tout en codant le plus propremment possible.

La route est tracée, l’arrivée se rapproche et nous souhaitons bonne chance à toute l’équipe de Vue pour cette dernière ligne droite !

Sources

210