Angular vs React. Ou est-ce que la nouvelle Angular est vraiment de la merde?

Salut à tous,

Je veux parler des frameworks JavaScript les plus populaires. À mon avis, il existe de nombreux articles de comparaison inutiles. Bien qu'ils contiennent des informations vraiment intéressantes, ils ne sont pas vraiment utilisés.

Beaucoup de gens disent que vous ne pouvez pas les comparer car Angular est un framework et React est une bibliothèque. De l'autre côté, la plupart des développeurs (ceux que je connais) ajoutent des bibliothèques et en font un framework complet.

Attendez, peut-être quelque chose d'autre?

Je suis vraiment curieux de connaître Angular et je le choisirais pour les applications petites et moyennes, mais pour les très grandes applications, je le ferais sans aucun doute avec React. Mais il y a beaucoup d'autres options. Et certains d’entre eux se débrouillent vraiment bien, par exemple VueJS ou EmberJs ont l’air très bien. Mais je pense que le principal avantage concurrentiel d’Angular et de React est la communauté des développeurs. JQuery est la seule bibliothèque capable de suivre leur popularité, mais ne considérons pas jQuery comme un concurrent de ces deux-là.

Alors commençons. Quel est le meilleur, angulaire ou réactif?

Gestion d'état

Je pense que la plus grande différence entre Angular et React est la gestion par l’état. Angular est livré avec la liaison de données fournie alors que React ne peut généralement pas vivre longtemps sans Redux, qui fournit un flux de données unidirectionnel et fonctionne avec des données immuables. Cela amène de nombreuses discussions, lequel est le meilleur? Liaison de données ou liaison immuable / unidirectionnelle? Cela dépend sûrement de nombreux aspects.

Templating

Je pense que cela vaut vraiment la peine de mentionner la facilité avec laquelle Angular fonctionne avec les modèles. Disposant d’une interface utilisateur simple pour vos données, Angular vous permet d’obtenir le résultat souhaité avec une approche plus logique de l’interface utilisateur, qui demande moins de code et semble plus évidente.

React nécessite des fonctions pour gérer la représentation des données. Cela signifie que vous devez définir le mode d'affichage de vos données avant leur insertion dans le DOM.

Tailles et performances

Comme nous le savons, la taille du fichier angulaire est beaucoup plus grande que celle de Reacts.

Angulaire 2 + Rx = 766K
React 0.14.5 + React DOM + Redux = 139K

Versions gzippées

Angulaire 2 + Rx = 143 K
React 0.14.5 + React DOM + Redux = 42K

Mais lorsque vous commencez à inclure de nombreuses bibliothèques tierces avec React, la taille du paquet tend également à augmenter assez rapidement.

Les performances angulaires 2 peuvent poser certains problèmes pour les très grandes applications, car elles créent un observateur pour chaque liaison afin de suivre toutes les modifications apportées au DOM.

De son côté, React a donné vie au concept de DOM virtuel. Chaque fois que des données sous-jacentes changent dans une application React, une nouvelle représentation Virtual DOM de l'interface utilisateur est créée. En d'autres termes, chaque fois qu'un utilisateur interagit avec le site Web, React crée un nouveau DOM virtuel. C'est pourquoi les performances de React sont stables en ce qui concerne beaucoup de données car il n'y a aucun observateur.

CLI

Les cadres modernes ont tendance à avoir un outil CLI. La CLI d’Angular se porte plutôt bien et fait gagner beaucoup de temps. Grâce à Angular-cli et à sa conception, Angular est facile à adapter. De son côté, React a son propre CLI, introduit récemment, qui n’est pas très utilisé.

Débogage

Il est intéressant de voir comment chacun d’entre eux gère le débogage. Le débogage à l’exécution angulaire 2 tend à vous donner moins d’informations que React et le débogage au moment de la compilation.

TypeScript et Flow

TypeScript et Flow sont des outils similaires qui se concentrent sur le même problème: le manque de types statiques de JavaScript. En fin de compte, ils existent tous les deux pour vous aider à écrire le code correct. TypeScript et Flow offrent tous deux des fonctionnalités de typage statique progressives. Ils utilisent également une syntaxe similaire pour les annotations de types et les fichiers de déclaration.

Si vous travaillez avec Angular, vous préférerez peut-être TypeScript, car il s’agit du langage dominant utilisé par la communauté Angular. Par contre, si vous utilisez React, vous préférerez peut-être Flow car il s’intègre facilement à Babel et à d’autres infrastructures que vous avez probablement déjà mises en place.

Beaucoup de développeurs (surtout React) ont peur de TypeScript. Il n'y a rien à craindre. Ce ne sont que des types ES6 +. ES6 est un code TypeScript valide. Il a été fortement influencé par Java et .NET. Par conséquent, si un développeur possède une formation dans l’un de ces langages, il est probable que TypeScript sera plus facile à apprendre que le simple JavaScript.

Processus d'apprentissage

Dans Angular, il y a plus de choses à apprendre que dans React. D'autre part, vous devez en apprendre beaucoup sur les meilleures pratiques de React, car il existe de nombreuses façons de faire la même chose ou de mal tourner.

Réputation angulaire et quelle version angulaire devriez-vous utiliser?

Je sais que Angular est traité de manière injuste par la communauté JavaScript. Beaucoup de gens expriment leur mécontentement. En fait, il y a quelques raisons à cela, mais je pense que Angular 4 a résolu beaucoup de problèmes. Il y avait un immense changement de la AngularJS originale à la nouvelle Angular. Les performances et la conception ont été considérablement améliorées dans Angular 2.0 par rapport à Angular 1 (à mon avis, vous ne devriez utiliser Angular 1 que si vous êtes un expert et que vous avez des délais serrés). Je pense que c’est un cadre très productif qui pourrait être beaucoup plus efficace s’il n’y avait pas autant de versions, autant de changements. J'ai eu la chance de changer la version d'Angular de la version candidate 5 à la version 6, puis à la version finale. Cela signifiait presque réécrire l’ensemble des applications. Mais maintenant, Angular 4 semble vraiment stable et fiable.

Conclusion

Alors, la nouvelle Angular est-elle vraiment de la merde?

Non, c’est pas ça.

Voici ma liste des utilisations de Angular-React.

Si vous aimez les modèles, utilisez Angular.
Pour les grosses équipes et les grands projets, React sera une meilleure solution car elle vous permettra de réutiliser des composants avec moins de code et un prototypage plus rapide.
Si vous n’aimez pas passer beaucoup de temps à l’installation, utilisez Angular.
Pour les experts et les passionnés du JS, React sera plus facile à maîtriser.
Mieux vaut essayer les deux :)