Angular VS React

React.js et Angular sont les deux moyens les plus populaires pour écrire une application web moderne. Par conséquent, les comparer n’est pas une tâche facile. Cet article a pour objectif de fournir une vue d’ensemble comparative entre React et Angular 5.

Pour commencer, nous allons donc corriger certaines (fausses) idées reçues afin de vous aider à prendre la bonne décision quant au choix d’utilisation de l’une de ces deux technologies. Ensuite, nous vous donnerons quelques critères importants permettant de sélectionner la solution la plus adaptée à votre projet.

Avant de commencer

Il est difficile de comparer React.js avec Angular. La raison est simple: React est une bibliothèque JavaScript pour la construction d’interfaces utilisateur, tandis qu’Angular est un framework tout-en-un.

Je vais vous donner une analogie que j’avais lu et appréciée (si vous avez un historique java) : React pour Angular est l’équivalent d’Hibernate pour Spring. Spring est un framework complet. Toutefois, vous avez toujours la possibilité d’utiliser Hibernate comme une bibliothèque ORM ou le mappage relationnel d’objet Spring pour la couche ORM.

Dans notre cas, nous parlons des parties du modèle MVC (Model View Controller) montrées dans le schéma ci-dessous. En fait, React ne couvre que la partie vue, vous aurez donc besoin d’utiliser d’autres librairies comme Redux et Flux en tant que contrôleur ou react-router pour la navigation, alors qu’Angular couvre tout le modèle MVC. Il est livré avec des outils complets ainsi que des fonctionnalités telles que la liaison de données, la détection des changements, les formulaires, le routage, la navigation, l’implémentation http et beaucoup d’autres. Cependant, la plupart des gens essaient de ne pas combiner les deux technologies et ont tendance à utiliser Angular seulement ou React pour la vue et gérer le reste avec les bibliothèques correspondantes. C’est pourquoi il n’est pas possible de comparer directement les deux technologies.

A l’heure où j’écris ces lignes, Angular 5 vient d’être annoncé cinq mois auparavant avec un ensemble de mises à jour très intéressantes qui ont boosté les performances du framework comme l’ajout de Enhanced RxJS (observables), Build Optimizer, améliorations du compilateur, remplacement du ReflectiveInjector par StaticInjector, exportAs, client HTTP… Pour en savoir plus sur ces fonctionnalités, vous pouvez consulter mon article Angular 5. Cependant, React.js reste jusqu’à présent l’une des principales bibliothèques concurrentes d’Angular. Personne ne peut nier la taille de la communauté React et combien sont amoureux de la technologie les gens qui la composent.

Commençons donc notre comparaison!

Avant d’aborder l’architecture et les techniques des deux technologies, examinons leur adoption par la communauté. Nous allons commencer par comparer leur popularité au cours de ces deux dernières années via Google Trends avec différents termes liés à Angular et React.

Comme vous pouvez le constater à partir du tableau ci-dessus, les popularités de React et Angular sont en net augmentation. Cependant, sur la première année, Angular semble avoir bien plus séduit les internautes que React, mais ce dernier s’est au fur et à mesure rattrapé, pour finalement dépasser Angular.

Maintenant, regardons quelques autres statistiques: Sur Github, Angular dispose au moment de l’écriture de cet article de 35 742 étoiles et 624 contributeurs, tandis que React compte près de 94 845 étoiles et 1177 contributeurs. Nous pouvons également vérifier l’historique des étoiles Github pour les deux technologies, comme le montre le graphique ci-dessous. React semble être très apprécié avec une moyenne de 58 étoiles par jour alors qu’Angular gagne 22 étoiles par jour en moyenne:

Nous pouvons enfin vérifier les tendances de npm qui montrent le nombre de téléchargements pour les paquets npm listés ; selon moi, cela semble être encore plus significatif que les autres statistiques. Nous nous rendons compte que React « gagne » à nouveau comme l’indique le tableau ci-dessous :

Maintenant, comparons les avantages et les inconvénients de chaque outil:

A propos d’Angular :

AngularJS est un framework complet avec un code open source. Les avantages de Angular 5 comprennent:

• Le modèle MVVM en tant que base: Toutes les versions d’Angular sont basées sur le modèle MVVM (Model-View-ViewModel) qui, en commençant par la version 2+, permet de séparer la logique de l’application de sa vue dans l’interface utilisateur. Cela signifie que nous obtenons une solution modulaire qui peut être travaillée par plusieurs équipes de développeurs utilisant les mêmes données.
• Two-way data binding: Il fournit un comportement singulier pour votre application (React ne prend en charge que le one-way binding). L’implémentation de dépendances aide la singularité à se séparer des classes et les risques d’erreur peuvent être minimisés. De cette façon, dans cet aspect de la compétition entre Angular 5 et React.js, c’est Angular qui l’emporte.
• Documentation détaillée et utile:  Contrairement à la documentation d’Angular 2, Angular 5 fournit une documentation très détaillée avec des exemples de cas bien expliqués et bien discutés. Malgré le fait que le processus d’apprentissage soit plus long, vous serez en mesure de l’étudier par vous-même en utilisant uniquement la documentation officielle.
• Nouvelles fonctionnalités utiles: Les nouvelles fonctionnalités qui peuvent aider à améliorer l’expérience de création de logiciels incluent: enhanced RxJS, compilation plus rapide (en moins de 3 secondes), nouveau lanceur HttpClient, etc. Vous pouvez en savoir plus sur les différences entre Angular 4 et Angular 5 ici.

Regardons maintenant les inconvénients que l’on peut trouver à AngularJS.

• Syntaxe complexe: La syntaxe est assez difficile à maîtriser pour les débutants. Bien qu’il serait juste de noter que la 5^ème version de ce framework utilise TypeScript 2.4 qui est l’édition de TypeScript la plus simple à étudier.
• Difficultés de migration d’une version à l’autre d’Angular: Dans le cas où une partie de votre application aurait été écrite avec les versions antérieures d’Angular, soyez préparé à certaines difficultés lors de la migration vers une éventuelle mise à jour. Nous constatons surtout des difficultés de passage d’AngularJS vers Angular 2. De grands changements ont été réalisés qui rendent très difficile la migration d’une application AngularJS vers Angular. D’un autre côté, même si nous n’avons pas ce problème dans les dernières versions (2,4,5 et 6), nous faisons face à un autre problème de maintenabilité qui est la courte période entre deux versions.

A propos de React :

Voyons quelques-uns des avantages de React.js :

• React.js est très rapide: React.js crée son propre DOM virtuel où vos composants sont attachés. Cette approche vous donne une flexibilité et des performances exceptionnelles, car React.js calcule quel changement dans le DOM doit être fait, et change juste la partie qui doit être mise à jour. De cette façon, React.js évite des opérations coûteuses dans le DOM.
• Basé sur le concept de bibliothèque: Les développeurs peuvent choisir des moyens totalement différents de réaliser des composants dans l’interface utilisateur sans avoir à se limiter aux seules choses proposées par React. De plus, le fait que React.js soit basé sur la vue permet aux programmeurs de ne pas perdre de temps à décrire chaque correspondances relationnelles et permet de se concentrer principalement sur le mécanisme de transfert de données. À son tour, Angular est incapable de démontrer une telle flexibilité car il utilise les modèles MVVM qui fonctionnent avec le two-way binding.
• Communauté impressionnante :React a très vite gagné en popularité depuis sa création. Il a initialement été créé par Facebook pour maintenir et développer son application frontale, mais a finalement été ouvert à la communauté qui s’est montré très favorable notamment grâce à l’extensibilité de la bibliotèque. Chacun peut créer et publier son propre composant ou contribuer aux projets principaux tels que React ou Redux. Aujourd’hui, le référentiel de code de React est environ 3 fois plus populaire que celui d’Angular. React remporte clairement la manche quand il s’agit du soutien de la communauté.

Maintenant, voyons ses inconvénients:

React.js n’est pas un framework: Cela signifie que pendant le processus de développement, vous devrez peut-être faire appel à d’autres outils ou bibliothèques. Vous aurez certainement besoin de plus de temps pour construire une application complète.

Conclusion

En résumé, Angular 5 et React bénéficient chacun d’un grand soutien de leur communauté et d’une bonne documentation. Même s’ils ont des philosophies différentes sur la façon dont un développement d’application doit être abordé, il y a une place pour les deux dans le monde du développement logiciel.

Par conséquent, terminons notre article entre Angular 5 et React.js. Considérant toutes les caractéristiques mentionnées ci-dessus, nous pouvons dire que tout dépend du besoin et de la vision du projet. En fait, vous devriez:

Choisir React.js si dans votre projet si:

• Vous allez étendre considérablement les fonctionnalités de votre application dans le futur
• Vous avez beaucoup de contenu dynamique qui change vos vues ou avez besoin d’une application qui mettra à jour la vue simultanément et constamment
• Vous êtes d’accord avec une phase initiale de développement un peu plus lente

Choisir Angular si dans votre projet si:

• Vous en êtes au début du développement. Vous voulez commencer le développement d’une application et avez besoin d’un framework complet qui vous permettra de démarrer rapidement.
• Vous cherchez un framework robuste et bien maintenu pour un projet de toute taille

En bref, si vous recherchez la flexibilité et la simplicité, il vaut mieux utiliser React.js. Mais d’un autre côté, si vous avez besoin du moyen le plus efficace pour organiser et booster votre application avec un outil complet, Angular 5 reste votre meilleure solution.