Vue vs React. Pourquoi je choisis Vue.

Lorsque j’ai commencé à basculer d’applications purement fullstack, à l’époque en Laravel 3 puis 4, vers des architectures basées sur une API et un frontend, j’ai tout d’abord commencé par utiliser, pour la partie client, un bon vieux couple HTML + JQuery, ce dernier s’occupant de l’AJAX et de manipuler le DOM. Puis comme j’ai vu à l’époque qu’il y avait de la demande, je me suis jeté dans AngularJS (Angular 1) et bien plus tard, après quelques coups d’œils rapide à Backbone et Ember, je me suis longuement intéressé à React et réalisé plusieurs projets avec. Puis l’arrivée de Laravel 5.3 m’a permis de découvrir Vue.js, et c’est depuis devenu mon framework de prédilection, je vais vous expliquer pourquoi.

Même si à une époque j’ai réalisé quelques projets intéressants en Angular 1, j’ai toujours été découragé par le fastidieux processus d’apprentissage d’Angular 2. A ce moment là, je trouvais React bien plus abordable en termes de courbe d’apprentissage, et il existait déjà autour de React un très bel écosystème. Cependant, même au bout de plusieurs projets, le JSX me rebutait vraiment. J’ai toujours trouvé qu’il était bien moins aisé de décrire des choses simples en JSX qu’en pur HTML. C’est peut être une question d’habitude, mais je suis formaté comme cela…

Pendant tout ce temps, j’utilisais toujours Laravel pour faire mes backends. A la sortie de Laravel 5.3, voici que le framework embarquait une nouvelle librairie destinée au frontend, Vue.js. J’ai découvert que l’on pouvait y créer des composants réutilisables, écrits en HTML et CSS et pur Javascript, ES5 ou ES6 au choix.

Et surtout, en une petite demi-journée de lecture de tutos et documentations, j’étais capable d’écrire d’une manière complètement intuitive un joli morceau de frontend qui n’avait rien à envier à React, d’une manière que j’ai trouvée bien plus facile.

Mais mes considérations et coups de cœurs ne sont pas paroles d’évangile. Regardons donc de manière objective ce qui fait la force de Vue.js, en essayant d’être juste et précis. Je ne cherche pas à discréditer React, qui possède un écosystème et une communauté immenses. Je veux seulement montrer les points forts de Vue.

Vue et React ont beaucoup en commun. les deux utilisent un DOM virtuel, permettent de créer des composants réactifs et réutilisables, et restent concentrés sur le cœur de la bibliothèque, en déléguant d’autres tâches, comme le routage et la gestion d’état à des bibliothèques connexes.

Vue et React présentent des performances comparables dans la plupart des cas, avec une très courte longueur d’avance pour Vue grâce à une implémentation plus légère du DOM virtuel.

Sous React, si vous n’utilisez pas un plugin comme PureComponent ou si vous ne faites pas une utilisation intensive de shouldComponentUpdate, toute la chaîne de sous-composants est rendue de nouveau à chaque changement d’état d’un composant parent. Vue gère cela beaucoup mieux, et ne rend que ce qui est nécessaire, automatiquement.

Avec React, tout est Javascript. Le HTML et le CSS sont exprimés via JSX. Cette approche peut avoir ses bénéfices, mais apporte inévitablement son lot de compromis qui accaparent l’attention des développeurs.

Vue utilise HTML et CSS nativement. Cela permet de migrer d’anciens codes plus facilement, de rendre compréhensible la structure à des non-spécialistes, et permet de réduire considérablement le processus d’apprentissage. S’il est nécessaire d’aller plus loin, Vue supporte cependant la plupart des préprocesseurs modernes (PUG, LESS, SASS) et dispose même de fonctions de rendu JS et supporte aussi JSX. Mais leur apprentissage n’est pas obligatoire.

Sous React, l’application de styles à la portée d’un seul composant est très compliquée sans passer par du CSS-in-JS. Sous Vue, avec l’attribut scoped, une balise <style> permet d’écrire du pur CSS limité au seul composant qu’il accompagne.

Même si l’offre est extrêmement riche, React préfère laisser à la communauté le soin de maintenir les bibliothèques connexes, comme la gestion d’état par exemple avec Flux / Redux. Vue préfère garder ce type d’extension, comme Vuex pour la gestion d’état, ou vue-router pour le routage, sous maintenance officielle. Il en résulte une expérience de programmation plus évoluée et une intégration plus poussée.

Alors que React est utilisé intensivement par de grands sites à l’audience internationale très connus (Airbnb, Uber, Netflix, Twitter, Paypal, etc.), on pourrait croire que Vue est moins diffusé. C’est faux, Vue propulse ainsi par exemple Alibaba, qui reste le plus grand site marchand au monde, bien devant Amazon, mais aussi Baidu, Expedia, Gitlab, etc.

Vue, avec vue-router, permet de faire du lazy-loading de routes, ce que ne propose pas React avec react-router, et permet, avec les computed properties, de faire de la validation de formulaire nativement, alors que cela nécessite un plugin avec React.

Au bénéfice de React, nous noterons que le développement d’applications natives IOS et Android se fait très bien avec React-Native, alors qu’il y a encore des progrès à faire à ce niveau là du cité de Vue (mais attendez quelque mois, Vue-Native fait son apparition, et il faut aussi suivre Quasar …).

Par contre, disons le franchement, la licence BSD + Patents que Facebook a pondu pour React est pourrie. Pour résumer, cela dit en gros que du moment que vous utilisez React, vous ne pourrez jamais poursuivre Facebook s’ils vous piquent votre idée, sous peine de perdre le droit d’utiliser React… Pour de petits projets internes à des entreprises ou à portée locale, cela peut aller. Pour de gros sites à portée internationale, il y a de sérieuses questions juridiques à se poser
(EDIT : Ceci est maintenant du passé, Facebook est depuis début octobre 2017 revenu là dessus et a placé React sous license MIT.)

Vue, de son coté,  est sous licence MIT de base, qui est l’une des licences les plus permissives qui puissent exister et ne recèle aucune mauvaise surprise.

Enfin, jetons un petit coup d’œil à ce qu’il se passe sur Github autour des deux bibliothèques. Avec plus de 75000 étoiles, React devance à ce jour bien Vue (68000 étoiles). Cependant, avec 111 étoiles par jour pour Vue contre 73 étoiles par jour pour React, le challenger est bien en train de rattraper le leader, et les spécialistes estiment qu’à ce rythme, Vue passera numéro 1 sur Github dans environ 7 mois.

vue_vs_react

J’espère que cette présentation vous aura été utile. Encore une fois, je ne veux pas « casser » React. C’est une très bonne bibliothèque. Je veux juste mettre en avant des choses encore assez méconnues au sujet de Vue, et donner à ceux qui s’y intéressent des arguments pour le défendre, auprès de décideurs par exemple. Des étudiants ou des développeurs voulant se reconvertir peuvent aussi être intéressés par un outil à la courbe d’apprentissage très rapide. Signalons d’ailleurs que la documentation de Vue.js est très claire et structurée, et que sa traduction en français est très avancée.

A très bientôt.