Angular vs. React est un débat populaire parmi les développeurs JavaScript frontaux et, le plus souvent, la discussion finit par être biaisée en faveur d’une technologie ou de l’autre. Développés respectivement par Google et Facebook, Angular et React sont les deux technologies les plus utilisées pour créer des applications interactives d'une page.. 

Une comparaison complète entre Angular et React est imminente car il existe certains endroits où ils se chevauchent de manière significative en termes d’offre, c’est-à-dire qu’ils construisent la vue de face de votre application et d’autres où leur fonctionnalité reste incomplète sans l’aide d’un tiers. bibliothèque du parti. Adopter une technologie plutôt qu'une autre est une question de savoir si Angular ou React résoudra mieux votre problème et un peu d’intuition. Dans ce tutoriel, nous allons comparer et contraster sept caractéristiques clés différentes de Angular et React..

Je suis un fervent partisan de l’approche code-premier (le code parle plus fort que les mots, disent-ils). Gardant cela à l'esprit, j'ai ajouté des échantillons de code de Angular et React chaque fois que possible pour vous permettre de renforcer votre intuition et de décider ce qui vous convient et ce qui ne fonctionne pas. Commençons.

Cadre vs bibliothèque

Angular est un framework, tandis que React est une bibliothèque.. 

Qu'est-ce que cela signifie? Réagir seul ne vous permet pas de créer une application Web, car elle est conçue pour créer des vues (d'où le "V" dans MVC). React peut créer des vues basées sur des composants pour lesquelles des données peuvent être transmises à des vues enfants. Pour combler ce vide, Facebook a développé Flux, un modèle architectural complémentaire à React. L'architecture de flux, lorsqu'elle est associée à React, fournit le scénario suivant:

1. L'utilisateur clique sur un élément React. 
2. Une action est déclenchée. Cette action est envoyée à un magasin via une bibliothèque Dispatcher..
3. Le magasin assure le suivi de l'état de l'application et des méthodes de récupération des données. Toute mise à jour de l'état est reflétée dans les vues, ce qui permet de maintenir la cohérence des vues avec l'état de l'application..

N'a pas de sens? Ce chiffre devrait régler pour vous.

Flux complète React et implémente le concept de flux de données unidirectionnel.

Angular est un framework pour la construction d'applications client.

AngularJS était fermement construit sur le motif MVC, qui séparait l'application en trois couches différentes. La combinaison du modèle, de la vue et du contrôleur, ainsi que de la complexité supplémentaire liée à la maîtrise des directives, des usines, des services et d'autres composants pour créer une application d'une page, a obligé les développeurs de Google à adopter une architecture à base de composants.. 

Toutefois, lorsque votre application commence à se développer, il est important de disposer d'une structure solide qui éloigne la logique métier de votre application des composants. En tant que cadre, Angular vous permet de renforcer l'organisation structurelle en déplaçant les règles métier dans un modèle de domaine (en utilisant une combinaison de classes de modèle et de services) et en injectant le modèle dans vos composants via l'injection de dépendances..

Voici un exemple de code illustrant la manière dont la logique métier est encapsulée dans un modèle utilisateur et un service utilisateur, loin de notre composant..

/ * Chemin d'accès: /app/models/User.ts * / export class User id: number; nom d'utilisateur: string; mot de passe: chaîne; firstName: string; lastName: string; 

/ * /app/services/user.service.ts * / import Injectable from '@ angular / core'; importer Http de '@ angular / http'; importer utilisateur de '… / modèles / utilisateur'; @Injectable () export class UserService constructeur (http privé: Http)  getAll () // API pour renvoyer tous les utilisateurs create (utilisateur: Utilisateur) // appel d'API pour créer l'utilisateur update (utilisateur: Utilisateur) // Appel API pour mettre à jour l'utilisateur delete (id: number) // Appel API pour supprimer l'utilisateur 

/ * Chemin: /app/page/page.component.ts * / import Composant à partir de '@ angular / core'; importer utilisateur de '… / modèles / utilisateur'; import UserService de '… /services/user.service'; @Component (templateUrl: 'page.component.html') classe d'exportation PageComponent currentUser: User; utilisateurs: utilisateur [] = []; constructeur (private userService: UserService) // La dépendance est injectée dans les arguments du constructeur deleteUser (id: numéro) this.userService.delete (id) .subscribe (() => #Faire quelque chose);  private loadAllUsers () this.userService.getAll (). subscribe (users => #Faire autre chose); 

 
 
Tous les utilisateurs:
 
 
 user.username (user.firstName user.lastName) - Supprimer 
 
 
 

Approche par composants

Les composants sont le bloc de construction le plus fondamental d'une interface utilisateur dans une application angulaire. Une application angulaire est un arbre de composants angulaires.

Quels sont les composants? Dans Angular, les composants sont des classes TypeScript qui ont un @Composant décorateur marqué sur eux. De plus, à l'intérieur de ces décorateurs, nous pouvons définir comment Angular appelle les méta-données, notamment le modèle, les styles, les sélecteurs, etc..  

La hiérarchie des composants dans Angular est conçue de telle sorte que vous pouvez associer une structure et des fonctionnalités à une seule entité. Voici un aperçu architectural de haut niveau des composants et de la manière dont cela se relie à tout ce qui se trouve dans Angular.. 

L'architecture de Angular. Composant au centre et tout le reste tourne autour de lui. 

Le partage de données entre composants est possible en imbriquant des composants, comme illustré ci-dessous..

/ * UserParentComponent.ts * / import Component de '@ angular / core'; // Le  le sélecteur est imbriqué à l'intérieur . Chaque utilisateur est transmis en tant que propriété. @Component (selector: 'user-parent', template: ' 
Il y a users.length utilisateurs enregistrés status maintenant
   ') classe d'exportation UserParentComponent utilisateurs: id: numéro, nom: chaîne [] = ["id": 0, "nom": "Chris", "id": 1, "nom": " Dwayne ", " id ": 2," nom ":" Eve "]; status: string = "online"; 

/ * UserChildComponent.ts * / import Composant, Entrée à partir de '@ angular / core'; // Les propriétés d'entrée sont ornées de @decorators // user & status sont des propriétés d'entrée @Component (selector: 'user-child', template: ' 
Nom d'utilisateur
 
 id: user.id 
 
 Statut: status 
 ') classe d'exportation UserChildComponent @Input () user: id: numéro, nom: chaîne; @Input () status: string;  

Le concept de composants est profondément enraciné dans React, tout comme dans Angular. Facebook appelle React, une bibliothèque basée sur des composants qui vous permet de créer des interfaces utilisateur interactives. Cependant, contrairement à Angular, les composants React ne sont que des fonctions JavaScript avec un nombre arbitraire d’entrées et une sortie. Le code ci-dessous montre un composant défini à l'aide d'une fonction JavaScript et d'une classe ES6.

// Ecriture de composants à l'aide de fonctions JavaScript function Welcome (props) return 
Bonjour, props.name
;  // Ecriture de composants à l'aide de la classe ES6 La classe Welcome étend React.Component render () return 
Bonjour, this.props.name
; 

Nous adhérerons désormais aux normes ES6 pour la composition de composants, car c'est ce que recommande Facebook. Chaque composant React accepte un nombre arbitraire d’entrées, qui sont stockées dans un objet nommé les accessoires. 

Il a aussi un rendre méthode, et comme son nom l'indique, cette méthode détermine ce qui sera rendu lors de l'appel du composant. Chaque composant maintient un état interne (via cet.etat), et chaque fois que l'état change, la fonction de rendu de ce composant est à nouveau appelée.

Fonctionnalités du langage: TypeScript vs. ES6

Les applications angulaires sont écrites dans TypeScript, un sur-ensemble de ECMA2015 qui utilise un transpiler pour compiler votre fichier .ts fortement typé en un fichier .js simple. TypeScript propose des extensions de langage conçues pour faciliter l'écriture dans JavaScript. Il associe des informations de type à des entités JavaScript pour appliquer la vérification de type et améliorer le flux de travail de développement..

Certaines des fonctionnalités clés de TypeScript incluent le typage statique optionnel et la prise en charge des interfaces, des classes et des décorateurs. (Les décorateurs sont des fonctions précédées de «@» et immédiatement suivies d'une classe, d'un paramètre ou d'une propriété.)

Let's plonger dans React, allons-nous? L’une des caractéristiques linguistiques importantes de React est évidente dans cet exemple de code.. 

fonction Tweet (props) return ( 
  
 
C'est un tweet.
 
 
 )  

N'est-ce pas génial? React vous permet d'intégrer des balises XML / HTML dans votre fichier JavaScript. Cette opération est effectuée via JSX, qui offre une fonctionnalité d'extension de syntaxe pour JavaScript. Nous devons utiliser un compilateur comme Babel, qui compile notre code JSX en un code JavaScript que les navigateurs peuvent comprendre. Le code ci-dessus se compile en ceci:  

"use strict"; function Tweet (props) return React.createElement ("div", className: "tweet", React.createElement ("img", src: "images_4 / angular-vs-react-7-key-features-comparative_3 .png ", className:" tweet__avatar "), React.createElement (" div ", className:" tweet__body ", React.createElement (" p ", null," Ceci est un tweet. ")); 

Bien que l'utilisation de JSX soit recommandée, vous pouvez vous en tenir à React.createElement () si vous êtes contre l'idée d'intégrer des balises HTML dans JavaScript.

De plus, vous pouvez utiliser les normes ES6 ou la forme traditionnelle de JavaScript lorsque vous travaillez avec React. Bien que ES6 soit relativement nouveau, il ajoute de nombreuses fonctionnalités telles que les classes, les fonctions de flèche, les littéraux de modèle, la destruction et l'utilisation de let et const. Le seul inconvénient auquel je puisse penser est qu’il ajoute un peu de code standard, comme la nécessité d’appeler. super() chaque fois que vous appelez un constructeur(), et qu'il ne lie pas automatiquement les méthodes de gestion d'événements avec ce.

la classe utilisateur étend React.Component constructeur (props) // alerte de code de ballonnement super (props); this.handleSubmit = this.handleSubmit.bind (this); this.handleInputChange = this.handleInputChange.bind (this);  handleSubmit (utilisateur) // Méthode pour gérer la soumission handleInputChange (utilisateur) // Méthode pour gérer les entrées render () return ( 
  
 ) 

Vérification du type dans Angular vs. PropTypes dans React

La vérification de type statique est effectuée à la compilation. Le compilateur vous avertit des éventuelles incompatibilités de types et détecte certaines erreurs qui, autrement, resteraient inaperçues. En outre, la définition d'un contrat sur une variable, une propriété ou les paramètres d'une fonction peut générer un code plus lisible et maintenable..

Les déclarations de variable et de fonction deviennent plus expressives en déclarant leurs types de données. Vous pouvez en savoir plus sur les différents types de données primitifs dans la documentation TypeScript..

let isLoggedIn: boolean = false; let id: nombre = 10; let name: string = "Davis"; liste: numéro [] = [1, 2, 3]; enum Couleur Rouge, Vert, Bleu; let c: Couleur = Couleur.Rouge; laissez seau: tout = 4; bucket = "Je peux être une chaîne"; seau = faux; // ou un booléen 

Définir la signature d'une API à l'aide d'une interface rend le code moins ambigu et plus facile à comprendre. L'interface sert de guide de démarrage rapide qui vous aide à démarrer le code immédiatement et vous fait gagner du temps, sinon passé à la lecture de la documentation ou à la mise en oeuvre réelle de la bibliothèque..  

interface ButtonSettings text: string; taille ?: largeur: nombre; hauteur: nombre; ; couleur?: chaîne;  function createButton (settings: ButtonSettings) … createButton (text: 'Submit'); // OK createButton (text: 'Submit', size: width: 70, height: 30); // OK createButton (text: 'Submit', color: 43); // Pas OK: 43 n'est pas une chaîne createButton (text: 'Submit', size: width: 70); // Pas OK: la taille a aussi besoin d'une hauteur. CreateButton (color: 'Blue'); // Pas OK: membre 'text' requis

le type mot-clé dans TypeScript peut être utilisé pour créer un alias pour un type. Vous pouvez ensuite créer de nouveaux types qui sont une union ou une intersection de ces types primitifs.

// Types d'union type Age = nombre | chaîne; function getAge (age: Age): string return 'Vous êtes $ age!';  let ofSusan: Age = 21; let ofTyler: Age = 'trente et un'; getAge (ofSusan); // tu as 21 ans! getAge (ofTyler); // tu as trente et un ans! // Interface Intersection Types Nom nom (prénom: chaîne, nom: chaîne): string;  interface Age age (nombre actuel): nombre;  // attribue une définition d'intersection à un alias Type d'utilisateur User = Name & Age; function createUser (testUser: User) testUser.name ("David", "John"); testUser.age (99); testUser.address (); //Erreur 

React ne prend pas en charge la vérification de type car l’ES6 sous-jacent ne la prend pas en charge. Néanmoins, vous pouvez implémenter la vérification de type en utilisant le types de support bibliothèque développée par l'équipe de React. Tapez en vérifiant la les accessoires d'un composant pour vérifier s'il s'agit d'une chaîne peut être fait comme indiqué ci-dessous.

importer des PropTypes à partir de "types de prop"; // import de la classe de bibliothèque prop-types Greeting s´étend à React.Component render () return ( 
Bonjour, this.props.name
 
 Mon âge est, this.props.age  )  Greeting.propTypes = name: PropTypes.string; age: PropTypes.number; ;

Mais types de support ne se limitent pas aux chaînes, aux nombres et aux booléens. Vous pouvez faire beaucoup plus, comme décrit dans la documentation de la bibliothèque prop-types. Cependant, si vous prenez au sérieux la vérification de type statique, vous devez utiliser quelque chose comme Flow, qui est une bibliothèque de vérificateur de type statique pour JavaScript..

Échafaudage: CLI angulaire vs. create-react-app

Commencer un projet à partir de zéro peut sembler amusant au début. Cependant, le processus de configuration de la structure de répertoires, d'écriture de code passe-partout pour les composants et de démarrage de l'application est un exercice futile et improductif. Votre stratégie devrait consister à agir le plus rapidement possible et à vous concentrer sur le développement réel de l'application. Grâce à Google et à Facebook, vous disposez d’outils pour créer et échafauder facilement vos applications..

La configuration de Angular-CLI pour Angular et de create-react-app pour React est très simple avec npm..

// CLI angulaire $ npm installer -g @ angular / cli // créer-réagir-app $ npm installer -g créer-réagir-application

Pour créer une nouvelle application angulaire, vous devez utiliser la commande suivante:

$ ng nouveau PROJECT-NAME $ ng servir

Mais ce n'est pas ça. le ng générer commande vous permet de générer des composants, des itinéraires, des tuyaux, des directives et des services.

$ ng générer un composant Composant d'installation de page créer src \ app \ page \ page.component.css créer src \ app \ page \ page.component.html créer src \ app \ page \ page.component.spec.ts créer src \ app \ page \ page.component.ts mettre à jour src \ app \ app.module.ts 

Angular CLI peut faire beaucoup plus, comme créer une version de votre application Angular, des commandes pour l'exécution de tests unitaires et des tests de bout en bout. Vous pouvez en savoir plus sur GitHub.

D'autre part, créer-réagir-app est le moyen officiellement pris en charge de créer une application React sans aucun fichier de configuration.

$ Npm install -g create-react-app

Cela devrait créer une application React fonctionnelle avec toutes les dépendances de Babel et de Webpack prises en charge. Vous pouvez commencer à exécuter l'application sur votre navigateur en utilisant npm start.

Vous pouvez trouver les scripts disponibles pour l’application react dans le package.json fichier.

 "scripts": "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env = jsdom", "éjecter": "react- les scripts éjectent "

Liaison de données: liaison bidirectionnelle ou liaison unidirectionnelle

La liaison de données est une fonctionnalité qui permet la synchronisation des données entre l'état de l'application (modèle) et la vue. Dans une routine de liaison de données unidirectionnelle, toute modification de l'état de l'application met automatiquement à jour la vue. Au contraire, la liaison de données bidirectionnelle lie des propriétés et des événements sous une seule entité, c’est-à-dire que toute modification du modèle met à jour la vue et inversement..  

Dans React, les propriétés sont transmises des composants parents aux composants enfants, appelés flux de données unidirectionnel ou descendant. L’état d’un composant est encapsulé et n’est accessible à d’autres composants que s’il est transmis à un composant enfant sous la forme d’un accessoire, c’est-à-dire que l’état d’un composant devient l’accessoire du composant enfant.. 

la classe UserChild étend React.Component render () let userData = this.props.users.map ((user) => return (
 identifiant d'utilisateur  : Nom d'utilisateur 
) ); revenir ( 
 
 Bonjour. Le serveur est this.props.status 
 données d'utilisateur 
 )  class UserParent étend React.Component constructor () super (); // L'état est défini ici this.state = status: "Online" render () return ( 
  
 )  var USERS = ["id": 0, "name": "Chris", "id": 1, "name": "Dwayne", "id": 2, "name": " Eve "]; ReactDOM.render ( , document.getElementById ('conteneur')); 

Mais que se passe-t-il si vous devez propager les données dans l’arborescence des composants? Cela se fait via des événements enfants et des rappels parent. La documentation de React comprend un bon exemple traitant d'un tel scénario..

Les techniques de liaison de données disponibles dans Angular font partie des fonctionnalités qui le rendent intéressant. Angular prend en charge immédiatement l'interpolation, la liaison unidirectionnelle, la liaison bidirectionnelle et la liaison d'événement.

L'interpolation est le moyen le plus simple de lier votre propriété de composant à l'intérieur du texte entre vos balises HTML et vos attributions d'attributs..  

Bienvenue à nouveau currentUser.name!

La liaison de propriété est similaire à l'interpolation en ce sens que vous pouvez lier les propriétés de vos éléments de vue à des propriétés de composant. La liaison de propriété favorise la communication entre les composants et est identique à la façon dont les accessoires sont transmis dans React.




Les liaisons d’événements permettent le flux de données dans la direction opposée, c’est-à-dire d’un élément à un composant. Ici, Cliquez sur est un événement cible, et à droite, nous avons le onSave () méthode qui est invoquée lorsque l'événement se produit.  

sauvegarder

Mais la caractéristique la plus importante est la liaison bidirectionnelle utilisant le [(ngModel)]. Ceci fusionne la liaison de propriété et la liaison d'événement sous une directive et est particulièrement utile avec les formulaires et les champs de saisie. 

 prénom:   

Rendu côté serveur

Le rendu côté serveur est une technique de rendu traditionnelle. Ici, le serveur renvoie le fichier HTML complet sur demande, et le navigateur se voit confier le travail simple de l'afficher à l'utilisateur. Le rendu côté client, en revanche, renvoie un document HTML simple, la feuille de style et un fichier JavaScript.. 

Le JavaScript fait des demandes ultérieures pour rendre le reste du site en utilisant un navigateur. React, Angular et toutes les autres bibliothèques front-end JavaScript modernes sont de bons exemples de rendu côté client. Ceci est évident si vous visualisez la source de votre application Angular / React.

Mais le rendu côté client présente l'inconvénient de ne pas fonctionner correctement pour le référencement et de renvoyer un contenu HTML incomplet lorsque vous partagez votre lien sur des sites de médias sociaux. Angular propose une solution appelée Angular Universal qui veille à rendre votre moteur de recherche d'applications convivial et aux médias sociaux. C'est une bibliothèque construite par l'équipe angulaire, et son utilisation est définitivement privilégiée. 

Universal utilise une technique de pré-rendu selon laquelle l'ensemble du site Web est d'abord rendu à partir du serveur. Après quelques secondes, l'utilisateur passe au rendu côté client. Puisque tout cela se passe sous le capot, l'utilisateur ne remarque rien de différent.

Si vous utilisez React avec Redux, la documentation de Redux contient un bon didacticiel sur la configuration du rendu du serveur. Vous pouvez également configurer React pour le rendu depuis le serveur à l'aide du bouton BrowserRouter et StaticRouter composants disponibles dans le réagir-routeur bibliothèque. Vous pouvez en savoir plus à ce sujet dans cet article Medium. Mais si vous aimez les performances et l'optimisation, vous pouvez essayer next.js, une bibliothèque pour la SSR dans React..

Envelopper

Comparer un cadre complet et riche en fonctionnalités à une bibliothèque d'interface utilisateur robuste peut sembler injuste. Cependant, ce sont des technologies JavaScript avancées utilisées pour créer des applications interactives d'une seule page. À cet égard, cet article devrait vous aider à choisir l'une d'entre elles.. 

Quelles sont vos pensées sur Angular vs. React? Partagez-les dans les commentaires ci-dessous.