De nos jours, les deux frameworks JavaScript Angular et React sont très populaires, et le choix de ces deux frameworks est devenu la question et/ou la problématique la plus courante de nos jours. par les concepteurs d'architecture. Cet article n'est peut-être pas en mesure de vous dire quel framework est le meilleur, mais essayez de comparer les deux sous plus d'angles et de vous fournir plus d'avis de référence au moment de faire votre choix.

Comment choisir

Avant de choisir, nous essayons de regarder le framework (ou tout outil) que vous allez choisir avec quelques questions, et essayons d'utiliser les réponses à ces questions pour vous aider nous comprenons mieux Les frameworks facilitent également le choix

Questions sur le framework lui-même :

• Est-il mature ? Qui est derrière tout ça ? Quelles sont les fonctions de

•  ?

• Quelle architecture et quel modèle sont utilisés ?

• L'écosystème est-il riche ?

Questions d'auto-réflexion :

• Mon équipe et moi-même pouvons-nous apprendre et maîtriser facilement ?

• est-il adapté à mon projet ?

• L'expérience de développement est-elle suffisamment bonne ?

À proprement parler, la comparaison entre Angular et React est injuste, car Angular est un framework riche en fonctionnalités, tandis que React est une bibliothèque de composants d'interface utilisateur, nous allons donc dans l'analyse, certaines classes les bibliothèques souvent utilisées avec React seront discutées ensemble.

OK, commençons...

Maturité

En tant que développeur mature ou quelqu'un qui peut décider de l'orientation de l'architecture et de la technologie, un élément essentiel La compétence est d'être capable d'équilibrer la relation entre les technologies matures et les cadres de pointe dans le travail et les projets, de manière à maintenir l'avancement du personnel et de la technologie tout en garantissant la qualité de livraison des projets ou des produits. situations possibles suivantes : Risques :

• Le cadre peut être instable.

• Le développeur principal (sponsor) pourrait soudainement abandonner.

• Si vous avez besoin d'aide, il se peut qu'il n'y ait pas une grande base de connaissances ou une grande communauté disponible.

Heureusement, qu'il s'agisse d'Angular ou de React, il ne semble pas y avoir lieu de s'inquiéter des risques ci-dessus

React

React est développé et maintenu par Facebook pour ses propres produits, notamment Instagram et WhatsApp. Cela fait maintenant environ trois ans et demi. C'est également l'un des projets les plus populaires de GitHub.

Angular

Angular est maintenu par Google et utilisé dans les projets Adwords et Fiber de Google. Étant donné qu'AdWords est un outil important pour gagner de l'argent pour Google, il est naturel qu'Angular ne meure pas subitement.

Fonction

Comme mentionné précédemment, Angular lui-même a beaucoup plus de fonctions que React. Bien sûr, des fonctions plus riches sont des avantages pour un framework. Cela peut aussi être un inconvénient. Les deux frameworks ont certaines des mêmes fonctionnalités de base : composantisation, liaison de données et mécanisme de rendu indépendant de la plate-forme .

Angular

En plus de fournir certaines fonctionnalités qui nécessitent la dernière prise en charge du navigateur, Angular fournit également les fonctionnalités standard suivantes :

• Injection de dépendances

• Modèle

• Route (@angular/router)

• AJAX (@angular/http)

• Formulaires (@angular/forms)

• Emballage CSS composanté

• Protection XSS

• Outils de tests unitaires

L'avantage des fonctions riches est que vous n'avez pas besoin de dépenser plus d'énergie pour sélectionner des bibliothèques de classes tierces. cela ne vous laisse pas non plus le choix, vous devez choisir, même si vous n'avez pas besoin de ces fonctions (la dernière version d'Angular 4 semble avoir pris conscience de ce problème)

React

Comparé. avec Angular, les fonctions fournies par React lui-même sont relativement "simples":

• Aucune injection de dépendances

• Utilisez JSX au lieu des modèles HTML traditionnels

• Protection XSS

• Outils de tests unitaires

Par rapport à Angular, React vous offre beaucoup de liberté de choisir des bibliothèques de classes tierces, telles que :

• Routing (React-router)

• AJAX (Fetch ou axios)

• Divers packages CSS (détails Voir : https://github.com/MicheleBertoli/css-in-js)

• Tests unitaires plus puissants ( Enzyme)

Vous pouvez librement (ou personnaliser) les bibliothèques de classes requises en fonction de vos propres besoins, et ces bibliothèques de classes tierces sont faciles à apprendre.

Langage et modèles

Avec la popularité des deux frameworks, certains concepts et technologies ont également émergé. Si vous souhaitez réellement utiliser ou maîtriser ces deux frameworks, A. framework, il est très nécessaire de comprendre les concepts ou technologies qui en ressortent :

React

JSX

JSX est un sujet très controversé : certaines personnes l'aiment, tandis que d'autres voyez cela comme un grand pas en arrière. React a décidé d'utiliser un langage de type XML pour combiner le balisage et le code dans les composants, en écrivant le balisage HTML directement dans le code JavaScript.

Bien que le sujet du mélange de balisage avec JavaScript puisse être controversé, il présente un avantage incontestable : l'analyse statique. Si une erreur se produit dans le balisage JSX, le compilateur signalera immédiatement une erreur au lieu de laisser des problèmes inexplicables au moment de l'exécution. Cela aide les développeurs à résoudre rapidement les erreurs et à éviter d'autres erreurs stupides, telles que les fautes de frappe.

Flow

Flow est un outil de vérification de type JavaScript développé par Facebook. Il peut analyser le code et rechercher les erreurs de type courantes telles que les conversions implicites ou les déréférencements.

Contrairement à TypeScript à objectif similaire, il n'exige pas que les développeurs migrent vers un nouveau langage et fait fonctionner la vérification de type pour vos annotations de code. Les annotations de type sont facultatives pendant le processus et peuvent être utilisées pour fournir des indications supplémentaires à l'analyseur. Si vous souhaitez utiliser l'analyse de code statique tout en évitant de réécrire le code existant, Flow est un excellent choix.

Redux

Redux est une bibliothèque qui peut gérer les changements d'état de manière claire. Il s'inspire de Flux, mais avec quelques simplifications. L'idée clé de Redux est que l'état entier d'une 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 purement fonctionnels et mis en œuvre séparément des composants. Cela permet une meilleure séparation des problèmes et des tests.

Si vous travaillez sur un projet simple, l'introduction de Redux peut être un peu un compromis, mais pour les projets de taille moyenne et grande, c'est un bon choix.

Angular

TypeScript

TypeScript est un nouveau langage basé sur JavaScript et développé par Microsoft. c'est du javascript Un sur-ensemble d'ES2015 et inclut les fonctionnalités des versions plus récentes du langage. Vous pouvez l'utiliser à la place de Babel pour écrire du JavaScript de pointe. Il peut également analyser statiquement votre code en utilisant une combinaison d'annotations et d'inférence de type.

Il existe également un avantage plus subtil. TypeScript est fortement influencé par Java et .NET, donc si vos développeurs ont des connaissances de base dans l'un de ces langages, ils auront peut-être plus de facilité à trouver TypeScript que JavaScript simple (notez comment nous sommes passés des outils à votre environnement personnel). Bien qu'Angular ait été le premier framework majeur à adopter activement TypeScript, il peut également être utilisé avec React.

RxJS

RxJS est une bibliothèque de programmation réactive qui peut gérer de manière flexible les opérations et les événements asynchrones. Il s'agit d'une combinaison de modèles d'observateur et d'itérateur combinés à une programmation fonctionnelle. RxJS vous permet de traiter n'importe quoi comme un flux continu et d'y effectuer diverses opérations, telles que le mappage, le filtrage, le fractionnement ou la fusion.

Cette bibliothèque a été adoptée par Angular pour son module HTTP ainsi que pour certains usages internes. Lorsque vous effectuez une requête HTTP, elle renvoie un observable au lieu de la promesse habituelle. Bien que cette bibliothèque soit très puissante, elle est également complexe. Pour le maîtriser, il vous faudra connaître les différents types d'« observables », de « sujets » et une centaine de méthodes et opérateurs.

RxJS est utile lorsque vous travaillez beaucoup avec des flux de données continus (comme les sockets Web), mais semble trop complexe pour autre chose. Quoi qu'il en soit, lorsque vous utilisez Angular, vous devez au moins connaître les bases de RxJS.

TypeScript peut être considéré comme une fonctionnalité très importante dans Angular. Tout d'abord, il offre aux développeurs C#/Java originaux la possibilité d'accéder facilement au front-end. se veut également plus facile à comprendre que JavaScript , en particulier dans les projets comportant une grande quantité de code ou des activités complexes.

Écosystème

L'une des raisons pour lesquelles les frameworks open source sont si populaires est qu'autour d'eux, il existe d'innombrables outils, bibliothèques de classes et extensions pour prendre en charge l'ensemble du framework. Parfois, ces outils peuvent être plus utiles que le framework lui-même, examinons donc les outils et bibliothèques les plus populaires liés à ces deux frameworks.

Angular

Angular CLI

Une tendance populaire parmi les frameworks modernes consiste à utiliser des outils CLI qui peuvent vous aider à démarrer votre projet sans avoir à configurer la build vous-même. Angular a une CLI angulaire. Il vous permet de créer et d'exécuter des projets en utilisant seulement quelques commandes. Tous les scripts responsables de la construction de l'application, du démarrage du serveur de développement et de l'exécution des tests sont cachés dans node_modules. Vous pouvez également l'utiliser pour générer du nouveau code pendant le développement. Cela facilite la mise en place de nouveaux projets.

Ionic 2

Ionic 2 est la nouvelle version du framework populaire pour développer des applications mobiles hybrides. Il fournit un conteneur Cordova qui s'intègre parfaitement à Angular 2, ainsi qu'une belle bibliothèque de composants matériels. En l'utilisant, vous pouvez facilement configurer et créer des applications mobiles. Si vous aimez travailler avec des applications hybrides, c'est une excellente option.

Composants de conception matérielle

Si vous êtes passionné par la conception avec Material, vous serez heureux d'apprendre qu'Angular dispose d'une bibliothèque de composants Material.

Angular universal

Angular universal est un projet de départ qui peut être utilisé pour créer des projets prenant en charge le rendu côté serveur.

@ngrx/store

@ngrx/store est une bibliothèque de gestion d'état pour Angular inspirée de Redux, basée sur un état muté par des réducteurs purs. Son intégration avec RxJS vous permet de tirer parti des stratégies de détection des changements push pour de meilleures performances.

Pour plus d'informations sur les bibliothèques et outils de classes liés à Angular, veuillez vous référer à : la liste Awesome Angular

React

Create React App

Create-react - app est un outil CLI permettant de créer rapidement de nouvelles applications React. Vous pouvez générer un nouveau projet, démarrer le serveur de développement et créer des liaisons. Jest (un outil de test unitaire de Facebook) est également intégré à Create-react-app, ce qui nous permet d'effectuer plus facilement des tests unitaires.

React Native

React Native est une plateforme de développement mobile basée sur React développée par Facebook Avec cette plateforme, React peut créer une interface utilisateur véritablement native. Une série de composants React standard sont fournis pour la liaison. Il vous permet également de créer vos propres composants et de les lier au code Objective-C, Java ou Swift.

Material UI

Il existe également un composant de conception matérielle disponible pour React. Par rapport à la version d'Angular, cette version est plus mature et peut utiliser une plus large gamme de composants.

Next.js

Next.js est un framework pour le rendu côté serveur des applications React. Il fournit un moyen flexible de restituer entièrement ou partiellement une application sur le serveur, de renvoyer les résultats au client et de continuer dans le navigateur. Il tente de rendre la tâche complexe de création d'applications universelles aussi simple que possible, de sorte que la configuration est conçue pour être aussi simple que possible, avec un nombre minimum de nouvelles primitives et exigences sur la structure du projet.

MobX

MobX est une bibliothèque alternative pour gérer l'état des applications. Contrairement à Redux, qui conserve l'état dans un magasin immuable, il vous encourage à stocker uniquement l'état minimum nécessaire et à en extraire le reste des données. Il fournit un ensemble de décorateurs pour définir les observables et les observateurs et introduire une logique réactive dans votre code de gestion d'état.

Storybook

Storybook est un environnement de développement de composants pour React. Il vous permet de configurer rapidement une application distincte pour afficher vos composants. En dehors de cela, il fournit de nombreux modules complémentaires pour documenter, développer, tester et concevoir vos composants.

De même, vous pouvez découvrir plus d'outils et de bibliothèques dans la liste Awesome React.

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

Un critère important pour choisir une nouvelle technologie est de savoir s'il est facile de l'apprendre. Bien entendu, la réponse dépend d’un large éventail de facteurs, tels que votre expérience antérieure et votre connaissance générale des concepts et modèles pertinents. Si nous supposons que vous connaissez déjà ES6+, créez des outils et tout ça, voyons ce que vous devez savoir d'autre.

React

Avec React, la première chose que vous rencontrerez est JSX. Cela peut sembler gênant au début pour certains développeurs, mais cela n'ajoute pas de complexité ; C'est juste une expression, c'est en fait du JavaScript, et il a une syntaxe spéciale de type HTML. Vous devez également apprendre à écrire des composants, à utiliser des accessoires pour la configuration et à gérer l'état interne. Il n'est pas nécessaire d'apprendre de nouvelles structures ou boucles logiques car tout est du JavaScript pur.

Le tutoriel officiel est un excellent endroit pour commencer à apprendre React. Une fois que vous avez terminé le didacticiel officiel, vous devez ensuite vous familiariser et maîtriser le mécanisme de routage de React. React Router v4 est peut-être un peu plus complexe et non conventionnel, mais ne vous inquiétez pas trop.

L'utilisation de Redux nécessitera un changement de paradigme, et le cours vidéo d'introduction gratuit à Redux peut rapidement introduire les concepts de base. En fonction de la taille et de la complexité du projet, trouver et apprendre quelques bibliothèques supplémentaires peut être la partie la plus délicate, mais après cela, tout devrait se dérouler sans problème.

En fait, il est très simple de démarrer avec React. La partie la plus difficile est peut-être de savoir comment choisir une bibliothèque de classes adaptée à votre projet ou produit.

Angular

Angular vous fera découvrir plus de nouveaux concepts que React. Tout d’abord, vous devez utiliser TypeScript. Pour les développeurs ayant une expérience dans les langages typés statiquement tels que Java ou .NET, cela peut être plus facile à comprendre que JavaScript, mais pour les développeurs JavaScript purs, cela peut nécessiter un apprentissage supplémentaire.

Les riches sujets techniques du framework lui-même peuvent commencer depuis les bases telles que les modules, l'injection de dépendances, les décorateurs, les composants, les services, les pipelines, les modèles et les directives, jusqu'à des sujets plus avancés tels que la détection des changements, les zones, l'AoT. compilation et RxJS. Tout cela est dans la documentation. RxJS est un sujet lourd et est décrit en détail sur le site officiel. Bien qu'il soit relativement facile à utiliser au niveau fonctionnel de base, cela devient plus compliqué lorsque vous passez à des applications avancées.

Dans l’ensemble, nous avons remarqué qu’Angular a une barrière à l’entrée plus élevée que React. Le nombre de nouveaux concepts peut certainement être déroutant pour les nouveaux arrivants. Une fois de plus, j'ai rencontré quelques questions et j'ai dû rechercher la réponse sur Google. Cependant, comme mentionné précédemment, le fait que cela soit approprié ou non dépend de plusieurs facteurs.

Perspectives

Angular

En mars 2017, Angular a publié la version 4.0 (compatible avec la version 2.x). Quant à savoir pourquoi il s'agit de 4.0, l'explication officielle est parce que la version de). Le routeur, le composant principal, est déjà 4.0.0. Si Angular utilise toujours la version 3.0, cela créera de la confusion, comme indiqué ci-dessous :

Les principaux changements de la version 4.0 sont. réductions substantielles La taille du code est réduite (60%), la vitesse de chargement est améliorée (dans la mesure visible à l'œil nu) et le message d'erreur est plus clair. Selon la documentation officielle, la mise à niveau de la version d'Angular sera itérée à une vitesse relativement rapide

Qu'il s'agisse d'une itération de 6 mois d'une version majeure ou d'un correctif hebdomadaire, vous peut voir L'équipe Angular souhaite occuper rapidement le marché avec une stratégie de mise à niveau rapide.

React

D'un autre côté, la mise à niveau de React est très prudente, comme le montre le dernier blog d'actualités de la version v15.5.0

Cependant, on peut voir sur le blog que React est sur le point d'inaugurer la v16. Je me demande quelles surprises l'ensemble de React réécrit nous apportera. Cependant, il convient de mentionner que Facebook a publié React VR à la fin de l'année dernière. Les étudiants intéressés peuvent y jeter un œil ci-dessous.

Fitness

Peu importe de quel cadre il s'agit, celui qui vous convient est le « bon », il faut donc le mesurer du point de vue du projet (produit ) lui-même, comme suit La liste de questions n'est peut-être pas exhaustive, mais elle peut au moins servir de point de départ

• Quelle est la taille du projet (produit) ?

• Combien de temps faut-il pour entretenir ?

• Toutes les fonctions sont-elles clairement définies à l'avance ou peuvent-elles être modifiées de manière flexible ?

• Le modèle de domaine et la logique métier sont-ils complexes ?

• Quelle plateforme ciblez-vous ? Web, mobile, ordinateur de bureau ?

• Avez-vous besoin d'un rendu côté serveur ? Le référencement est-il important ?

• Gérez-vous beaucoup de flux d'événements en temps réel ?

• Quelle est la taille de votre équipe ?

• Quelle est l'expérience de vos développeurs et quel est leur parcours ?

• Existe-t-il des bibliothèques de composants prêtes à l'emploi que vous aimeriez utiliser ?

Si vous travaillez sur un grand projet et souhaitez minimiser le risque de mauvais choix, pensez d'abord à créer une démo pour valider le concept du produit. Choisissez quelques fonctionnalités principales de votre projet et essayez de les implémenter de manière simple en utilisant l'un des frameworks. Les démos ne prennent généralement pas (et ne devraient pas) prendre beaucoup de temps, mais elles fournissent une expérience précieuse qui peut vous aider à valider les exigences techniques clés. Si vous êtes satisfait des résultats, vous pouvez passer à une version complète. Dans le cas contraire, vous aurez amplement le temps de choisir à nouveau. Pendant le développement du projet, vous pouvez également utiliser certains outils de développement prenant en charge Angular et React pour améliorer l'efficacité du développement, tels que Wijmo, qui est une série d'ensembles de contrôles de développement comprenant HTML5 et JavaScript lancés pour le développement d'applications d'entreprise. Que votre application soit mobile, PC ou qu'elle doive prendre en charge IE6, Wijmo Enterprise peut répondre à vos besoins.

Résumé

À travers les 6 aspects ci-dessus, nous avons comparé React et Angular, les deux frameworks front-end les plus en vogue à l'heure actuelle, dans l'espoir de vous fournir une référence lors de la création votre choix. Mais si cela vous convient vraiment, vous ne le saurez peut-être pas avant de l'avoir essayé.