React vs Angular: une comparaison approfondie

Dois-je choisir Angular ou React? Chaque framework a beaucoup à offrir et il n’est pas facile de choisir entre eux. Que vous soyez un nouveau venu essayant de déterminer par où commencer, un pigiste choisissant un cadre pour votre prochain projet ou un architecte de niveau entreprise qui planifie une vision stratégique pour votre entreprise, vous bénéficierez probablement d'une vue éclairée sur ce sujet.

Pour vous faire gagner du temps, laissez-moi vous dire quelque chose d'emblée: cet article ne donnera pas une réponse claire sur quel cadre est le meilleur. Mais des centaines d'autres articles avec des titres similaires non plus. Je ne peux pas vous le dire, car la réponse dépend d'un large éventail de facteurs qui rendent une technologie particulière plus ou moins adaptée à votre environnement et à votre cas d'utilisation.

Comme nous ne pouvons pas répondre directement à la question, nous allons essayez autre chose. Nous comparerons Angular et React, pour montrer comment vous pouvez aborder le problème de la comparaison de deux frameworks de manière structurée par vous-même et l'adapter à votre environnement. Vous savez, la vieille approche «apprenez à un homme à pêcher». De cette façon, lorsque les deux seront remplacés par un BetterFramework.js dans un an, vous serez en mesure de recréer le même train de pensée une fois de plus.

Nous venons de réviser ce guide pour refléter l'état de React, Angular, et leurs avantages et inconvénients respectifs en 2020.

Par où commencer?

Avant d'en choisir un outil, vous devez répondre à deux questions simples: "Est-ce un bon outil en soi?" et "Cela fonctionnera-t-il bien pour mon cas d'utilisation?" Aucun d'eux ne veut rien dire par lui-même, vous devez donc toujours les garder tous les deux à l'esprit. D'accord, les questions ne sont peut-être pas aussi simples, alors nous allons essayer de les décomposer en plus petites.

Questions sur l'outil lui-même:

• Quelle est sa maturité et qui est derrière?
• De quel type
• Quelle architecture, quels paradigmes de développement et quels modèles utilise-t-il?
• Quel est l'écosystème qui l'entoure?

Questions d'auto-réflexion:

• Est-ce que mes collègues et moi serons capables pour apprendre cet outil facilement?
• Est-ce qu'il s'intègre bien avec mon projet?
• À quoi ressemble l'expérience des développeurs?

En utilisant cet ensemble de questions, vous pouvez commencer votre évaluation de n'importe quel outil, et nous baser notre comparaison de React et Angular sur eux aussi.

Il y a une autre chose dont nous devons tenir compte. À proprement parler, il n'est pas tout à fait juste de comparer Angular à React, car Angular est un framework complet et riche en fonctionnalités, tandis que React n'est qu'une bibliothèque de composants d'interface utilisateur. Pour égaliser les chances, nous parlerons de React en conjonction avec certaines des bibliothèques souvent utilisées avec lui.

Maturité

Une partie importante d'être un développeur expérimenté est de pouvoir maintenir l'équilibre entre le temps établi et le temps. approches éprouvées et évaluation de nouvelles technologies de pointe. En règle générale, vous devez être prudent lorsque vous adoptez des outils qui n'ont pas encore mûri en raison de certains risques:

• L'outil peut être bogué et instable.
• Il peut être abandonné de manière inattendue par le fournisseur.
• Là,
• React et Angular proviennent tous deux de bonnes familles, il semble donc que nous puissions être confiants à cet égard.

React

React ] est développé et maintenu par Facebook et utilisé dans ses produits, y compris Instagram et WhatsApp. Il existe depuis 2013, donc ce n'est pas tout à fait nouveau. C'est également l'un des projets les plus populaires sur GitHub, avec plus de 150 000 étoiles au moment de la rédaction de cet article. Certaines des autres entreprises notables utilisant React sont Airbnb, Uber, Netflix, Dropbox et Atlassian. Cela me semble bien.

Angular

Angular existe depuis 2016, ce qui le rend légèrement plus jeune que React, mais ce n’est pas non plus un petit nouveau sur le marché. Il est géré par Google et, comme mentionné par Igor Minar même en 2018, il a été utilisé dans plus de 600 applications de Google telles que Firebase Console, Google Analytics, Google Express, Google Cloud Platform et plus encore. En dehors de Google, Angular est utilisé par Forbes, Upwork, VMWare et autres .

Fonctionnalités

Comme je l'ai mentionné précédemment, Angular a plus de fonctionnalités prêtes à l'emploi que React. Cela peut être à la fois une bonne et une mauvaise chose, selon la façon dont vous le regardez.

Les deux frameworks partagent certaines caractéristiques clés en commun: composants, liaison de données et rendu indépendant de la plate-forme.

Angular

Angular fournit de nombreuses fonctionnalités requises pour une application Web moderne prête à l'emploi. Certaines des fonctionnalités standard sont:

• modèles d'injection de dépendances
• basés sur une version étendue de HTML
• composants basés sur des classes avec des hooks de cycle de vie
• routage, fourni par @ angular / router
• Requêtes Ajax utilisant @ angular / common / http
• @ angular / forms pour les formes de construction
• encapsulation CSS des composants
• code de protection XSS
• splitting and lazy loading
• test runner, framework et utilitaires pour les tests unitaires.

Certaines de ces fonctionnalités sont intégrées au cœur du framework et vous n'avez pas la possibilité de ne pas les utiliser. Cela nécessite que les développeurs se familiarisent avec des fonctionnalités telles que l'injection de dépendances pour créer même une petite application angulaire. D'autres fonctionnalités telles que le client HTTP ou les formulaires sont entièrement facultatives et peuvent être ajoutées selon les besoins.

React

Avec React, vous commencez par une approche plus minimaliste. Si nous ne regardons que React, voici ce que nous avons:

• au lieu de modèles classiques, il a JSX, un langage de type XML construit sur des composants basés sur des classes JavaScript
• avec des hooks de cycle de vie ou des composants fonctionnels plus simples
• gestion des états à l'aide de setState et des hooks.
• Protection XSS
• division de code et chargement différé
• limites de gestion des erreurs
• utilitaires pour les composants de test unitaire

Prêt à l'emploi, React ne fournit pas n'importe quoi pour l'injection de dépendances, le routage, les appels HTTP ou la gestion avancée des formulaires. On s'attend à ce que vous choisissiez les bibliothèques supplémentaires à ajouter en fonction de vos besoins, ce qui peut être à la fois une bonne et une mauvaise chose selon votre expérience avec ces technologies. Certaines des bibliothèques populaires qui sont souvent utilisées avec React sont:

Les équipes avec lesquelles j'ai travaillé ont trouvé la liberté de choisir vos bibliothèques libératrice. Cela nous permet d'adapter notre pile aux exigences particulières de chaque projet, et nous n'avons pas trouvé le coût d'apprentissage de nouvelles bibliothèques aussi élevé.

Langages, paradigmes et modèles

Prendre du recul par rapport aux fonctionnalités de chaque framework, voyons quels types de concepts de haut niveau sont populaires avec les deux frameworks.

React

Plusieurs choses importantes viennent à l'esprit lorsque l'on pense à React: JSX, composants et hooks.

JSX

] Contrairement à la plupart des frameworks, React n'a pas de langage de création de modèles séparé. Au lieu de suivre une approche classique de séparation du balisage et de la logique, React a décidé de les combiner dans des composants en utilisant JSX un langage de type XML qui vous permet d'écrire du balisage directement dans votre code JavaScript.

les mérites de mélanger le balisage avec JavaScript peuvent être discutables, il a un avantage indiscutable: l'analyse statique. Si vous faites une erreur dans votre balisage JSX, le compilateur émettra une erreur au lieu de continuer en silence. Cela aide en attrapant instantanément les fautes de frappe et autres erreurs stupides. L'utilisation de JSX s'est propagée dans différents projets – tels que MDX qui permet d'utiliser JSX dans les fichiers de démarque.

Composants

Dans React, vous pouvez définir des composants à l'aide de fonctions et de classes.

Les composants de classe vous permettent d'écrire votre code à l'aide de classes ES et de structurer la logique du composant en méthodes. Ils vous permettent également d'utiliser les méthodes de cycle de vie traditionnelles de React pour exécuter une logique personnalisée lorsqu'un composant est monté, mis à jour, démonté, etc. Même si cette notation est plus facile à comprendre pour les personnes familiarisées avec la programmation POO, vous devez être conscient de toutes les nuances subtiles de JS – par exemple, comment cela fonctionne, sans oublier de lier les gestionnaires d'événements.

Les composants fonctionnels sont définis comme des fonctions simples. Ils sont souvent purs et fournissent un mappage clair entre les accessoires d'entrée et la sortie rendue. Le code fonctionnel est généralement moins couplé et plus facile à réutiliser et à tester. Avant l'introduction des hooks, les composants fonctionnels ne pouvaient pas être avec état et n'avaient pas d'alternative aux méthodes de cycle de vie.

Les développeurs React ont tendance à abandonner les composants de classe en faveur de composants fonctionnels plus simples, mais les hooks sont une fonctionnalité plus récente , vous verrez généralement un mélange des deux approches dans les grands projets React.

Hooks

Hooks sont une nouvelle fonctionnalité de React introduite dans la version 16.8. Ce sont des fonctions qui vous permettent de classer les fonctionnalités d'état des composants et de méthode de cycle de vie dans les composants fonctionnels. Il existe deux hooks fournis par React: useState pour la gestion de l'état, et useEffect pour créer des effets secondaires – comme le chargement de données ou l'édition manuelle du DOM.

Des hooks ont été introduits pour rendre les composants fonctionnels plus simples et plus composables. Vous pouvez désormais diviser les fonctions volumineuses en parties atomiques plus petites, ce qui vous permet de diviser les éléments de fonctionnalité associés – en les séparant de la logique de rendu et en les réutilisant dans différents composants. Les hooks sont une alternative plus propre à l'utilisation des composants de classe et d'autres modèles, tels que les fonctions de rendu et les composants d'ordre supérieur – qui peuvent rapidement devenir trop compliqués.

React fournit des moyens de structurer votre application sans impliquer beaucoup de couches d'abstraction compliquées. L'utilisation de composants fonctionnels avec des hooks vous permet d'écrire du code plus simple, plus atomique et réutilisable. Même si l'idée de combiner le code et les modèles peut sembler controversée, séparer la logique de présentation et d'application en différentes fonctions vous permet d'obtenir des résultats similaires.

Angular

Angular a également quelques éléments intéressants dans sa manche, à commencer par des abstractions de base telles que les composants, services et modules, à TypeScript, RxJS et Angular Elements, ainsi qu'à son approche de la gestion des états.

Principaux concepts

Angular a un niveau d'abstraction plus élevé que React, introduisant ainsi plus concepts fondamentaux pour se familiariser. Les principaux sont:

• composants : définis comme des classes ES spécialement décorées qui sont responsables de l'exécution de la logique d'application et du rendu du modèle
• services : classes responsables de l'implémentation de la logique métier et applicative, utilisée par les composants
• modules : essentiellement des conteneurs DI pour le câblage des composants, services, tuyaux et autres entités liés ensemble.

Angular fait un usage intensif des classes ainsi que des concepts tels que DI, qui sont moins populaires dans le monde du développement front-end, mais devraient être familiers à toute personne ayant une expérience de développement back-end.

TypeScript

TypeScript est un nouveau langage basé sur haut de JavaScript et développé par Microsoft. Il s'agit d'un sur-ensemble de JavaScript ES2015 et comprend des fonctionnalités issues de versions plus récentes du langage. Vous pouvez l'utiliser à la place de Babel pour écrire du JavaScript à la pointe de la technologie. Il comporte également un système de frappe extrêmement puissant qui peut analyser statiquement votre code en utilisant une combinaison d'annotations et d'inférence de type.

Il y a aussi un avantage plus subtil. TypeScript a été fortement influencé par Java et .NET, donc si vos développeurs ont une expérience dans l'un de ces langages, ils trouveront probablement TypeScript plus facile à apprendre que le JavaScript ordinaire (remarquez comment nous sommes passés de l'outil à votre environnement personnel) . Bien qu'Angular ait été le premier framework majeur à adopter activement TypeScript, il est maintenant également utilisé dans de nombreux autres projets, tels que Deno (un environnement d'exécution natif de TypeScript), Puppeteer et TypeORM.

C'est également possible (et judicieux) d'utiliser TypeScript avec React.

RxJS

RxJS est une bibliothèque de programmation réactive qui permet une gestion plus flexible des opérations et événements asynchrones. C’est une combinaison des modèles Observer et Iterator combinée à une programmation fonctionnelle. RxJS vous permet de traiter n'importe quoi comme un flux continu de valeurs et d'y effectuer diverses opérations telles que le mappage, le filtrage, le fractionnement ou la fusion.

La bibliothèque a également été adoptée par Angular dans son module HTTP pour une utilisation interne. Lorsque vous effectuez une requête HTTP, elle renvoie un Observable au lieu de la promesse habituelle. Cette approche ouvre la porte à des possibilités intéressantes, telles que la possibilité d'annuler une demande, de la réessayer plusieurs fois ou de travailler avec des flux de données continus tels que WebSockets. Mais ce n'est que la surface. Pour maîtriser RxJS, vous devrez vous familiariser avec différents types d'observables, de sujets, ainsi qu'une centaine de méthodes et d'opérateurs.

State Management

Similaire à React, les composants angulaires ont un concept de composant Etat. Les composants peuvent stocker des données dans leurs propriétés de classe et lier les valeurs à leurs modèles. Si vous souhaitez partager l'état dans toute l'application, vous pouvez le déplacer vers un service avec état qui pourra ensuite être injecté dans les composants. Étant donné que la programmation réactive et RxJS sont un citoyen de première classe dans Angular, il est courant d'utiliser des observables pour recalculer des parties de l'état en fonction de certaines entrées. Cependant, cela peut devenir délicat dans les applications plus volumineuses, car la modification de certaines variables peut déclencher une cascade multidirectionnelle de mises à jour difficile à suivre. Il existe des bibliothèques pour Angular qui vous permettent de simplifier la gestion des états à grande échelle. Nous les examinerons de plus près plus tard.

Éléments angulaires

Les éléments angulaires permettent de regrouper les composants angulaires en éléments personnalisés. Également appelés composants Web, les éléments personnalisés constituent un moyen standardisé indépendant du framework de créer des éléments HTML personnalisés contrôlés par votre code JavaScript. Une fois que vous avez défini un tel élément et l'avez ajouté au registre du navigateur, il sera automatiquement rendu partout où il est référencé dans le HTML. Les éléments angulaires fournissent une API qui crée le wrapper nécessaire pour implémenter l'API du composant personnalisé et le faire fonctionner avec le mécanisme de détection des modifications d'Angular. Ce mécanisme peut être utilisé pour intégrer d'autres composants ou des applications angulaires entières dans votre application hôte, potentiellement écrites dans un cadre différent avec un cycle de développement différent.

Nous avons trouvé que TypeScript est un excellent outil pour améliorer la maintenabilité de nos projets , en particulier ceux avec une base de code volumineuse ou une logique de domaine / métier complexe. Le code écrit en TypeScript est plus descriptif, plus facile à suivre et à refactoriser. Même si vous n'utilisez pas Angular, nous vous suggérons de l'envisager pour votre prochain projet JavaScript. RxJS introduit de nouvelles façons de gérer le flux de données dans votre projet, mais vous oblige à avoir une bonne compréhension du sujet. Sinon, cela peut apporter une complexité indésirable à votre projet. Les éléments angulaires ont le potentiel de réutiliser des composants angulaires, et il est intéressant de voir comment cela se produira dans le futur. Parfois, ces outils sont encore plus utiles que le cadre lui-même. Jetons un coup d'œil à certains des outils et bibliothèques les plus populaires associés à chaque framework.

Angular

Angular CLI

Une tendance populaire avec les frameworks modernes est d'avoir un outil CLI qui vous aide à démarrer votre projet sans avoir à configurez vous-même la construction. Angular a Angular CLI pour cela. Il vous permet de générer et d'exécuter un projet avec seulement quelques commandes. Tous les scripts responsables de la construction de l'application, du démarrage d'un serveur de développement et de l'exécution des tests vous sont cachés dans node_modules . Vous pouvez également l'utiliser pour générer du nouveau code pendant le développement et installer les dépendances.

Angular introduit une nouvelle façon intéressante de gérer les dépendances de votre projet. Lorsque vous utilisez ng add vous pouvez installer une dépendance et elle sera automatiquement configurée pour être utilisée. Par exemple, lorsque vous exécutez ng add @ angular / material Angular CLI télécharge Angular Material à partir du registre npm et exécute son script d'installation qui configure automatiquement votre application pour utiliser Angular Material. Cela se fait à l'aide de schémas angulaires. Schematics est un outil de flux de travail qui permet aux bibliothèques d'apporter des modifications à votre base de code. Cela signifie que les auteurs de bibliothèques peuvent fournir des moyens automatiques de résoudre les problèmes incompatibles avec les versions antérieures que vous pourriez rencontrer lors de l'installation d'une nouvelle version.

Bibliothèques de composants

Une chose importante dans l'utilisation de tout framework JavaScript est de pouvoir les intégrer à un composant bibliothèque de votre choix, pour éviter d'avoir à tout construire à partir de zéro. Angular offre des intégrations avec la plupart des bibliothèques de composants populaires ainsi qu'avec ses propres bibliothèques natives. Par exemple:

• ng-bootstrap pour utiliser les widgets Bootstrap
• Material UI pour les composants Material Design de Google
• NG-ZORRO a bibliothèque de composants implémentant la spécification Ant Design
• Onsen UI for Angular une bibliothèque de composants pour applications mobiles
• PrimeNG une collection de composants angulaires riches

State Bibliothèques de gestion

Si les capacités de gestion d'état natives ne vous suffisent pas, plusieurs bibliothèques tierces populaires sont disponibles dans ce domaine.

La plus populaire est NgRx. Il s’inspire de Redux de React, mais utilise également RxJS pour regarder et recalculer les données dans l’état. L'utilisation de NgRx peut vous aider à appliquer un flux de données unidirectionnel compréhensible, ainsi qu'à réduire le couplage dans votre code.

NGXS est une autre bibliothèque de gestion d'état inspirée par Redux. Contrairement à NgRx, NGXS s'efforce de réduire le code standard en utilisant les fonctionnalités modernes de TypeScript et en améliorant la courbe d'apprentissage et l'expérience de développement globale.

Akita est un nouvel enfant sur le bloc, ce qui nous permet de garder le

Ionic Framework

Ionic est un framework populaire pour le développement d'applications mobiles hybrides. Il fournit un conteneur Cordova bien intégré à Angular et une jolie bibliothèque de composants de matériaux. En l'utilisant, vous pouvez facilement configurer et créer une application mobile. Si vous préférez une application hybride à une application native, c'est un bon choix.

Angular universal

Angular universal est un projet qui regroupe différents outils pour permettre le rendu côté serveur pour les applications angulaires. Il est intégré à Angular CLI et prend en charge plusieurs frameworks Node.js, tels qu'Express et Hapi, ainsi qu'avec .NET core.

Augury

Augury est une extension de navigateur pour Chrome et Firefox qui aide à déboguer les applications angulaires exécutées en mode développement. Vous pouvez l'utiliser pour explorer votre arborescence de composants, surveiller la détection des changements et optimiser les problèmes de performances.

Compodoc

Compodoc est un générateur de documentation statique pour Angular. Semblable à d'autres générateurs de documentation, il peut créer une documentation HTML statique basée sur les commentaires TSDoc de votre code. Compodoc, cependant, est livré avec des fonctionnalités pratiques spécifiquement pour Angular, telles que la navigation dans la structure de votre module, les itinéraires et la classification des classes en composants, services, etc.

Ngx-admin

Ngx-admin ] est un framework populaire pour créer des tableaux de bord personnalisés avec Angular et utiliser Nebular ou Angular Material comme bibliothèques de composants.

De nombreuses autres bibliothèques et outils sont disponibles dans la Awesome Angular list .

React

Create React App

Create React App est un utilitaire CLI permettant à React de configurer rapidement de nouveaux projets. Semblable à Angular CLI, il vous permet de générer un nouveau projet, d'exécuter l'application en mode développement ou de créer un bundle de production. Il utilise Jest pour les tests unitaires, prend en charge le profilage d'applications à l'aide de variables d'environnement, des proxys back-end pour le développement local, TypeScript, Sass, PostCSS et de nombreuses autres fonctionnalités.

Bibliothèques de composants

Semblable à Angular, React a une grande variété des bibliothèques de composants parmi lesquelles choisir:

Bibliothèques de gestion d'état

L'introduction des hooks a certainement bouleversé la gestion d'état dans React. Il y a des discussions en cours s'il y a même un besoin d'une bibliothèque de gestion d'état tiers. Même si les hooks répondent au besoin immédiat de travailler avec l'état, d'autres bibliothèques peuvent encore pousser cela plus loin en nous permettant d'utiliser des modèles d'implémentation éprouvés, de nombreuses bibliothèques supplémentaires et des outils de développement.

Redux est une bibliothèque de gestion d'état inspirée de Flux, mais avec quelques simplifications. L'idée clé de Redux est que tout l'état de l'application est représenté par un seul objet, qui est muté par des fonctions appelées réducteurs. Les réducteurs eux-mêmes sont des fonctions pures et sont implémentés séparément des composants. Cela permet une meilleure séparation des préoccupations et de la testabilité.

MobX est une bibliothèque alternative pour gérer l'état d'une application. Au lieu de conserver l'état dans un seul magasin immuable, comme le fait Redux, il vous encourage à ne stocker que l'état minimal requis et en dérive le reste. Il fournit un ensemble de décorateurs pour définir des observables et des observateurs et introduire une logique réactive dans votre état.

Bibliothèques de style

Contrairement à Angular, React ne fournit pas de capacités d'encapsulation CSS natives, vous devez donc rechercher des solutions tierces. Il existe de nombreuses solutions à ce problème, sans leader clair parmi elles. Certains des plus populaires sont:

• Styled Components une bibliothèque qui vous permet de créer des composants React avec votre style appliqué, ainsi que de styliser vos composants
• Modules CSS , qui vous permet d'importer des fichiers CSS et de générer des noms de classes isolés uniques pour référencer les styles
• Emotion qui combine les approches des composants stylisés et des modules CSS dans une seule bibliothèque

PropTypes

PropTypes est une fonctionnalité facultative de React qui vous permet d'introduire la validation des props d'exécution des composants. Contrairement à l'utilisation de la vérification de type statique avec TypeScript, PropTypes effectuera des vérifications de type lorsque votre application est en cours d'exécution. Cela s'avère particulièrement pratique lors du développement de bibliothèques lorsque vous ne pouvez pas être sûr que vos clients utilisent TypeScript, même si vous l'êtes. Depuis React 15.5, les types d'accessoires ont été déplacés vers une bibliothèque de types d'accessoires distincte et sont désormais complètement optionnels. Compte tenu de ses avantages, nous vous conseillons de l'utiliser pour améliorer la fiabilité de votre application.

React Native

React Native est une plateforme développée par Facebook pour créer des applications mobiles natives à l'aide de React. Contrairement à Ionic, qui produit une application hybride, React Native produit une interface utilisateur véritablement native. Il fournit un ensemble de composants React standard liés à leurs homologues natifs. Il vous permet également de créer vos composants et de les lier au code natif écrit en Objective-C, Java ou Swift.

Next.js

Next.js est un framework pour le serveur- rendu latéral des applications React. Il fournit un moyen flexible de restituer complètement ou partiellement votre application sur le serveur, de renvoyer le résultat au client et de continuer dans le navigateur. Il essaie de rendre la tâche complexe de création d'applications universelles plus facile, de sorte que la configuration est conçue pour être aussi simple que possible, avec un minimum de nouvelles primitives et d'exigences pour la structure de votre projet.

React Admin

React-admin est un framework pour créer des applications SPA de style CRUD au-dessus des API REST ou GraphQL existantes. Il est livré avec des fonctionnalités pratiques, telles qu'une interface utilisateur construite avec Material Design, l'internationalisation, la thématisation, la validation des données, etc.

Environnements de développement d'interface utilisateur

Une tendance majeure dans le développement front-end ces deux dernières années a été l'essor des outils de développement qui vous permettent de développer, tester et documenter votre composant de manière interactive et séparée de l'application. Storybook s'est imposé comme l'un des leaders dans ce domaine, avec le soutien de React et Angular. Cependant, il existe d'autres alternatives pour React.

React Styleguidist similaire à Storybook, vous permet de créer une documentation interactive de vos composants. Contrairement à Storybook, l'interface utilisateur générée ressemble plus à un readme interactif qu'à un ensemble séparé d'histoires. Alors que Storybook brille comme un environnement de développement, Styleguidist est davantage un outil de documentation.

Nous avons également mentionné MDX dans cet article. Il vous permet de pimenter vos fichiers Markdown en ajoutant des composants JSX interactifs.

Test des aides

Le test des composants de l'interface utilisateur implique généralement de devoir les rendre dans un environnement sandbox, simuler l'interaction de l'utilisateur et valider les résultats de sortie. Ces tâches de routine peuvent être simplifiées en utilisant les assistants de test appropriés. Pour Angular, il s'agit du TestBed intégré . Pour React, il existe deux candidats populaires: Enzyme et Testing Library.

Enzyme est le choix standard de facto. Il vous permet de rendre vos composants dans un DOM complet ou peu profond et d'interagir avec le composant rendu. Il suit principalement une approche de test de boîte blanche, où vos tests peuvent référencer certains des composants internes du composant comme ses composants enfants, ses accessoires ou son état.

Testing Library suit une approche différente et vous pousse à interagissez avec vos composants comme le ferait un utilisateur, sans connaître la mise en œuvre technique. Les tests créés de cette façon sont généralement moins fragiles et plus faciles à entretenir. Bien qu’elle soit la plus populaire avec React, la bibliothèque de tests est également disponible pour Angular.

Gatsby

Gatsby est un générateur de site Web statique qui utilise React.js. Il vous permet d'utiliser GraphQL pour interroger les données de vos sites Web définis dans Markdown, YAML, JSON, des API externes et des systèmes de gestion de contenu courants.

React 360

React 360 est une bibliothèque pour créer des applications de réalité virtuelle pour les navigateurs. Il fournit une API React déclarative qui repose sur les API de navigateur WebGL et WebVR, facilitant ainsi la création d'expériences 360 VR.

React Developer Tools

React Dev Tools est une extension de navigateur pour Chrome pour le débogage des applications React qui vous permet de parcourir l'arborescence des composants React et de voir leurs accessoires et leur état.

De nombreuses autres bibliothèques et outils sont disponibles dans la Awesome React list .

Adoption , Courbe d'apprentissage et expérience de développement

Un critère important pour choisir une nouvelle technologie est sa facilité d'apprentissage. Bien entendu, la réponse dépend d'un large éventail de facteurs, tels que votre expérience antérieure et une familiarité générale avec les concepts et modèles associés. Cependant, nous pouvons toujours essayer d'évaluer le nombre de nouvelles choses que vous devrez apprendre pour commencer avec un framework donné. Maintenant, si nous supposons que vous connaissez déjà ES6 +, les outils de création et tout cela, voyons ce que vous aurez besoin de comprendre.

React

Avec React, la première chose que vous rencontrerez est JSX. Cela semble difficile à écrire pour certains développeurs. Cependant, cela n'ajoute pas beaucoup de complexité: juste des expressions, qui sont du JavaScript, et une syntaxe spéciale de type HTML. Vous devrez également apprendre à écrire des composants, à utiliser des accessoires pour la configuration et à gérer l'état interne. Vous n'avez pas besoin d'apprendre une nouvelle syntaxe de modèle, car tout cela est du JavaScript simple. Alors que React prend en charge les composants basés sur les classes, avec l'introduction de hooks, le développement fonctionnel est de plus en plus populaire. Cela vous demandera de comprendre quelques modèles de développement fonctionnel de base.

Le tutoriel officiel est un excellent endroit pour commencer à apprendre React. Une fois que vous avez terminé, familiarisez-vous avec le routeur. Le routeur React peut être légèrement complexe et non conventionnel, mais rien d'inquiétant. En fonction de la taille, de la complexité et des exigences de votre projet, vous devrez trouver et apprendre quelques bibliothèques supplémentaires, ce qui peut être la partie la plus délicate. Mais après cela, tout devrait se dérouler en douceur.

Nous avons été vraiment surpris de la facilité avec laquelle il était de commencer à utiliser React. Même les personnes ayant une formation en développement back-end et une expérience limitée du développement front-end ont pu rattraper rapidement leur retard. Les messages d'erreur que vous pourriez rencontrer en cours de route sont généralement clairs et fournissent des explications sur la façon de résoudre le problème sous-jacent.

L'inconvénient est que vous devrez investir du temps dans le choix des bibliothèques pour prendre en charge vos activités de développement. Compte tenu du nombre d'entre eux, cela peut poser un défi. Mais cela peut être fait avec vos activités de développement une fois que vous vous êtes familiarisé avec le framework lui-même.

Bien que TypeScript ne soit pas requis pour React, nous vous recommandons fortement de l'évaluer et de l'adopter dans vos projets.

Angular

] Learning Angular vous fera découvrir plus de nouveaux concepts que React. Tout d'abord, vous devez vous familiariser avec TypeScript. For developers with experience in statically typed languages such as Java or .NET, this might be easier to understand than JavaScript, but for pure JavaScript developers, this might require some effort. To start your journey, we can recommend the Tour of Heroes tutorial.

The framework itself is rich in topics to learn, starting from basic ones such as modules, dependency injection, decorators, components, services, pipes, templates, and directives, to more advanced topics such as change detection, zones, AoT compilation, and Rx.js. These are all covered in the documentation. Rx.js is a heavy topic on its own and is described in much detail on the official website. While relatively easy to use on a basic level, it gets more complicated when moving on to advanced topics.

All in all, we noticed that the entry barrier for Angular is higher than for React. The sheer number of new concepts may be overwhelming to newcomers. And even after you’ve started, the experience might be a bit rough, since you need to keep in mind things like Rx.js subscription management, change detection performance, and bananas in a box (yes, this is a piece of actual advice from the documentation). We often encountered error messages that are too cryptic to understand, so we had to google them and pray for an exact match.

It might seem that we favor React here, and we definitely do. We’ve had experience onboarding new developers to both Angular and React projects of comparable size and complexity, and somehow with React it always went smoother. But, as I said earlier, this depends on a broad range of factors and might work differently for you.

Popularity and Community Feedback

Both frameworks are highly popular and have communities of followers and advocates. There are also numerous articles suggesting you use one or the other technology, mostly highlighting their positive sides. Let’s see if we can find a more objective way to represent the popularity of each project and developer satisfaction.

The npm download statistics shows almost five times more downloads for React than Angular. Google trends also reports more searches for React worldwide.

The 2019 State of JavaScript report lists React as the most popular front-end framework, with Angular being second to last, preceding only Ember. 71% of the participants said that they’ve used React and would use it again. Only 21% of the participants said the same about Angular, and 35% said that they’ve used Angular and would not use it again (only 8% said that about React).

The Hacker News Hiring Trends for 2019 lists React as the most wanted technology amongst employees for more than 31 months in a row.

Stack Overflow lists React as the second most popular framework after jQuery. Angular is listed as the third one. Their Most Loved, Dreaded, and Wanted Web Frameworks report paints a similar picture to the others.

The State of Developer Ecosystem 2020 report by Jet Brains confirms React’s position as the most popular front-end framework.

Making a Decision

You might have already noted that each framework has its own set of capabilities, both with their good and bad sides. But this analysis has been done outside of any particular context and thus doesn’t provide an answer on which framework should you choose. To decide on that, you’ll need to review it from the perspective of your project. This is something you’ll need to do on your own.

To get started, try answering these questions about your project and when you do, match the answers against what you’ve learned about the two frameworks. This list might not be complete, but should be enough to get you started:

• How big is the project?
• How long is it going to be maintained?
• Is all of the functionality clearly defined in advance or are you expected to be flexible?
• If all of the features are already defined, what capabilities do you need?
• Are the domain model and business logic complex?
• What platforms are you targeting? Web, mobile, desktop?
• Do you need server-side rendering? Is SEO important?
• Will you be handling a lot of real-time event streams?
• How big is your team?
• How experienced are your developers and what is their background?
• Are there any ready-made component libraries that you would like to use?

If you’re starting a big project and you’d like to minimize the risk of making a bad choice, consider creating a proof-of-concept product first. Pick some of the key features of the projects and try to implement them in a simplistic manner using one of the frameworks. PoCs usually don’t take a lot of time to build, but they’ll give you some valuable personal experience on working with the framework and allow you to validate the key technical requirements. If you’re satisfied with the results, you can continue with full-blown development. If not, failing fast will save you a lot of headaches in the long run.

One Framework to Rule Them All?

Once you’ve picked a framework for one project, you’ll get tempted to use the exact same tech stack for your upcoming projects. Don’t. Even though it’s a good idea to keep your tech stack consistent, don’t blindly use the same approach every time. Before starting each project, take a moment to answer the same questions once more. Maybe for the next project, the answers will be different or the landscape will change. Also, if you have the luxury of doing a small project with a non-familiar tech stack, go for it. Such experiments will provide you with invaluable experience. Keep your mind open and learn from your mistakes. At some point, a certain technology will just feel natural and right.