Angular ou React ?

En bref :

  • Angular pour créer une nouvelle application,
  • React ou un équivalent, pour créer des composants individuels.

Faire un choix rationnel

Choisir le bon framework JavaScript est évidemment crucial pour un projet : il ne sera ensuite plus possible d’en changer, sauf à perdre beaucoup de temps et d’argent. Ce guide va donc être un peu plus long que les autres car il est essentiel.

Malheureusement, c’est le genre de sujet qui déchaîne les passions et où il est difficile d’avoir une discussion rationnelle. C’est pire encore en développement front-end : comme il s’agit d’un domaine récent et qui évolue vite, la plupart des gens sont mal informés. De nombreuses contre-vérités circulent même à grand flot. Je vais tenter de démêler tout cela.

La courbe d’apprentissage

L’essentiel de la comparaison entre les 3 principaux frameworks JavaScript tient dans ce schéma :

Courbe d’apprentissage dans le temps d’Angular, React et Vue

La plupart des gens font leur choix en fonction du début de la courbe, alors que c’est la fin qui est importante. Voyons pourquoi.

Le besoin

Pour être objectif et pertinent, il faut choisir son framework en fonction de ses besoins. Qui ne sont pas les mêmes d’un projet à l’autre. Et non pas en fonction d’effets de mode.

Or très souvent, le besoin lui-même n’est pas compris. Le métier de développeur front-end est arrivé après les autres : la plupart des gens viennent de l’ancien monde des sites web (soit du développement back-end, soit de jQuery). Or une application web change radicalement l’écosystème auquel nous étions habitués pour créer un site web.

En plus des besoins classiques du web (compatibilité, responsive design, ergonomie, performances, sécurité, référencement, accessibilité, etc.), les applications web ont aussi besoin :

  • d’encapsulation des fonctionnalités (c’est le rôle des composants, qui sont l’adaptation pour le front de la Programmation Orientée Objet),
  • de communiquer avec l’API (l’AJAX),
  • de templating (passé du côté back au côté front),
  • de routing (passé du côté back au côté front),
  • de stockage local (pour le hors ligne ou l’embarqué),
  • d’une gestion des erreurs (car contrairement à une animation jQuery, si dans une application il y a la moindre erreur, c’est la catastrophe).

C’est le minimum. Mais à moins de faire une application minuscule avec seulement 2 pages, si vous voulez que votre projet puisse grossir et tenir la route, il vous faudra aussi, entre autres :

  • une architecture solide,
  • des tests.

Angular vs React

Maintenant que les besoins sont posés, regardons comment les 2 principaux frameworks y répondent :

  • React (seul) : seulement les composants et le templating
  • Angular : tout

Pour nous, cela suffit à trancher la question : Angular contient directement tout ce qu’il faut pour faire une application web, avec tous les outils nécessaires installés et configurés automatiquement.

C’est ce qui fait que React et Vue paraissent plus simples : ils vous montrent seulement une partie du tableau. Puis vous allez vous rendre compte que :

  • ah mais il me faut le routing,
  • ah mais mon application plante tout le temps, j’ai besoin d’un outil de gestion des erreurs,
  • ah mais mon application grossit et il n’y a aucune architecture,
  • etc.

Il vous faudra ajouter tout ça, parfois par vous-même, souvent au prix de longues heures de galère de configuration. Comme ce n’était pas prévu pour ça à la base, vous en arrivez à des usines à gaz comme Redux. A la fin, React sera devenu plus difficile qu’Angular.

C’est même de la publicité mensongère. Exemple typique : Angular impose TypeScript, tandis que c’est facultatif dans React. Mais devinez quoi : Facebook utilise React avec un équivalent de TypeScript, car c’est un impératif pour créer une application viable (que cela plaise ou non).

Angular a le mérite d’être honnête, en incluant tout ce dont vous aurez besoin. Cela paraît donc plus compliqué au départ, car plus dense, mais une fois passé le cap, l’architecture permettra de faire évoluer et grossir le projet facilement.

En conclusion :

Les contre-vérités

« React et Vue sont plus simples et rapides à mettre en place qu’Angular. »

Nous venons déjà de voir que ce n’est qu’une apparence. Je vous en fait la démonstration sur Medium (en Anglais), en créant une Progressive Web App avec Angular en seulement 10 minutes.

Mais c’est doublement faux : ce n’est pas parce qu’Angular contient tout ce qu’il faut que vous êtes obligé·e de vous servir de tout dès le début. Vous pouvez très bien n’utilisez d’abord que les composants et le routing, comme dans React.

« Avec Angular, il faut tout faire à la sauce Angular. »

C’est faux. Il est tout à fait possible dans Angular d’utiliser seulement le strict minimum (composants + routing) et de gérer par exemple l’AJAX avec une autre librairie.

Mais personne ne le fait, car cela n’a aucun intérêt ! C’est évidemment plus simple et plus puissant via le framework. D’ailleurs, personne ne le fait non plus avec React et Vue : au final, dans la réalité, tout le monde utilise à peu près les mêmes outils.

« React et Vue sont plus flexibles. »

C’est le même argument que le précédent, mais formulé différemment. En plus d’être faux, ça n’a aucun sens : c’est le rôle d’un framework d’automatiser tout ce qui est possible, pour vous simplifier la vie. La « flexibilité », pour quoi faire ? Quel intérêt ? Risquer de choisir un outil qui ne sera ensuite plus maintenu ? Perdre des heures voire des journées sur des détails techniques de pure configuration ?

La « flexibilité » est un argument que l’on entend seulement dans le domaine du front-end ; côté back-end, il ferait rire. Il vient du fait que beaucoup de développeurs venant de l’ancien monde JavaScript (coucou jQuery) ont dû mal à accepter que le front-end s’est complexifié et nécessite donc beaucoup plus d’outils qu’avant (cf. les besoins évoqués ci-dessus).

« React et Vue sont plus performants. »

Une autre contre-vérité qui circule est qu’Angular est plus lourd (et donc moins performant) que React ou Vue. C’est faux. Une fois tous les outils ajoutés pour gérer tous les besoins mentionnés ci-dessus, cela se vaudra d’un framework à l’autre.

Les performances ne résultent pas seulement du poids initial de l’outil. Chaque framework fait un travail énorme d’optimisations très pointues, les performances ne sont donc pas un bon critère de choix.

« React et Vue sont plus stables. »

Toujours faux. Cette idée résulte juste d’une erreur de communication de la part d’Angular, que je vous explique ici. Angular a même répondu à cette fausse inquiétude avec un outil d’automatisation des mises à jour.

Compétences

Pour les développeurs Java, C#, Symfony ou équivalent, c’est le jour et la nuit entre Angular et React. React vous paraîtra être du code spaghetti (la raison pour laquelle vous vous êtes tenu·e à l’écart du JavaScript pendant toutes ces années), alors que vous allez être surpris·e de constater à quel point Angular, grâce à TypeScript, est très proche de ce que vous avez l’habitude de faire.

C’est un critère de choix également très important, car vous aurez tout le mal du monde à recruter des experts JavaScript. Cela sera moins compliqué si vous pouvez plutôt transformer des développeurs back en développeurs front.

Découvrez la formation Angular.