· Expertise Front-End

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.

Logos Vue.js et React.js

 

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.

Logos Next.js et Nuxt.js

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
 Graphique représentant les téléchargements mensuels de React.js avec le chiffre de 5 571 149  Graphique représentant les téléchargements mensuels de Vue.js avec le chiffre de 567 476
29150 dépendances 7883 dépendances
Nombre de "stars" sur github pour React.js avec le chiffre de 112 413 Nombre de "stars" sur github pour Vue.js avec le chiffre de 115 479

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
 Graphique représentant les téléchargements mensuels de Next.js avec le chiffre de 148 204  Graphique représentant les téléchargements mensuels de Nuxt.js avec le chiffre de 47 368
248 dépendances 71 dépendances
 Nombre de "stars" sur github pour Next.js avec le chiffre de 29 904  Nombre de "stars" sur github pour Next.js avec le chiffre de 15 231

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.

 

Vue.js React.js
<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.

Ajouter un commentaire

4 commentaires

  1. Merci pour cet article. J’aime ton style d’écriture !

    J’ai quelques remarques à faire cependant:

    • Utilisation et poids.
      Tu dis que React est plus petit que Vue. Je ne suis malheureusement pas d’accord. Vue est bien plus léger (voir les vraies différences entre fw js). D’autant plus qu’avec vue seul, on peut immédiatement travailler sur du web, tandis qu’avec react, il est nécessaire d’y ajouter react-dom.
      En terme d’utilisation, React et Vue pour moi est similaire ! Des fois même j’ai une préférence pour React. Cependant, cela est parce que j’ai déjà compris JSX. Une personne lambda devra comprendre le concept avant de se lancer sur React pleinement.

    • CSS
      Faux, Vue.js est justement critiqué pour donner trop de solutions (et donc on sait pas vraiment quelle la best practice). Concernant le CSS, on peut facilement intégrer tout type de pre-processeur grâce à son concept de SFC. Sans parler de la petite perle dont je suis tombé littéralement amoureux : styled-vue – du CSS-in-JS en utilisant les standards déjà connus.

    • Templates
      C’est là que pour moi, React et Vue se différencient ! React est du full-JS, Vue se veut de respecter la responsabilité de chaque standard dans leur syntaxe propre. Mais en un sens, le concept SFC permet de réunir le tout au même endroit.
      Concernant les HOC, Vue a été déjà prévu la chose avec les slots dans sa deuxième version.

    J’aimerais terminer mon commentaire sur la surprise que j’ai eu tout récemment avec les nouveautés de React Lazy et Suspense.
    Et en fait, Vue en est déjà équipé depuis sa version 2.3.0 (cf doc). Là où React a fait fort c’est les Hooks.
    C’est tout bonnement génial pour React de pouvoir se passer des stateful components et d’utiliser plutôt les functional components.
    Vue a son semblable (vue-hooks) mais n’a pas autant d’intérêt.

    Sur ce, encore merci pour cet article.

    Répondre

    1. Thomas de Tugny

      Tout d’abord merci pour ta réponse riche et désolé pour la réactivité (sans mauvais jeu de mots)
      Pour la taille, je parlais de la taille des packages et je n’ai fait que reprendre les chiffres du site package phobia.
      Concernant le CSS, je rebondissais sur ce que j’ai lu de l’article écrit par Vue et ta remarque est hyper intéressante car elle nuance bien ce qu’ils avancent.
      Concernant le troisième point sur les templates, c’était une remarque très subjective et donc une question de préférence : un seul language vs une séparation net. L’idéal serait les deux réuni et je pense que React s’en approche.

      Répondre

  2. Merci pour cet article sympa et bien rédigé ! En effet pas évident de départager Vue.js et React… mais bon, les deux ayant des concepts similaires, en apprendre un c’est aussi un peu apprendre l’autre donc bon…
    Les frameworks changent, les concepts restent.

    Répondre

  3. Très bon article! Les Frameworks sont en constante évolution, et c’est pratique de connaitre leur évolution au fil du temps.

    Répondre

Ajouter un commentaire

Votre adresse email ne sera pas publiée. Les champs obligatoires sont indiqués par un astérisque.

Vous pouvez utiliser les balises et attributs HTML suivants dans votre commentaire : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre>