React vs Vue – Qui est le meilleur ?

Quand on est développeur web et qu’on souhaite développer une application « from scratch », la tentation est forte d’utiliser une autre bibliothèque pour accélérer la réalisation des étapes du projet. Et généralement, c’est une bonne chose.

Prenez React par exemple. Il s’agit d’une bibliothèque JavaScript open source utilisée pour le front afin de faciliter le développement des interfaces utilisateur (UI) / composants d’UI. Son développement est assuré par différentes entreprises dont Facebook et les gens l’utilisent souvent comme base de départ dans le développement d’applications web ou mobile.

React utilise un DOM virtuel également appelé vDOM (Virtual Document Object Model) pour interagir avec les documents HTML, en suivant un principe de composants qui peuvent se rajouter, offrant aux développeurs plus de flexibilité.

Et en face de React, certains aiment bien lui opposer Vue.js. En effet, View.js est un framework open source, également utilisé pour le front afin de permettre aux développeurs de créer des interfaces utilisateur (web et mobile) en respectant un principe d’architecture modèle-vue.

Comme React, Vue.js est un framework qu’il est possible de compléter avec de nouveaux composants. De plus, comme React, Vue.js utilise également le vDOM pour interagir sur les pages.

Vous l’aurez compris en lisant ces descriptifs, les deux technologies ont beaucoup en commun. Toutes les deux permettent d’écrire du front-end (avec support PWA) en javascript (+ support TypeScript) en se reposant sur un DOM virtuel pour permettre un rendu plus rapide et plus flexible des données.

Les 2 fonctionnent également sur un principe de composants à intégrer en fonction de vos besoins.

React comme Vue.js ont également un écosystème de dingue, que ce soit au niveau de leurs communautés respectives que des outils qui les supportent sans oublier leurs performances et leur développement très actif. Enfin, tous les deux peuvent s’intégrer et fonctionner avec des applications existantes.

Pas facile donc de comparer Vue et React.

Mais rassurez-vous, ils ont quand même des différences et je vais essayer de vous éclairer là-dessus pour que vous puissiez faire un meilleur choix.

L’écosystème et la communauté

D’après un sondage réalisé en 2021 par StackOverflow, React est devant Vue.js en termes de popularité. Évidemment, il est plus ancien et dispose par conséquent d’une communauté plus importante que celle de Vue.js. Il y a également beaucoup plus de ressources disponibles comme des tutoriels, des cours en ligne et des articles et 4 fois plus de questions « React » que « Vue » sur StackOverflow.

Le fait que Facebook soit le principal contributeur de React apporte également beaucoup de crédibilité au projet et l’assurance de son développement à long terme. React dispose également d’un énorme écosystème de bibliothèques, de paquets, d’outils et d’extensions tiers et est supporté par tous les principaux IDE.

La part de marché de Vue.js est un peu plus petite, mais sa communauté connaît une bonne croissance et de plus en plus d’IDE le supportent nativement. Niveau maintenance, Vue.js est le projet d’un homme : Evan You. À l’aide de son équipe de développeurs et des contributeurs, il finance le projet principalement avec du crowdfunding.

Concernant le recrutement, c’est sans surprise que je vous annonce qu’il y a plus de développeurs React sur le marché que de développeurs Vue.js et également beaucoup plus d’offres React que Vue.

React est même passé pour la première fois cette année (2021) devant jQuery : 41,4 % des développeurs utilisent React alors qu’ils ne sont que 20,09 % à utiliser Vue.js.

Les développeurs React apprécient notamment l’écosystème de composants très riche et le fait que la techno soit largement utilisée. Les développeurs Vue.js apprécient la courbe d’apprentissage facile du framework et sa documentation très complète.

L’évolutivité

Si l’on considère l’utilisation de React par rapport à Vue pour les grandes applications, React a un avantage, en raison de son évolutivité et de sa légèreté. Cela s’explique dans le fait que les applications React utilisent uniquement du JavaScript (JSX) ainsi que la possibilité de réutiliser des composants existants.

Vue.js est également évolutif, mais il est plus souvent utilisé pour de petites applications (bien que la taille de l’application dépende bien sûr de l’architecture). En raison de son architecture dynamique, on est souvent amené à utiliser des bibliothèques externes Vue.js pour dépasser certaines limites du framework.

La documentation

Au sujet de la documentation, celle de Vue.js est vraiment d’un niveau supérieur à la documentation de React. Les exemples d’implémentation sont de qualité et tout est disponible dans toutes les langues.

Par contre, dès que vous toucherez un sujet qui ne sera pas documenté, vous aurez plus de mal alors qu’avec React. En effet, la documentation de React est moins bien, mais la communauté est tellement énorme que vous trouverez forcément réponse à toutes vos questions.

La flexibilité

Il faut savoir que React ne propose que des fonctionnalités de base et doit ensuite être étendu avec des plugins. Cela offre ainsi beaucoup de flexibilité aux développeurs qui peuvent alors choisir les libs à implémenter. Ainsi, pour gérer des choses comme le routage, le rendu côté serveur ou le développement d’app mobile, vous devrez forcément passer par des libs additionnelles.

Contrairement à React, Vue.js propose un ensemble d’outils plus riche qui permet aux développeurs de faire beaucoup plus de choses sans utiliser de libs additionnelles.

La gestion des templates

Vue et React ne gèrent pas les templates de la même façon. React fait appelle uniquement à du JSX. Cela signifie que le HTML et le CSS sont produits à partir du JavaScript. Il faut voir JSX comme un langage de dev à part entière qui est parfaitement bien intégré dans les IDE modernes.

Du côté de Vue.js l’approche est un peu plus traditionnelle avec des composants uniques et des blocs séparés pour les templates HTML, CSS et JS. Cette séparation est plus naturelle et facilite par exemple la migration d’un projet existant vers Vue. Vue permet bien sûr d’utiliser du SCSS à la place du CSS brut, de pré-processer votre code ou tout simplement de vous passer des templates pour tout coder en JSX.

C’est donc plus une question de préférences, mais sachez que si vous travaillez avec des développeurs / intégrateurs HTML, le JSX risque de les perdre alors qu’avec la séparation claire proposée par Vue, la collaboration sera plus fluide.

La sécurité

Il serait présomptueux de comparer la sécurité des deux frameworks sachant que la sécurité de votre application est plus une affaire d’implémentation/ de code que de technologie. Mais il est arrivé au cours des années que le moteur JavaScript présente des failles de sécurité. Cela peut donc avoir un impact sur vos applicatifs, qu’ils reposent sur Vue ou React.

D’après ce rapport 2019 de Snyk, React est le plus visé, notamment avec des failles de type XSS. Pensez donc à utiliser des libs qui permettent de se prémunir de cela ou d’identifier d’éventuelles tentatives d’exploitations XSS, mais dans tous les cas, assurez-vous que toutes les entrées et les sorties de votre application soient bien chiffrées, validez bien toutes les demandes au niveau des API et pensez à valider les schémas des API pour parer à toute injection de code.

Sur Vue, c’est un peu la même chose, même si le HTML peut être codé de manière à limiter au maximum les risques d’exploitation XSS.

Rien de miraculeux donc en termes de sécurité, ce sera à vous d’appliquer les bonnes pratiques lors de votre développement.

La taille du code

Vous le savez, plus le code est petit mieux c’est pour les performances de votre application. Ne tournons pas autour du pot : Vue.js (80 kb) est plus léger que React (100 kb).

Ça ne se jouer pas de beaucoup, mais n’oubliez pas que si vous voulez par exemple faire du routage avec React, vous devrez appeler des bibliothèques tierces, ce qui va encore alourdir un peu plus votre application alors qu’avec Vue.js, les fonctionnalités de base sont beaucoup plus étendues pour moins de poids.

Les applications mobiles

On ne peut pas parler d’applications mobiles sans parler de React Native qui est un framework mobile utilisant JavaScript et permettant de créer des applications mobiles pour différentes plateformes comme iOS ou Android. Le code sera donc du JavaScript et React Native vous offre la possibilité d’utiliser ou réutiliser React pour vos composants.

Du côté de Vue, c’est moins la joie lorsqu’on parle d’application mobile. Mais il existe différentes solutions que vous pouvez implémenter comme NativeScript qui vous permet d’écrire des applications Vue et de les compiler en applications natives iOS ou Android. Ou encore Capacitor qui permet d’ajouter à toute application web codée en Vue.js, des fonctionnalités natives iOS / Android.

Enfin, il existe également Vue Native qui combine à la fois Vue et React Native en offrant un rendu et des composants vous permettant de créer une application qui sera également supportée sous iOS / Android.

Les performances

En termes de performances, React comme Vue sont très bons et il est impossible de vous donner une réponse ferme, tant les performances dépendent de la taille de votre application et des optimisations de votre code.

Avec React, le changement d’état d’un composant entraîne un nouveau rendu de tous ses composants liés ce qui peut affecter négativement les performances. Alors que de son côté, Vue se contente de suivre les dépendances, ce qui évite provoquer un nouveau rendu de tous les composants liés.

Vue est donc légèrement plus performant de ce point vu, mais ce n’est pas significatif.

Conclusion

Pour résumer ce comparatif, React est une bibliothèque JavaScript et un framework UI soutenu par Facebook qui possède un énorme écosystème d’outils permettant de tout faire ou presque. Il peut être utilisé pour des applications complexes avec des fonctionnalités mobiles et web de type communautaire tels que des places de marché ou des forums.

Vue.js quant à lui, est un framework conçu pour le design et le développement UI qui est supporté par un seul homme ou presque. Il peut être utilisé pour des applications de diffusion de contenu comme des sites vitrines réactifs et rapides.

Les deux exploitent le DOM virtuel (vDOM), c’est à dire un modèle d’objet qui ne dépend pas du navigateur web cependant Vue est plus rapide pour créer ou mettre à jour des composants. Leur taille est quasi identique même si Vue reste plus léger. La documentation de React est bonne, mais celle de Vue est meilleure et en termes de courbe d’apprentissage, Vue sera plus rapide à apprendre que React.

Enfin, React offre plus de flexibilité et se trouve être très stable. Vue proprose un modèle plus organisé et plus facile à mettre en oeuvre, ce qui permet le plus souvent de réduire la durée du projet.