Vue.js & React.js

Cet article propose de comparer Vue.js à React.js, non pas pour remettre en cause le champion de Facebook, mais pour mettre en évidence les succès prometteurs de Vue.js. Angular a été volontairement exclu car il n’est pas de même nature ; Angular est un framework entier, il n’utilise pas (voire peu) de module transverse.

Vue.js est un framework open source écrit par Evan You qui surfe sur la vague novatrice des technos Javascript bénéficiant du SSR (Server Side Rendering). Encore un me direz-vous ? Et pourtant, il a vu le jour en 2014, 1 an seulement après React.js. Même si ce dernier a largement occupé l’espace médiatique, Vue.js rivalise toujours, à tel point qu’au début de cet été, il a dépassé en nombre de “stars” sur Github le framework de Facebook.

Dan Abramov peut ironiser, et pourtant Vue.js est très similaire à React.js. Il se base sur le Dom virtuel qui évite la phase coûteuse de lecture du Dom. Il structure le code par une découpe en composant réactive. Il peut avoir une approche isomorphe et gère également un store.

Framework

React.js et Vue.js sont aussi des frameworks mais beaucoup plus petits. Pour les utiliser il faut d’autres frameworks. Mettre en place un projet devient tout de suite long et difficile car il faut assembler un cocktail stable. Pour pallier à cela, ont vu le jour des frameworks dont la responsabilité est d’accélérer la mise en place d’une architecture logicielle exploitable, à jour et surtout de faciliter sa maintenance.

Là où React.js a son framework Next.js (~30k stars sur github) qui offre un package comprenant routage et transpilation, Vue.js a fait de même avec Nuxt.js (~15k stars sur github). L’un ou l’autre permet de diminuer la courbe d’apprentissage et de démarrer rapidement un projet avec SSR.

Popularité

L’écosystème Javascript évolue tellement vite qu’il est intéressant de se poser la question si le framework dans lequel j’investis du temps existera toujours à l’avenir. En effet, une librairie très performante ne signifie pas qu’elle durera dans le temps.

Tout comme connaître le créateur de la technologie, la popularité est un facteur essentiel pour juger de la fiabilité dans le temps d’un nouveau framework.

La popularité de React.js n’est absolument pas à remettre en cause mais les chiffres démontrent que Vue.js a le vent en poupe et pourrait à terme connaître le même succès que React.js.

React.js	Vue.js
29150 dépendances	7883 dépendances

En revanche du côté de leur framework l’écart se creuse entre le nombre de stars sur github mais moins en terme d’utilisation et de dépendances.

Next.js	Nuxt.js
248 dépendances	71 dépendances

Comparaison stratégique

Rien ne prévalue l’un par rapport à l’autre d’un point de vue commercial si ce n’est que React.js est supporté par un géant du web et que ses devtools et librairies sont incomparablement plus développés et plus matures.

Départage technique

Sur ce point la polémique fait rage. Je vous recommande la lecture de cet article rédigé par Vue.js qui s’est avancé à se comparer, entre autres, à React.js. Cependant, les points avancés n’y sont pas tous aussi tranchés. Ci-dessous, je détaille les différents points que j’ai trouvés incomplets ou pas assez nuancés.

La courbe d’apprentissage

Dans l’article, il est écrit que React.js est connu pour sa courbe d’apprentissage abrupte et Vue.js se vante d’avoir diminué cette courbe drastiquement. De mon point de vue, ce sont des propos à nuancer car React.js a eu la difficile tâche de révolutionner le front (la découpe en composant des applications, le polymorphisme, …). Par son succès, il a formé énormément de jeunes développeurs front qui ont dû naturellement apprendre NodeJs et les nombreuses bibliothèques Js. Ce changement de mentalité, Vue.js n’a pas eu à le faire. Les développeurs qui apprennent Vue.js ont déjà une connaissance de NodeJs. Sinon la librairie React.js est toute petite 171kb (vs 449kb pour Vue.js) et très simple d’utilisation si on se limite à son scope strict. Ce qui en revanche est moins évident à apprendre, c’est de l’imbriquer dans un écosystème de librairies Js. Mais tout le monde ne devient pas architecte logiciel du jour au lendemain.

CSS

On a l’impression en lisant l’article de Vue.js que React.js a une approche spécifique non conforme à la philosophie CSS alors qu’en fait React.js est permissif et l’utilisation du CSS d’un projet à l’autre dépend entièrement du choix de l’architecte. Vue.js n’a qu’une seule approche d’implémentation avec ses avantages et ses inconvénients. Celle-ci permet une uniformité d’implémentation et donc accroît la lisibilité et diminue la phase d’assimilation d’un nouveau projet Vue.js. En revanche on ne peut pas sortir du sentier battu. Il n’y a qu’une seule façon de faire, pourvu qu’elle réponde à vos problématiques techniques.

Template vs Jsx

Vue.js réintroduit les templates dont les noms sont suffixés par “.vue”, là où React.js avait tout uniformisé en Js. Vue.js se défend en appuyant sur le fait que la montée en compétence sur le langage de templating se fait plus rapidement qu’avec Jsx. C’est un point de vue très discutable. Le templating est une approche très classique dans le monde du développement. Dans une architecture trois tiers Il force naturellement à séparer la couche de présentation des autres.

Cependant, il est tout à fait possible et conseillé de faire la même chose qu’avec React.js. Bien qu’il soit trop permissif, ce dernier permet de séparer les composants connectés par des HOC (Higher-Order Components). Au final, l’HTML est plus compact coté Vue.js mais la partie dynamique qui pollue l’HTML présent dans Jsx est comparable à celle dans un template Vue et les intégrateurs s’y retrouvent. Surtout avec la disparition de l’attribut className (inexistant en HTML) qui sera remplacé par l’attribut HTML “class” dans un futur proche.

<ul id="example">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

<ul id="example">
{items.map({(id, message}) => (
<li key={id}>
{{ message }}
</li>
)}
</ul>

<span style="color : #333333 ; font-family : Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif ;"><p v-if="seen">Now you see me</span>

<span style="color : #333333 ; font-family : Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif ;">{seen ?<p>Now you see me</p>:null}</span>

L’avenir

Evan You a présenté la version 3 de Vue.js dont la sortie se ferait en 2019. On y parle entre autres :

• d’une code base entièrement codée en Typescript ;
• d’un découplage complet entre les observés et les schedulés ;
• d’une meilleure gestion des observés ainsi qu’un debugging plus facile ;
• et IE 11 y sera toujours supporté mais dans un build différent dont les performances seront proches de la version antérieure.

Dan Abramov est plus vague sur le devenir de React.js – qu’il surnomme “React Fire” – et ouvre la discussion dans une issue sur github. Les points abordés sont :

• la résolution de bug : ne plus réagir sur l’input d’une valeur dans un formulaire.
• une meilleure gestion des events : attacher les évènements au React root plutôt qu’au document.
• un Dom toujours plus épuré d’éléments spécifiques à React.js (l’attribut className sera remplacé par class).
• IE 11 sera également toujours supporté mais les performances de React.js y seront dégradées.

En somme les deux frameworks travaillent sur les performances, une code base plus petite et plus performante et délaissent petit à petit les vieux navigateurs comme IE11.