React, Vue, Angular : quel framework front choisir en 2021 ?

La question revient souvent sur le devant de la scène. Dans le monde du framework web, on a du choix c’est bien, mais encore faut-il s’y retrouver et savoir lequel choisir.

Quel framework me conviendrait le mieux ? Quel framework devrais-je apprendre ? Lequel choisir pour mon nouveau projet ? Tant de questions légitimes auxquelles nous allons apporter une réponse.

A travers cet article, je ne vais pas vous apporter de réponse universelle (car elle n’existe pas), mais je vais vous donner les clés pour choisir. Je vais pour cela vous proposer un comparatif critère par critère pour que vous puissiez peser le pour et le contre. Selon votre profil, votre situation, vos objectifs, la solution va différer !

Pour cet article, je me suis concentré sur les trois plus gros frameworks. Cependant sachez qu’il en existe une multitude. Je vous proposerai des alternatives sérieuses à la fin de cet article si vous souhaitez en savoir plus.

Que vous souhaitiez apprendre un de ces outils ou décider quel framework choisir pour un nouveau projet, vous êtes tombés au bon endroit car à la fin de cet article vous aurez toutes les cartes en main pour choisir la solution la plus appropriée.

Nous allons parcourir ensemble tous les critères que j’ai identifiés comme étant les plus importants. Il est possible que vous ayez des critères plus précis et spécifiques que je n’ai pas mis en avant dans cet article. Dans ce cas, je vous invite à les partager dans la section commentaire !

@ Vous aurez peut-être remarqué que j’appelle nos trois candidats des frameworks par simplicité. Même s’ils peuvent être considérés comme des librairies…

Commençons tout de suite si vous le voulez bien !

I - Comparons les popularités des différents frameworks

Premier critère important mais difficilement mesurable : la popularité.

C’est important car cela montre un engouement autour d’une technologie. Ce n'est pas un critère à négliger car qui dit popularité, dit apprécié par les développeurs. Ensuite, c’est un cercle vertueux, un framework populaire attire de plus en plus de développeurs, donc des entreprises s’y intéressent, donc le marché du travail augmente pour cette technologie.D’autre part, le nombre de contributeurs augmente et l’outil évolue plus vite ainsi que son écosystème.

Bref, pour mesurer ce critère, je me suis basé sur des sondages, la popularité sur GitHub, le nombre de téléchargements de chaque librairie via NPM ainsi que les tendances Google.

^ L’idée n’est pas de sur-interpréter chaque résultat, mais plutôt d’avoir une vue d’ensemble. Par exemple, il est important de savoir que les sondés de StateOfJs sont plutôt des développeurs front alors que StackOverFlow sonde une plus large communauté avec beaucoup de développeurs back-end. Pour Google Trends, on est capable de faire une estimation, mais il faut savoir qu’il peut y avoir de faux positifs. “React” peut correspondre au framework front mais aussi à la mousse révolutionnaire que Nike met dans ses chaussures de sport… Je m’égare 😅. Enfin, les chiffres donnés sont une photo prise le jour de l’écriture de l’article, mais il est intéressant de voir l’évolution de chacun.

	React	Vue	Angular
Satisfaction	88%	85%	42%
Intérêt	68,9%	66%	54%
GitHub Stars	165k	180k	71,1k
Google Trends	65	23	57
NPM Téléchargements	981M	189M	88M

^ La popularité est du côté de React, mais plus qu’une image d'un instant T il faut prendre l’évolution en compte. Et à ce niveau on constate que Vue devient de plus en plus populaire.

II - Regardons l'historique des différents frameworks

Voyons maintenant depuis quand chaque framework existe. Car qui dit ancienneté dit expérience !

• Pour Angular, c’est particulier car il est passé par une version 1 très différente : AngularJS. Les changements ont été tellement drastiques lors du passage à la version 2 que l’équipe de développeurs a décidé de le renommer AngularJS en Angular.

• Vue, lui, est en pleine mutation avec sa version 3 sortie récemment.

• React a également beaucoup changé avec l’apparition des hooks récemment et continue d’innover avec une proposition : Server Components. Par ailleurs, React doit assurer une forte rétro-compatibilité avec les anciennes versions (syntaxe classe).

Le fait d’avoir de l’ancienneté peut être vu comme un avantage car le framework en a vu de toutes les couleurs contrairement aux petits nouveaux. Mais ces petits nouveaux ont aussi l'avantage de pouvoir s’inspirer des erreurs de ses prédécesseurs pour proposer des solutions meilleures. A vous d’interpréter cette information comme bon vous semble :

	React	Vue	Angular
Création	2013	2014	2009 (v2: 2016)

III - Quel est le marché du travail de ces 3 différents frameworks ?

Que vous souhaitiez apprendre un de ces frameworks ou recruter un développeur pour votre nouveau projet, ce critère va être important. Pour quel framework y a-t-il le plus d’offres ? Le plus de demandes ? D’un côté ou de l’autre du marché du travail, recruteur ou recruté, il peut être intéressant de regarder ce qui se passe sur le marché du freelance (Malt) et de l’emploi (LinkedIn, WelcomeToTheJungle, Indeed).

D’après mes recherches (encore une fois à prendre avec des pincettes car en cherchant selon un mot clé, par exemple, Angular, on peut tomber sur des offres React selon les mots-clés ajoutés par le recruteur) :

	React	Vue	Angular
Malt	3625	1935	1846
LinkedIn	1852	1303	6045
WelcomeToTheJungle	205	204	478
Indeed	886	995	8598
TOTAL	6528	4437	16967
Répartition	23%	16%	61%

@ Bien que le framework Angular soit moins apprécié par les développeurs, les entreprises, elles, semblent l’adorer ! Par expérience, il est plébiscité par les grosses structures...

IV - Regardons les tailles des différentes librairies

Ce critère est plutôt important pour un chef de projet soucieux de l’optimisation du framework. En voici les résultats :

	React	Vue	Angular
Taille	128kB	64kB	181kB

La taille correspond au code minifié non zippé.

^ Attention React est pensé en bouts de code réutilisables. Nous avons inclus dans le calcul la library React (7kB) et React-DOM (121kB).

V - Quelles sont les performances de ces frameworks ?

Plaçons sur le banc d’essai nos trois candidats. On constate que, malgré sa réputation, Angular n'est pas si lent que ça ! Il s’avère que l’équipe en charge du projet a fait de gros efforts pour améliorer ses performances et il réussit même à être plus performant que React avec sa nouvelle version Ivy. Angular et React sont eux au coude à coude mais c’est bien Vue qui mène la cadence et est leader dans cette catégorie. Comme il est difficile de quantifier ce critère très précisément, je mettrai une note à base d’emojis :

	React	Vue	Angular
Performance	😐	😍	😐

VI - Quelle est la scalabilité de ces frameworks ?

Difficile de quantifier la performance ? Attendez de voir la scalabilité !

Pour ce critère, l’évaluation se fera subjectivement pour la simple raison qu’il est difficile de le mesurer. Cela relève plus de l’expérience et des retours de la communauté (à travers des articles, de Twitter ou GitHub). Encore une fois, je vais noter avec des emojis :

	React	Vue	Angular
Scalabilité	😰	😐	😍

Pour entrer plus dans le détail, React ne fournit pas de lignes de conduite contrairement à ses concurrents, Angular et Vue, qui, eux, accompagnent plus dans la structure de son projet. En revanche, peu importe le framework, votre projet sera scalable. Mais, en fonction de celui que vous choisissez, il faudra faire un effort plus ou moins important au début du projet pour poser des bases solides.

Petit instant auto-promo, pour poser de bonnes bases sur un nouveau projet React je vous invite à consulter un article j’ai écrit à ce sujet.

VII - Apprentissage de ces différents frameworks

Bon… Vous pensiez en avoir fini avec les critères subjectifs ? Eh bien, non ! Encore une fois, c’est une question d’expérience et d’avis partagé par la communauté. Mais vous avez le droit de ne pas être d’accord… En revanche, voici ce qui ressort sur la difficulté d’apprentissage :

	React	Vue	Angular
Apprentissage	😐	😍	😰

Voici une courbe pour illustrer la courbe d’apprentissage des 3 frameworks :

@ Gardez à l’esprit que : “Qui peut le plus, peut le moins”. Il sera plus simple si vous connaissez Angular de basculer sur React et Vue plutôt que l’inverse !

VIII - Ecosystèmes

J’entends par écosystème toutes les solutions qui gravitent autour des frameworks :

	React	Vue	Angular
CLI	Create-React-App (86,6k)	Vue CLI (27,5k)	Angular CLI (24,3k)
Store	Redux (55.5k)	Vuex (25.9k)	NgRx (6,7k)
Mobile	React-Native (94k)	Vue Native (7,9k)	x
Rendu Serveur (SSR)	Next.js (64,2k)	Nuxt.js (34,4k)	Angular Universal (intégré)
Rendu Statique	Gatsby (49,4k)	VuePress (18,5k)	Scully (2,1k)
Nb paquets NPM	≃68,5k	≃24,5k	≃20k

Entre parenthèses, il s’agit du nombre d’étoiles sur GitHub.

@ Pour Angular, il n’y a pas de librairy dédiée au développement d’applications mobiles natives. Il existe des solutions comme Native Script et IONIC qui permettent de répondre à ce besoin. Cependant, ces librairies ne sont pas réservées à Angular et permettent de développer des applications à l’aide de React ou Vue. C’est pour cela que je ne l’ai pas notée dans le tableau.

On peut en conclure que l’écosystème React est le plus large et de loin… Vue part avec un peu de retard, mais il grossit rapidement et propose des équivalents à la plupart des librairies de l’écosystème React. Si vous choisissez Vue, vous devriez pouvoir trouver un équivalent à une librairy React facilement. Angular semble être à la peine, avec moins d’options pour les différentes sections. Mais ce n’est pas là d’où Angular tire sa force. Il est préféré pour faire de grosses applications d’entreprises, pas pour du rendu statique, serveur ou mobile.

IX - Qui est derrière ces différents frameworks ?

Qui se cache derrière ces différents frameworks ? Dans quel pays l’idée est-elle née ? Est-ce un projet d’entreprise ou de la communauté ? Sous quelle licence ? Tant de mystères que nous allons sans plus tarder élucider :

	React	Vue	Angular
Pays	🇺🇸	🇨🇳	🇺🇸
Fondateur	Facebook	Communauté (Fondateur: Evan You)	Google
Contributeurs	1537	382	1364
Licence	MIT License	MIT License	MIT License

X - Qui utilisent ces frameworks?

Qui sont les grands de ce monde qui utilisent ces frameworks ? En voici quelques uns :

	React	Vue	Angular
Utilisateurs	Facebook, Instagram, Uber, Reddit, Airbnb, Dropbox, etc.	9GAG, Behance, Nintendo, Chess.com, GitLab, Wizzair, etc.	Netflix, Vevo, Paypal, Lego, UpWork, Weather, etc.

XI - Les plus de chacun

Attaquons les particularités de chaque framework. Quels sont les petits plus des uns que les autres n’ont pas ?

Commençons par Angular qui embarque en son sein TypeScript, qui est une surcouche JavaScript afin de la doper avec du typage. Une application React ou Vue peut aussi être développée avec TypeScript, mais cela demandera de la configuration contrairement à Angular. De plus, Angular est très structuré notamment grâce au Modèle MVC. C’est d’ailleurs ce qui lui permet en grande partie d’être scalable.

React est très intéressant dans le sens où il apporte une faible surcouche à JavaScript. C’est idéal pour quelqu’un qui maîtrise JavaScript mais qui souhaite se simplifier la vie. Le gros plus est la flexibilité et la liberté qu’il offre (ce qui peut aussi être sa faiblesse).

Enfin, Vue est idéal pour quelqu’un qui cherche la simplicité, la rapidité de prise en main. Vue a pris le meilleur des deux mondes : Angular et React. Il est structuré selon le Modèle MVVM. Il est très populaire et suscite de plus en plus l’intérêt de la communauté.

XII - Les moins de chacun

Maintenant, qu’en est-il des inconvénients de chacun ? Il suffit de prendre les plus et de les voir sous un autre angle.

Par exemple, React demandera une expérience plus importante en JavaScript, car il s’appuie beaucoup sur les nouveautés du langage (notamment ES6). La liberté implique aussi des responsabilités. En effet, pour s’assurer de la scalabilité du projet, il faudra faire des choix forts au début du projet sur la structure, le nommage, les outils, etc. React, à travers sa documentation, ne guide pas la communauté sur comment faire les choses. C’est au développeur de prendre cette responsabilité ! C'est à la fois sa force et sa faiblesse !

Pour Angular, on peut noter que c’est un framework qui a du mal à suivre ses concurrents sur l’engouement et qui a pris du retard sur les performances (même s’il se rattrape récemment). Il est très bien pour des gros projets, mais il peut être une véritable usine à gaz pour les petits.

Vue, étant plus jeune, possède un écosystème moins important et, malgré l’engouement, peu de gros projets sont sortis avec ce framework.

XIII - et chez Wanadev ?

Chez Wanadev, nous utilisons React et Vue. C’est avant tout une histoire de préférence. Mais les choix se font à l’échelle de chaque projet, en analysant le projet et les équipes qui vont travailler dessus.

XIV - Mon point de vue sur ces différents frameworks

Selon moi, Angular est idéal pour les grosses applications qui vont énormément grossir et où il y a une rotation fréquente des équipes sur le projet. Le client type serait une grosse entreprise qui a besoin de scalabilité, stabilité et structure.

React est mon choix préféré s’il faut en choisir un des 3 pour découvrir le monde des frameworks web. Ce n'est pas le plus simple mais il permet de mieux comprendre les mécanismes d’un framework et ces bases peuvent être transférées facilement vers Vue.

Pour un nouveau projet, je pense qu’un React ou un Vue sont tous les deux des bons choix car ils ont une large communauté et un gros écosystème. Mais selon la rotation d’équipe sur votre projet et le profil type de développeur (junior, senior), il est plus pertinent de partir sur du Vue pour monter rapidement en compétences.

XV - Aller plus loin sur ces 3 frameworks

Pour celles et ceux qui souhaitent apprendre un de ces frameworks, je vous recommande ces cours gratuits parfaits pour débuter :

• React
• Vue
• Angular

Pour aller plus loin, sachez qu’il existe moult frameworks et je vous invite à vous renseigner sur eux si le sujet vous intéresse ou si aucun des 3 frameworks présentés ne vous a convaincus :

• Svelte
• Ember
• Preact
• Polymer
• etc.

XVI - Conclusion

Pour résumer, voici un joli tableau récapitulatif :

	React	Vue	Angular
Origine	🇺🇸	🇨🇳	🇺🇸
Qui est derrière?	Facebook	Communauté	Google
Qui l'utilise?	Facebook, Instagram, Uber, etc.	9GAG, Behance, Nintendo, etc.	Netflix, Vevo, Paypal, etc.
Création	2013	2014	2009
Popularité	😍	😐	😰
Marché du travail	😐	😰	😍
Taille librarie	😐	😍	😰
Performance	😐	😍	😐
Scalabilité	😰	😐	😍
Apprentissage	😐	😍	😰
Ecosystème	😍	😐	😰
Note (/21)	15	16	12

Barème : 😍 = 3 points / 😐 = 2 points / 😰 = 1 point

^ DISCLAIMER : Les notes se basent sur les informations collectées. Certains résultats peuvent être contre intuitifs, notamment au niveau du marché du travail et de la popularité. Mais il faut garder à l’esprit qu’il s’agit de l’état du marché du travail et de la popularité à un instant t. Ces résultats sont donc à prendre avec précaution et ne reflètent pas les tendances actuelles.

@ Il semblerait qu’il n’y ait pas de bon choix mais seulement un choix : le vôtre !

J’espère que cet article vous aidera à vous décider ou bien, pour les curieux, vous donnera un aperçu global sur les différences fondamentales entre ces trois frameworks.

Je vous remercie d’avoir lu jusqu’ici et je serai ravi d'avoir votre retour sur cet article pour m’améliorer. Merci d’avance. 😃

A bientôt !