La comparaison ultime des frameworks JavaScript : Angular vs React

Une question que l’on me pose presque quotidiennement est la suivante: dois-je commencer par ReactJS ou Angular? Cependant, avant d’aller plus loin, permettez-moi de vous donner un avertissement.

Ce n’est pas un blog où je vais dénigrer l’un ou l’autre ou dire que vous devriez toujours utiliser l’un plutôt que l’autre. Chaque développeur et chaque projet sont complètement différents et ils ont un ensemble d’exigences différent, donc dire que vous devez toujours utiliser ReactJS ou toujours utiliser Angular est sacrément stupide.

L’argument logique

Vous pouvez dire que Angular est un framework et que React est techniquement une bibliothèque en soi. Je ne nie pas ce fait, mais c’est l’argument dans lequel je ne veux pas entrer maintenant. Il existe des packages que vous pouvez ajouter à React qui le transformeront en un framework qui concurrence directement Angular. Nous comparons les deux écosystèmes, pas le cadre exact par rapport à la bibliothèque exacte.

La courbe d’apprentissage

Commençons par Angular. Encore un autre avertissement: quand je dis Angular, je parle d’Angular 4 et non d’AngularJS.

Angular est un grand framework, ce qui signifie qu’il est puissant et qu’il comprend beaucoup de choses. Il y a beaucoup à apprendre. Vous allez entendre beaucoup de nouveau vocabulaire intimidant comme l’injection de dépendances, les décorateurs de directives, les tuyaux, etc. Ensuite, vous devrez faire face à Typescript, qui est JavaScript plus un tas d’autres fonctionnalités, y compris le typage statique.

Angular est plus opiniâtre que React, ce qui est l’un des avantages à mon avis car avec React, vous pouvez faire la même chose d’un million de façons différentes. Avec Angular, il y a généralement une ou deux façons de faire certaines choses, ce qui facilite le suivi, vous donne des instructions beaucoup plus claires sur ce que vous êtes censé faire.

Mais là encore, cela revient à la préférence. Vous aimerez peut-être la possibilité de faire les choses de différentes manières. Comme je l’ai mentionné, ReactJS est une bibliothèque si nous ne parlons que de la bibliothèque principale, elle est beaucoup plus petite et beaucoup plus facile à apprendre que le framework Angular. Vous pouvez dire que vous apprendrez React en moins de temps. React est une excellente bibliothèque de vues en soi, mais elle n’est même pas aussi puissante pour les grandes applications. Si vous voulez du routage, de la validation, des requêtes HTTP dans React, vous devrez installer d’autres packages et cela ajoute à la courbe d’apprentissage.

Si vous regardez le code React de deux développeurs différents, ils auront probablement un aspect complètement différent, qu’ils fassent des requêtes HTTP ou qu’ils gèrent l’état et les propriétés. Tout cela peut être géré très différemment et souvent dans le mauvais sens.

Vous trouvez les meilleures pratiques et tous les problèmes disparaissent, mais cela ajoute à la courbe d’apprentissage.

Contrairement à Angular React, il n’utilise pas de modèles. Il utilise quelque chose appelé extension JSX ou JavaScript ou extension de syntaxe JavaScript, qui nous permet d’intégrer du HTML dans le JavaScript. Au début, cela peut sembler un peu bizarre. Surtout, quand on vous a probablement appris à séparer votre balisage et votre JavaScript.

Pensez-y comme si vous mettiez du HTML dans JavaScript avec quelques modifications différentes : vous ne pouvez pas utiliser l’attribut class et vous devez utiliser le nom de la classe.

Enfin, nous avons Redux. React est souvent utilisé avec Redux ou Flux qui sont des gestionnaires d’état au niveau des applications. À mon avis, Redux est en train de déchirer, il suffit de le configurer et d’en apprendre les concepts est difficile.

Je pense que c’est abusé. Je pense que beaucoup de développeurs utilisent redux là où ce n’est pas nécessaire. Vous n’en avez pas besoin pour les petites applications, mais de nombreux développeurs insistent pour l’utiliser. Cela revient encore une fois à la préférence. Redux est très puissant, je ne veux pas l’enlever. Quand on parle de la courbe d’apprentissage, c’est sacrément difficile à saisir.

Fonctionnalités	Réagir	Angulaire
Langage de programmation	Javascript	Manuscrit
Structure des codes	Dogmatique	Flexible
Bibliothèque principale	Petit	Très grand
Modèles	JSX	HTML
Compétence	Petites applications	Applications à grande échelle

Gagnant : C’est une égalité

Performance

Il n’est pas juste de comparer directement les performances d’Angular à React. Angular est un framework complet d’avant en arrière, il comprend le routage, les outils de formulaire, la bibliothèque HTTP, les extensions réactives, etc. Toutes ces fonctionnalités gonflent le framework et le ralentissent. Cependant, React n’est en soi qu’une bibliothèque de vues, qui est beaucoup plus petite et plus rapide.

Une fois que vous commencez à ajouter des packages comme le routeur, le client HTTP ou tout ce que vous allez ajouter à votre application React, cela commence à apparaître un peu plus là où se trouve Angular et vous pouvez alors commencer à les comparer équitablement, mais même après cela, React toujours remporte le département performance. C’est une technologie très rapide en général.

Le passage d’Angular 2 à Angular 4 sous le capot, ils ont fait beaucoup pour augmenter les performances. Angular 4 est plus performant que Angular 2. Néanmoins, React gagne toujours dans le département des performances.

Angulaire vs React. Source: Academy.com

Gagnant : Réagissez

Fonctionnalités

Les deux frameworks ont beaucoup des mêmes fonctionnalités et avantages généraux : ils organisent votre code, ils sont basés sur des composants, ils offrent un balisage dynamique, etc. Ils sont utilisés pour faire beaucoup de choses identiques, et ils partagent un beaucoup des mêmes fonctionnalités.

Fonctionnalités	AngularJS	Réagir
Date de lancement	2009	2013
Langue	TypeScript, JavaScript	Javascript
Part de marché	0,3 %	<0,1 %
Modèle	Oui	Non
Voir	Oui	Oui
Manette	Oui	Non
Courbe d’apprentissage	Complexe	Facile
Modèles	Oui	Non
Échec	Durée	Compilation
Rendu côté service	Non	Oui
DOM	Oui	Virtuel
Assistance mobile	Oui	Oui
Rendu côté service	Non	Oui

Nous examinerons certaines des caractéristiques individuelles. Angular a évidemment beaucoup plus de fonctionnalités que React en son cœur. Permettez-moi de vous rappeler que nous parlons de deux écosystèmes et de packages communs utilisés avec React.

Angular est un framework tout compris. Il est livré avec un routeur de composants, des extensions réactives pour les observables, un client HTTP, un module de formulaire pour la validation et la liste continue. De plus, il offre une liaison de données bidirectionnelle d’une manière qu’aucun autre framework ne fait vraiment. La liaison des données de la vue au modèle est extrêmement facile à l’aide de la directive de modèle ng.

Angular prend également en charge MVC (contrôleur Model View) ou au moins différents aspects de ce modèle de conception. il est également livré avec des fonctionnalités qui vous permettent d’implémenter facilement des tests: à la fois les tests unitaires et les tests de bout en bout. Angular regorge de fonctionnalités permettant de créer des applications frontales de niveau entreprise. React, d’autre part, n’inclut pas grand-chose à la base. Cependant, des éléments peuvent être ajoutés pour lui donner les fonctionnalités qu’Angular inclut prêtes à l’emploi, ainsi que quelques fonctionnalités supplémentaires.

React utilise un DOM virtuel qui est très puissant. Il crée sa propre version allégée du Dom réel et n’inclut et ne met à jour que ce qui est nécessaire plutôt que de rafraîchir le tout. Le DOM virtuel est l’une des principales raisons pour lesquelles React est incroyablement rapide.

React utilise JSX qui est plus puissant que les modèles standard car vous pouvez y mettre absolument n’importe quel type de JavaScript que vous voulez. JSX n’est pas nécessaire pour utiliser React, mais cela rend les choses beaucoup plus faciles. Je ne vois aucune raison pour laquelle vous n’utiliseriez pas JSX avec Angular aussi. React fait également un très bon travail de gestion de l’état et des propriétés des composants. Cela rend les données très faciles à utiliser et à transmettre entre les composants. Passer des données entre composants, Angular est beaucoup plus difficile que de le faire dans React.

Core React est difficile à maintenir au niveau de l’application. L’état des composants est facile, mais si vous voulez une véritable gestion de l’état au niveau de l’application, vous aurez besoin de Redux ou de Flux, ce que j’ai déjà dit est assez déroutant à apprendre. Les packages externes qui sont souvent utilisés comme le nouveau routeur React version 4 sont un peu difficiles à saisir mais ils sont également très puissants une fois qu’ils ont appris à les exécuter et à les configurer. Il existe également de nombreuses façons de l’utiliser. React n’a pas de composant HTTP principal comme Angular, mais vous pouvez utiliser Fetch ou Axios, qui est un client HTTP externe, puis Enzyme est populaire pour attester React. Certains des différents packages sont couramment utilisés avec React, même s’ils ne font pas partie de la bibliothèque actuelle.

Bien que les deux technologies partagent un bon nombre de fonctionnalités, si vous ne faites que comparer les technologies de base, Angular est le gagnant.

Gagnant: angulaire

Outillage

Angular et React ont de très belles interfaces de ligne de commande. La CLI angulaire et l’application Create React sont toutes les deux très bonnes et elles nous permettent vraiment de rationaliser le développement. La CLI angulaire est un peu plus puissante car nous pouvons générer rapidement des éléments tels que des composants et des services. Create React ne peut pas faire ça. Vous devez tout créer vous-même en ce qui concerne les fichiers et la structure de base. Les deux systèmes utilisent un pack Web, ont leurs propres serveurs de développement à chargement automatique et disposent d’outils de compilation et de construction. De toute évidence, Angular a la tâche supplémentaire de transpiler Typescript. La CLI a un script pour cela lorsque nous exécutons ng serve. Tout ce qui s’est passé dans les coulisses. Il utilise quelque chose appelé TSC ou Typescript Compiler pour cela et les deux ont également des outils de test.

Fonctionnalités	Angulaire	Réagir
Interface de ligne de commande	CLI angulaire	Créer Réagir
Des tâches supplémentaires	Transpilation dactylographiée	Aucun
Essai	Jasmin & Karma	Est

S’il s’agit d’une application complète, elles sont donc très importantes. Vous n’avez pas besoin de les utiliser. Vous pouvez créer une application React à partir de zéro avec le pack Web. Celles-ci facilitent non seulement la création de l’application, mais également sa compilation et sa création pour la production.

Ils sont tous les deux assez même dans ce département.

Gagnant: angulaire

Écosystème

Comme je l’ai dit, ces deux technologies ont leurs propres écosystèmes qui s’étendent désormais bien au-delà du navigateur Web.

Ionic est un framework hybride populaire qui est une application angulaire qui s’exécute dans un wrapper natif pour les applications mobiles. Vous pouvez créer des applications mobiles à l’aide d’Angular. Les applications hybrides peuvent être un peu maladroites par rapport aux applications natives. L’expérience utilisateur peut parfois être moins bonne, moins rapide et réactive. Parmi les différents frameworks hybrides, Ionic 3 est le meilleur. Il existe également NativeScript, qui nous permet de créer de véritables applications natives iOS et Android avec Angular ainsi que JavaScript.

Fonctionnalités	Angulaire	Réagir
Développement d’applications hybrides	Ionique	*Non requis
Développement d’applications natives	NativeScript	Réagir natif
Rendu côté serveur	Universel angulaire	CE
Bibliothèque de gestion d’état	Boutique NgRx	Reax Redux, MobX
Bibliothèque d’interface utilisateur de matériaux	Matériau angulaire	Matériel-UI
Réalité virtuelle	RV réactive	CE

Néanmoins, NativeScript ne semble pas être aussi bon que React Native de Facebook, du moins à ce stade. Angular possède également une bibliothèque de composants de conception de matériaux si vous êtes un fan de la conception de matériaux. Angular Universal est un projet de départ qui peut être utilisé pour rendre Angular côté serveur. Il y a aussi NgRx store qui est une bibliothèque de gestion d’état inspirée de Reax redux. Il est basé sur l’état muté par les réducteurs pairs. Il a également une intégration avec les extensions réactives.

Vous auriez remarqué. Une fois, l’un d’eux fait quelque chose que l’autre copie d’une manière différente. React et Angular sont devenus Microsoft et Apple des frameworks JavaScript.

React a tout un écosystème. Il a React natif qui est populaire. C’est le meilleur moyen de créer des applications mobiles avec les technologies Web. React Native est rapide et de nombreuses applications, si elles sont bien conçues, sont à la hauteur des applications natives construites sur Swift ou Java. React a une bibliothèque de conception de matériaux appelée Material-UI qui ressemble beaucoup au composant de conception de matériaux d’Angular mais plus mature. JS est un framework pour le rendu des applications React côté serveur. Il vise à le faire de la manière la plus simple possible afin que cela puisse être comparé à Angular Universal. MobX est une autre façon de gérer l’état. Cela fonctionne un peu différemment de redux. Il fournit un ensemble de décorateurs pour définir les observables et les observateurs et il introduit la logique réactive dans votre état.

Storybook est un environnement de développement pour React. Il vous permet de parcourir une bibliothèque de composants, d’afficher différents états de chaque composant et de développer et tester des composants de manière interactive. Reactive VR fait entrer React dans la réalité virtuelle. React desktop est une bibliothèque JavaScript construite au-dessus de la bibliothèque Reacts qui est censée apporter une expérience de bureau native sur le Web, avec de nombreux composants macOS et Windows 10. L’écosystème React est extrêmement vaste et puissant. React fait son chemin dans tous les aspects de la technologie et c’est clairement un gagnant.

Gagnant : Réagissez

Les gens en costume-cravate utilisent Angular et les hipsters à la barbe débraillée utilisent React.

	AngularJS	Réagir
Principaux développeurs	Google	Facebook+Instagram
Âge	6 ans	2 ans
Extensibilité	Oui	Oui
La rapidité*	1,35 seconde	310 millisecondes
DOM	Navigateur	Virtuel; ne restitue que les données modifiées avec un mécanisme de correction
Architecture	Cadre MVC complet	Juste le composant de vue
Courbe d’apprentissage	Difficile au début; nécessite la connaissance de concepts spécifiques tels que les directives DOM, les filtres et les usines.	Plus facile à démarrer ; contient une API et une syntaxe simplifiées
Structure et composants	HTML, JS et CSS	Même; mais peut intégrer HTML avec JS, en utilisant JSX

Conclusion: C’est une égalité

Si vous hésitez entre ces cadres, regardez les différentes catégories et voyez ce qui vous intéresse. Essayez-les tous les deux et voyez lequel vous choisissez le plus rapidement. Faites plus de recherches que ce blog. Vous n’obtiendrez jamais toutes les informations dont vous avez besoin sur un seul blog, alors lisez-en un peu plus.

Si vous envisagez un écosystème plus large qui inclut le développement d’applications mobiles natives, choisissez React sans réfléchir à deux fois. Si vous recherchez des fonctionnalités, Angular est énorme. Il y a plus de fonctionnalités que vous n’en avez besoin.