\n 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.\n<\/p>\n
\n Ce n’est pas un blog o\u00f9 je vais d\u00e9nigrer l’un ou l’autre ou dire que vous devriez toujours utiliser l’un plut\u00f4t que l’autre. Chaque d\u00e9veloppeur et chaque projet sont compl\u00e8tement diff\u00e9rents et ils ont un ensemble d’exigences diff\u00e9rent, donc dire que vous devez toujours utiliser ReactJS ou toujours utiliser Angular est sacr\u00e9ment stupide.\n<\/p>\n
\n Vous pouvez dire que Angular est un framework et que React est techniquement une biblioth\u00e8que 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 \u00e0 React qui le transformeront en un framework qui concurrence directement Angular. Nous comparons les deux \u00e9cosyst\u00e8mes, pas le cadre exact par rapport \u00e0 la biblioth\u00e8que exacte.\n<\/p>\n
\n Commen\u00e7ons par Angular. Encore un autre avertissement: quand je dis Angular, je parle d’Angular 4 et non d’AngularJS.\n<\/p>\n
\n Angular est un grand framework, ce qui signifie qu’il est puissant et qu’il comprend beaucoup de choses. Il y a beaucoup \u00e0 apprendre. Vous allez entendre beaucoup de nouveau vocabulaire intimidant comme l’injection de d\u00e9pendances, les d\u00e9corateurs de directives, les tuyaux, etc. Ensuite, vous devrez faire face \u00e0 Typescript, qui est JavaScript plus un tas d’autres fonctionnalit\u00e9s, y compris le typage statique.\n<\/p>\n
\n Angular est plus opini\u00e2tre que React, ce qui est l’un des avantages \u00e0 mon avis car avec React, vous pouvez faire la m\u00eame chose d’un million de fa\u00e7ons diff\u00e9rentes. Avec Angular, il y a g\u00e9n\u00e9ralement une ou deux fa\u00e7ons de faire certaines choses, ce qui facilite le suivi, vous donne des instructions beaucoup plus claires sur ce que vous \u00eates cens\u00e9 faire.\n<\/p>\n
\n Mais l\u00e0 encore, cela revient \u00e0 la pr\u00e9f\u00e9rence. Vous aimerez peut-\u00eatre la possibilit\u00e9 de faire les choses de diff\u00e9rentes mani\u00e8res. Comme je l’ai mentionn\u00e9, ReactJS est une biblioth\u00e8que si nous ne parlons que de la biblioth\u00e8que principale, elle est beaucoup plus petite et beaucoup plus facile \u00e0 apprendre que le framework Angular. Vous pouvez dire que vous apprendrez React en moins de temps. React est une excellente biblioth\u00e8que de vues en soi, mais elle n’est m\u00eame pas aussi puissante pour les grandes applications. Si vous voulez du routage, de la validation, des requ\u00eates HTTP dans React, vous devrez installer d’autres packages et cela ajoute \u00e0 la courbe d’apprentissage.\n<\/p>\n
\n Si vous regardez le code React de deux d\u00e9veloppeurs diff\u00e9rents, ils auront probablement un aspect compl\u00e8tement diff\u00e9rent, qu’ils fassent des requ\u00eates HTTP ou qu’ils g\u00e8rent l’\u00e9tat et les propri\u00e9t\u00e9s. Tout cela peut \u00eatre g\u00e9r\u00e9 tr\u00e8s diff\u00e9remment et souvent dans le mauvais sens.\n<\/p>\n
\n Vous trouvez les meilleures pratiques et tous les probl\u00e8mes disparaissent, mais cela ajoute \u00e0 la courbe d’apprentissage.\n<\/p>\n
\n Contrairement \u00e0 Angular React, il n’utilise pas de mod\u00e8les. Il utilise quelque chose appel\u00e9 extension JSX ou JavaScript ou extension de syntaxe JavaScript, qui nous permet d’int\u00e9grer du HTML dans le JavaScript. Au d\u00e9but, cela peut sembler un peu bizarre. Surtout, quand on vous a probablement appris \u00e0 s\u00e9parer votre balisage et votre JavaScript.\n<\/p>\n
\n Pensez-y comme si vous mettiez du HTML dans JavaScript avec quelques modifications diff\u00e9rentes : vous ne pouvez pas utiliser l’attribut class et vous devez utiliser le nom de la classe.\n<\/p>\n
\n Enfin, nous avons Redux. React est souvent utilis\u00e9 avec Redux ou Flux qui sont des gestionnaires d’\u00e9tat au niveau des applications. \u00c0 mon avis, Redux est en train de d\u00e9chirer, il suffit de le configurer et d’en apprendre les concepts est difficile.\n<\/p>\n
\n Je pense que c’est abus\u00e9. Je pense que beaucoup de d\u00e9veloppeurs utilisent redux l\u00e0 o\u00f9 ce n’est pas n\u00e9cessaire. Vous n’en avez pas besoin pour les petites applications, mais de nombreux d\u00e9veloppeurs insistent pour l’utiliser. Cela revient encore une fois \u00e0 la pr\u00e9f\u00e9rence. Redux est tr\u00e8s puissant, je ne veux pas l’enlever. Quand on parle de la courbe d’apprentissage, c’est sacr\u00e9ment difficile \u00e0 saisir.\n<\/p>\n
| \n Fonctionnalit\u00e9s<\/span><\/span>\n <\/td>\n | \n R\u00e9agir<\/span><\/span>\n <\/td>\n | \n Angulaire<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Langage de programmation<\/span><\/span>\n <\/td>\n | \n Javascript<\/span><\/span>\n <\/td>\n | \n Manuscrit<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Structure des codes<\/span><\/span>\n <\/td>\n | \n Dogmatique<\/span><\/span>\n <\/td>\n | \n Flexible<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Biblioth\u00e8que principale<\/span><\/span>\n <\/td>\n | \n Petit<\/span><\/span>\n <\/td>\n | \n Tr\u00e8s grand<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Mod\u00e8les<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Comp\u00e9tence<\/span><\/span>\n <\/td>\n | \n Petites applications<\/span><\/span>\n <\/td>\n | \n Applications \u00e0 grande \u00e9chelle<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Gagnant : C’est une \u00e9galit\u00e9<\/strong>\n<\/p>\n \n Il n’est pas juste de comparer directement les performances d’Angular \u00e0 React. Angular est un framework complet d’avant en arri\u00e8re, il comprend le routage, les outils de formulaire, la biblioth\u00e8que HTTP, les extensions r\u00e9actives, etc. Toutes ces fonctionnalit\u00e9s gonflent le framework et le ralentissent. Cependant, React n’est en soi qu’une biblioth\u00e8que de vues, qui est beaucoup plus petite et plus rapide.\n<\/p>\n \n Une fois que vous commencez \u00e0 ajouter des packages comme le routeur, le client HTTP ou tout ce que vous allez ajouter \u00e0 votre application React, cela commence \u00e0 appara\u00eetre un peu plus l\u00e0 o\u00f9 se trouve Angular et vous pouvez alors commencer \u00e0 les comparer \u00e9quitablement, mais m\u00eame apr\u00e8s cela, React toujours remporte le d\u00e9partement performance. C’est une technologie tr\u00e8s rapide en g\u00e9n\u00e9ral.\n<\/p>\n \n Le passage d’Angular 2 \u00e0 Angular 4 sous le capot, ils ont fait beaucoup pour augmenter les performances. Angular 4 est plus performant que Angular 2. N\u00e9anmoins, React gagne toujours dans le d\u00e9partement des performances.\n<\/p>\n \n \n Gagnant : R\u00e9agissez<\/strong>\n<\/p>\n \n Les deux frameworks ont beaucoup des m\u00eames fonctionnalit\u00e9s et avantages g\u00e9n\u00e9raux : ils organisent votre code, ils sont bas\u00e9s sur des composants, ils offrent un balisage dynamique, etc. Ils sont utilis\u00e9s pour faire beaucoup de choses identiques, et ils partagent un beaucoup des m\u00eames fonctionnalit\u00e9s.\n<\/p>\n \n Nous examinerons certaines des caract\u00e9ristiques individuelles. Angular a \u00e9videmment beaucoup plus de fonctionnalit\u00e9s que React en son c\u0153ur. Permettez-moi de vous rappeler que nous parlons de deux \u00e9cosyst\u00e8mes et de packages communs utilis\u00e9s avec React.\n<\/p>\n \n Angular est un framework tout compris. Il est livr\u00e9 avec un routeur de composants, des extensions r\u00e9actives 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\u00e9es bidirectionnelle d’une mani\u00e8re qu’aucun autre framework ne fait vraiment. La liaison des donn\u00e9es de la vue au mod\u00e8le est extr\u00eamement facile \u00e0 l’aide de la directive de mod\u00e8le ng.\n<\/p>\n \n Angular prend \u00e9galement en charge MVC (contr\u00f4leur Model View) ou au moins diff\u00e9rents aspects de ce mod\u00e8le de conception. il est \u00e9galement livr\u00e9 avec des fonctionnalit\u00e9s qui vous permettent d’impl\u00e9menter facilement des tests: \u00e0 la fois les tests unitaires et les tests de bout en bout. Angular regorge de fonctionnalit\u00e9s permettant de cr\u00e9er des applications frontales de niveau entreprise. React, d’autre part, n’inclut pas grand-chose \u00e0 la base. Cependant, des \u00e9l\u00e9ments peuvent \u00eatre ajout\u00e9s pour lui donner les fonctionnalit\u00e9s qu’Angular inclut pr\u00eates \u00e0 l'emploi, ainsi que quelques fonctionnalit\u00e9s suppl\u00e9mentaires.\n<\/p>\n \n React utilise un DOM virtuel qui est tr\u00e8s puissant. Il cr\u00e9e sa propre version all\u00e9g\u00e9e du Dom r\u00e9el et n’inclut et ne met \u00e0 jour que ce qui est n\u00e9cessaire plut\u00f4t que de rafra\u00eechir le tout. Le DOM virtuel est l’une des principales raisons pour lesquelles React est incroyablement rapide.\n<\/p>\n \n React utilise JSX qui est plus puissant que les mod\u00e8les standard car vous pouvez y mettre absolument n’importe quel type de JavaScript que vous voulez. JSX n’est pas n\u00e9cessaire 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 \u00e9galement un tr\u00e8s bon travail de gestion de l’\u00e9tat et des propri\u00e9t\u00e9s des composants. Cela rend les donn\u00e9es tr\u00e8s faciles \u00e0 utiliser et \u00e0 transmettre entre les composants. Passer des donn\u00e9es entre composants, Angular est beaucoup plus difficile que de le faire dans React.\n<\/p>\n \n Core React est difficile \u00e0 maintenir au niveau de l’application. L’\u00e9tat des composants est facile, mais si vous voulez une v\u00e9ritable gestion de l’\u00e9tat au niveau de l’application, vous aurez besoin de Redux ou de Flux, ce que j’ai d\u00e9j\u00e0 dit est assez d\u00e9routant \u00e0 apprendre. Les packages externes qui sont souvent utilis\u00e9s comme le nouveau routeur React version 4 sont un peu difficiles \u00e0 saisir mais ils sont \u00e9galement tr\u00e8s puissants une fois qu’ils ont appris \u00e0 les ex\u00e9cuter et \u00e0 les configurer. Il existe \u00e9galement de nombreuses fa\u00e7ons 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\u00e9rents packages sont couramment utilis\u00e9s avec React, m\u00eame s’ils ne font pas partie de la biblioth\u00e8que actuelle.\n<\/p>\n \n Bien que les deux technologies partagent un bon nombre de fonctionnalit\u00e9s, si vous ne faites que comparer les technologies de base, Angular est le gagnant.\n<\/p>\n \n Gagnant: angulaire<\/strong>\n<\/p>\n \n Angular et React ont de tr\u00e8s belles interfaces de ligne de commande. La CLI angulaire et l’application Create React sont toutes les deux tr\u00e8s bonnes et elles nous permettent vraiment de rationaliser le d\u00e9veloppement. La CLI angulaire est un peu plus puissante car nous pouvons g\u00e9n\u00e9rer rapidement des \u00e9l\u00e9ments tels que des composants et des services. Create React ne peut pas faire \u00e7a. Vous devez tout cr\u00e9er vous-m\u00eame en ce qui concerne les fichiers et la structure de base. Les deux syst\u00e8mes utilisent un pack Web, ont leurs propres serveurs de d\u00e9veloppement \u00e0 chargement automatique et disposent d’outils de compilation et de construction. De toute \u00e9vidence, Angular a la t\u00e2che suppl\u00e9mentaire de transpiler Typescript. La CLI a un script pour cela lorsque nous ex\u00e9cutons ng serve. Tout ce qui s’est pass\u00e9 dans les coulisses. Il utilise quelque chose appel\u00e9 TSC ou Typescript Compiler pour cela et les deux ont \u00e9galement des outils de test.\n<\/p>\n \n S’il s’agit d’une application compl\u00e8te, elles sont donc tr\u00e8s importantes. Vous n’avez pas besoin de les utiliser. Vous pouvez cr\u00e9er une application React \u00e0 partir de z\u00e9ro avec le pack Web. Celles-ci facilitent non seulement la cr\u00e9ation de l’application, mais \u00e9galement sa compilation et sa cr\u00e9ation pour la production.\n<\/p>\n \n Ils sont tous les deux assez m\u00eame dans ce d\u00e9partement.\n<\/p>\n \n Gagnant: angulaire<\/strong>\n<\/p>\n \n Comme je l’ai dit, ces deux technologies ont leurs propres \u00e9cosyst\u00e8mes qui s’\u00e9tendent d\u00e9sormais bien au-del\u00e0 du navigateur Web.\n<\/p>\n \n Ionic est un framework hybride populaire qui est une application angulaire qui s’ex\u00e9cute dans un wrapper natif pour les applications mobiles. Vous pouvez cr\u00e9er des applications mobiles \u00e0 l’aide d’Angular. Les applications hybrides peuvent \u00eatre un peu maladroites par rapport aux applications natives. L’exp\u00e9rience utilisateur peut parfois \u00eatre moins bonne, moins rapide et r\u00e9active. Parmi les diff\u00e9rents frameworks hybrides, Ionic 3 est le meilleur. Il existe \u00e9galement NativeScript, qui nous permet de cr\u00e9er de v\u00e9ritables applications natives iOS et Android avec Angular ainsi que JavaScript.\n<\/p>\n \n N\u00e9anmoins, NativeScript ne semble pas \u00eatre aussi bon que React Native de Facebook, du moins \u00e0 ce stade. Angular poss\u00e8de \u00e9galement une biblioth\u00e8que de composants de conception de mat\u00e9riaux si vous \u00eates un fan de la conception de mat\u00e9riaux. Angular Universal est un projet de d\u00e9part qui peut \u00eatre utilis\u00e9 pour rendre Angular c\u00f4t\u00e9 serveur. Il y a aussi NgRx store qui est une biblioth\u00e8que de gestion d’\u00e9tat inspir\u00e9e de Reax redux. Il est bas\u00e9 sur l’\u00e9tat mut\u00e9 par les r\u00e9ducteurs pairs. Il a \u00e9galement une int\u00e9gration avec les extensions r\u00e9actives.\n<\/p>\n \n Vous auriez remarqu\u00e9. Une fois, l’un d’eux fait quelque chose que l’autre copie d’une mani\u00e8re diff\u00e9rente. React et Angular sont devenus Microsoft et Apple des frameworks JavaScript.\n<\/p>\n \n React a tout un \u00e9cosyst\u00e8me. Il a React natif qui est populaire. C’est le meilleur moyen de cr\u00e9er des applications mobiles avec les technologies Web. React Native est rapide et de nombreuses applications, si elles sont bien con\u00e7ues, sont \u00e0 la hauteur des applications natives construites sur Swift ou Java. React a une biblioth\u00e8que de conception de mat\u00e9riaux appel\u00e9e Material-UI qui ressemble beaucoup au composant de conception de mat\u00e9riaux d’Angular mais plus mature. JS est un framework pour le rendu des applications React c\u00f4t\u00e9 serveur. Il vise \u00e0 le faire de la mani\u00e8re la plus simple possible afin que cela puisse \u00eatre compar\u00e9 \u00e0 Angular Universal. MobX est une autre fa\u00e7on de g\u00e9rer l’\u00e9tat. Cela fonctionne un peu diff\u00e9remment de redux. Il fournit un ensemble de d\u00e9corateurs pour d\u00e9finir les observables et les observateurs et il introduit la logique r\u00e9active dans votre \u00e9tat.\n<\/p>\n \n Storybook est un environnement de d\u00e9veloppement pour React. Il vous permet de parcourir une biblioth\u00e8que de composants, d’afficher diff\u00e9rents \u00e9tats de chaque composant et de d\u00e9velopper et tester des composants de mani\u00e8re interactive. Reactive VR fait entrer React dans la r\u00e9alit\u00e9 virtuelle. React desktop est une biblioth\u00e8que JavaScript construite au-dessus de la biblioth\u00e8que Reacts qui est cens\u00e9e apporter une exp\u00e9rience de bureau native sur le Web, avec de nombreux composants macOS et Windows 10. L’\u00e9cosyst\u00e8me React est extr\u00eamement vaste et puissant. React fait son chemin dans tous les aspects de la technologie et c’est clairement un gagnant.\n<\/p>\n \n Gagnant : R\u00e9agissez<\/strong>\n<\/p>\n \n Si vous h\u00e9sitez entre ces cadres, regardez les diff\u00e9rentes cat\u00e9gories et voyez ce qui vous int\u00e9resse. 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.\n<\/p>\n \n Si vous envisagez un \u00e9cosyst\u00e8me plus large qui inclut le d\u00e9veloppement d’applications mobiles natives, choisissez React sans r\u00e9fl\u00e9chir \u00e0 deux fois. Si vous recherchez des fonctionnalit\u00e9s, Angular est \u00e9norme. Il y a plus de fonctionnalit\u00e9s que vous n’en avez besoin.\n<\/p>\n<\/p>\n |