Angular vs React : lequel choisir pour votre application

Article original : Angular vs React: Which One to Choose for Your App

Une comparaison précise côte à côte des aspects généraux et techniques d'Angular et React

Il existe tant d'articles intitulés « Angular vs React », « React vs Angular », « Angular ou React » – c'est un miracle que vous ayez ouvert celui-ci ! Ce qui manque à ces articles, cependant, c'est une comparaison précise côte à côte d'Angular et React.

C'est donc ce que je vais faire dans cet article de blog : placer React et Angular en juxtaposition directe. Nous allons examiner et comparer les deux frameworks JavaScript et étudier chaque caractéristique possible pour nous assurer de ne pas manquer même un seul morceau de données.

En fin de compte, je ne vais pas vous dire quelle technologie choisir. Mais je vais vous donner suffisamment de matière à réflexion pour que vous puissiez choisir la technologie qui vous convient le mieux, à vous et à votre projet.

1. Aperçu général

React

React est une bibliothèque JavaScript pour le développement d'interfaces utilisateur. Elle est gérée par Facebook et une communauté open-source de développeurs.

Le framework a été introduit en mai 2013.

Les dernières mises à jour ont été publiées le 8 août 2019 – il y a un peu plus d'un mois.

Angular

Angular est un framework JavaScript open-source pour le développement web et mobile. Il est basé sur TypeScript et géré par l'équipe Angular de Google et la communauté des développeurs Angular.

Lancé en septembre 2016, Angular (également connu sous le nom d'Angular 2.0) est une réécriture complète d'AngularJS (Angular 1.0), qui a été introduit en 2010.

Il existe déjà six versions d'Angular, et la dernière sortie a eu lieu le 28 août 2019 – il y a presque trois semaines.

2. Universalité

React

React est un framework utilisé à la fois dans le développement web et mobile. Cependant, pour le développement mobile, il doit être incorporé avec Cordova. De plus, pour le développement mobile, il existe un framework supplémentaire – React Native.

React peut être utilisé pour construire des applications web à page unique et à pages multiples.

Angular

Angular convient à la fois au développement web et mobile. Dans le développement mobile, cependant, une grande partie du travail est effectuée par Ionic. De plus, similaire à React, Angular dispose d'un framework supplémentaire pour le développement mobile. L'équivalent de React Native est NativeScript.

Angular peut également être utilisé pour des applications web à page unique et à pages multiples.

3. Autonomie

React

React est un framework pour le développement d'interfaces utilisateur, donc les applications écrites avec React nécessitent des bibliothèques supplémentaires pour être utilisées. Par exemple, Redux, React Router ou Helmet optimisent les processus de gestion d'état, de routage et d'interaction avec l'API. Des fonctions telles que la liaison de données, le routage basé sur les composants, la génération de projets, la validation de formulaires ou l'injection de dépendances nécessitent des modules ou bibliothèques supplémentaires à installer.

Angular

Angular est un framework complet pour le développement de logiciels, qui ne nécessite généralement pas de bibliothèques supplémentaires. Toutes les fonctions mentionnées ci-dessus – liaison de données, routage basé sur les composants, génération de projets, validation de formulaires et injection de dépendances – peuvent être implémentées avec les moyens du package Angular.

4. Courbe d'apprentissage

React

React est minimaliste : pas d'injection de dépendances, pas de modèles classiques, pas de fonctionnalités trop compliquées. Le framework sera assez simple à comprendre si vous connaissez déjà bien JavaScript.

Cependant, il faut un certain temps pour apprendre à configurer un projet car il n'y a pas de structure de projet prédéfinie. Vous devez également apprendre la bibliothèque Redux, qui est utilisée dans plus de la moitié des applications React pour la gestion d'état. Les mises à jour constantes du framework nécessitent également un effort supplémentaire de la part du développeur. De plus, il existe de nombreuses bonnes pratiques dans React, que vous devrez apprendre pour faire les choses correctement.

Angular

Angular lui-même est une énorme bibliothèque, et l'apprentissage de tous les concepts qui y sont associés prendra beaucoup plus de temps que dans le cas de React. Angular est plus complexe à comprendre, il y a beaucoup de syntaxe inutile, et la gestion des composants est intriquée. Certaines fonctionnalités compliquées sont intégrées dans le cœur du framework, ce qui signifie que le développeur ne peut pas éviter de les apprendre et de les utiliser. De plus, il existe de nombreuses façons de résoudre un seul problème.

Bien que TypeScript ressemble étroitement à JavaScript, il faut également un certain temps pour l'apprendre. Comme le framework est constamment mis à jour, le développeur doit fournir un effort d'apprentissage supplémentaire.

5. Communauté

React

Le framework React est l'un des frameworks JS les plus populaires au monde, et la communauté qui le soutient et le développe est énorme.

En travaillant avec React, vous devez être un apprenant continu puisque le framework est souvent mis à jour. Bien que la communauté essaie d'avancer avec la dernière documentation aussi rapidement que possible, il n'est pas si facile de suivre tous les changements. Parfois, il peut y avoir un manque de documentation, mais le problème est souvent résolu par le soutien de la communauté sur les forums thématiques.

React est activement utilisé par des entreprises telles que Facebook, Twitter, Netflix, Airbnb, PayPal, The New York Times, Yahoo, Walmart, Uber et Microsoft.

Angular

Angular est moins admiré que React et fait face à beaucoup de scepticisme, partiellement à cause de l'impopularité d'Angular 1.0. Les développeurs avaient l'habitude de rejeter le framework comme étant trop compliqué car il nécessitait beaucoup de temps pour être appris. Cependant, ce framework a été développé par Google, ce qui joue en faveur de la crédibilité d'Angular.

Google fournit un soutien à long terme du framework et l'améliore constamment. Cependant, les mises à jour sont si rapides que la documentation est souvent en retard.

Angular est utilisé par des entreprises telles que McDonald's, AT&T, HBO, Apple, Forbes, Adobe, Nike et Microsoft également.

6. Performance

React

Les performances de React sont grandement améliorées avec l'introduction du DOM virtuel. Comme tous les arbres DOM virtuels sont légers et construits sur le serveur, la charge sur le navigateur est réduite. De plus, comme le processus de liaison de données est unidirectionnel, les liaisons ne sont pas assignées à des observateurs comme dans le cas d'Angular. Par conséquent, aucune charge de travail supplémentaire n'est créée.

Angular

Angular performe moins bien, surtout dans le cas des applications web complexes et dynamiques.

Les performances des applications Angular sont négativement affectées par la liaison de données bidirectionnelle. Chaque liaison est assignée à un observateur pour suivre les changements, et chaque boucle continue jusqu'à ce que tous les observateurs et les valeurs associées soient vérifiés. À cause de cela, plus vous avez de liaisons, plus d'observateurs sont créés, et plus le processus devient encombrant.

Cependant, la mise à jour la plus récente d'Angular a grandement amélioré ses performances, et il ne perd plus face à React. De plus, la taille d'une application Angular est légèrement plus petite que celle d'une application React.

7. Langage

React

React est basé sur JavaScript ES6+ combiné avec le script JSX. JSX est une extension de syntaxe, qui fait ressembler un code JavaScript à celui écrit en HTML. Cela rend le code plus facile à comprendre, et les fautes de frappe sont plus faciles à repérer. Pour que le code JSX soit compilé dans un navigateur, React est augmentée avec Babel – un outil de traduction de code.

Angular

Angular peut utiliser JavaScript ou TypeScript, qui est un sur-ensemble de JS développé spécifiquement pour les projets plus importants. TypeScript est plus compact que JavaScript, le code est plus facile à naviguer, et les fautes de frappe sont facilement repérées. Le processus de refactorisation du code devient également plus simple et plus rapide.

8. Structure de l'application

React

La structure de React offre aux développeurs la liberté de choisir. Il n'y a pas de « structure unique et correcte » pour une application React. Cependant, la nécessité de concevoir la structure de l'application au début de chaque projet la rend plus difficile et plus longue à démarrer.

De plus, React n'offre que la couche Vue, tandis que Modèle et Contrôleur sont ajoutés avec l'utilisation d'autres bibliothèques.

L'architecture d'une application React est basée sur les composants. Le code est constitué de composants React, qui sont rendus avec la bibliothèque React DOM et dirigés de deux manières : fonctionnelle (avec une fonction qui retourne JSX)...

function Hello(props){
return <div>Hello {props.name}</div>
}

...et basée sur les classes (avec les classes ES6).

class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}

Angular

La structure d'Angular est fixe et complexe, adaptée aux développeurs expérimentés.

Angular est basé sur trois couches – Modèle, Contrôleur et Vue. Un objet responsable du Modèle est initialisé par le Contrôleur et affiché avec la Vue.

Le code de l'application se compose de différents composants Angular, chacun étant écrit dans quatre fichiers séparés : un TypeScript pour implémenter le composant, un fichier HTML pour définir la vue, un fichier CSS pour définir les caractéristiques stylistiques, et un fichier spécial pour les tests. Les liens vers ces fichiers sont écrits dans la directive de l'application, qui affiche la logique structurelle de l'application. Par conséquent, les composants Angular sont également réutilisables.

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }

9. Composants UI

React

Les outils UI pour React sont développés par la communauté. Il existe de nombreux composants UI gratuits et payants sur le portail React. Pour utiliser les composants de design matériel dans React, vous devriez installer une bibliothèque supplémentaire – Material-UI Library & Dependencies.

Angular

Angular dispose d'un ensemble d'outils Material intégré, et il offre une variété de composants de design matériel pré-construits. Il existe divers boutons, mises en page, indicateurs, pop-ups et contrôles de formulaire. Grâce à cela, la configuration de l'UI devient plus simple et plus rapide.

10. Directives

React

Dans React, les modèles et la logique sont expliqués en un seul endroit – à la fin du composant. Cela permet au lecteur de saisir rapidement le sens du code même s'il ne connaît pas la syntaxe.

Angular

Dans Angular, chaque modèle est retourné avec un attribut – une directive de la manière dont l'objet doit être configuré. La syntaxe des directives Angular est complexe et sophistiquée, ce qui la rend incompréhensible pour un lecteur sans aucune expérience de travail avec cette technologie.

11. Gestion d'état

React

Dans React, chaque composant a son propre état. Un développeur React peut créer des composants spéciaux pour maintenir l'état de l'ensemble de l'application ou d'une partie particulière de celle-ci. Le principal inconvénient ici réside dans le fait que l'état global doit être stocké dans plusieurs parties différentes de l'application avec des données étant passées manuellement entre différents niveaux de l'arborescence des composants.

class Clock extends React.Component {
  constructor(props) {
    super(props);
   this.state = {date: new Date()};
 }
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <h2>Now is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Pour résoudre ce problème, il existe une bibliothèque spéciale de gestion d'état – Redux. L'idée est que l'état global est représenté comme un seul objet stateful, qui est modifié dans différentes parties de l'application à l'aide de reducers – des fonctions spéciales de Redux.

Une autre solution est offerte par la bibliothèque de gestion d'état MobX. Contrairement à Redux avec l'état global stocké dans un seul objet stateful immutable, MobX offre le stockage de seulement l'état minimal requis, tandis que le reste peut être dérivé.

Angular

Dans Angular, les données des composants sont stockées dans les propriétés des composants. Les composants parents passent les données aux composants enfants. Les changements d'état dans certaines parties peuvent être identifiés et recalculés, mais dans une grande application, cela peut provoquer une série de mises à jour multidirectionnelles de l'arborescence, qui seront difficiles à suivre. Les fonctionnalités peuvent être améliorées à l'aide de bibliothèques de gestion d'état, telles que NgRx ou RxJS, qui assureraient que le flux de données est unidirectionnel.

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;
  constructor(private service: HeroService) { }
  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
}

12. Injection de dépendances

React

React ne supporte pas pleinement l'injection de dépendances car il ne respecte pas pleinement l'idée de la programmation fonctionnelle et de l'immutabilité des données. Au lieu de cela, il dispose d'un état global pour tous les composants.

Angular

Le plus grand avantage d'Angular réside dans le fait que, contrairement à React, il supporte l'injection de dépendances. Par conséquent, Angular permet d'avoir différents cycles de vie pour différents stores.

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable({
  // nous déclarons que ce service doit être créé
  // par l'injecteur de l'application racine.
  providedIn: 'root',
})
export class HeroService {
  getHeroes() { return HEROES; }
}

13. Liaison de données

React

La liaison de données représente le processus de synchronisation des données entre le Modèle et la Vue. React doit être augmentée avec Redux, qui vous permet de travailler avec des données immuables et rend le flux de données unidirectionnel. La liaison unidirectionnelle est prévisible, ce qui facilite le processus de débogage.

Angular

Angular fonctionne avec une liaison de données bidirectionnelle et des données mutables. Bien que les avantages des données mutables et immuables fassent l'objet d'une discussion animée, il est définitivement plus facile de travailler avec une liaison de données bidirectionnelle plutôt qu'avec l'approche unidirectionnelle. En même temps, la liaison de données bidirectionnelle affecte négativement les performances puisque Angular développe automatiquement un observateur pour chaque liaison.

Les façons de liaison de données dans Angular :

{{expression}}   Interpolation
[target]="expression"    Property
bind-target="expression"    Attribute

(target)="statement" Event
on-target="statement" Event

[(target)]="expression" Two-way
bindon-target="expression" Two-way

14. Rendu des changements

React

React utilise un modèle d'objet de document virtuel (DOM), qui permet de mettre en œuvre facilement des changements de données mineurs dans un élément sans mettre à jour la structure de l'arborescence entière. Le framework crée un cache en mémoire de la structure de données, calcule les changements et met efficacement à jour le DOM affiché dans le navigateur. De cette manière, toute la page semble être rendue à chaque changement, alors qu'en réalité, les bibliothèques ne rendent que les sous-composants modifiés.

L'équipe React améliore constamment Fiber – un mécanisme visant à stimuler la productivité du rendu des changements.

Angular

Angular utilise un DOM réel, qui met à jour toute la structure de l'arborescence même lorsque les changements ont eu lieu dans un seul élément. Le DOM réel est considéré comme plus lent et moins efficace que le DOM virtuel.

Pour compenser cet inconvénient, Angular utilise la détection des changements pour identifier les composants qui doivent être modifiés. Par conséquent, le DOM réel sur Angular performe aussi efficacement que le DOM virtuel sur React.

15. Outils

React

React est supporté par de multiples éditeurs de code. Par exemple, le code dans React peut être édité avec Sublime Text, Visual Studio, et Atom. Pour démarrer un projet, vous pouvez utiliser l'outil Create React App (CLI). À son tour, le rendu côté serveur est complété avec l'utilisation du framework Next.js.

Pour tester l'ensemble de l'application écrite en React, vous auriez besoin de plusieurs outils. Par exemple, Enzyme pour les tests de composants, Jest pour tester le code JS, React-unit pour les tests unitaires, etc. Pour déboguer l'application en mode développement, vous pouvez utiliser une extension de navigateur React Dev Tools.

Un autre outil intéressant est React 360, qui est une bibliothèque utilisée pour créer des applications AR et VR.

Angular

De manière similaire à React, Angular est supporté par une variété d'outils d'édition de code. Par exemple, vous pouvez travailler avec des éditeurs de code tels que Aptana, Sublime Text, et Visual Studio. Un projet peut être rapidement configuré avec Angular CLI. Le rendu côté serveur est complété avec l'aide de Angular Universal.

Contrairement à React, Angular peut être entièrement testé avec un seul outil. Pour les tests de bout en bout dans Angular, les plateformes sont Jasmine, Protractor, et Karma. Un autre outil qui débogue l'application en mode développement est une extension de navigateur Augury.

Pour conclure

Angular est un framework complet pour le développement mobile et web. React est un framework uniquement pour le développement d'interfaces utilisateur, qui peut être transformé en une solution complète avec l'aide de bibliothèques supplémentaires.

React semble plus simple à première vue, et il faut moins de temps pour commencer à travailler sur un projet React. Cependant, cette simplicité, en tant qu'avantage principal de React, est neutralisée car vous devez apprendre à travailler avec des frameworks et outils JavaScript supplémentaires.

Angular lui-même est plus complexe et prend un certain temps à maîtriser. Pourtant, c'est un outil puissant qui offre une expérience de développement web holistique, et une fois que vous apprenez à travailler avec, vous en récoltez les fruits.

Il n'y a pas de meilleur framework. Les deux sont mis à jour en continu pour rester compétitifs. Par exemple, alors que React était considéré comme gagnant grâce à son DOM virtuel, Angular a égalisé les scores en implémentant la détection des changements. Alors qu'Angular était considéré comme gagnant grâce au fait d'être développé par une entreprise aussi autoritaire que Google, l'immense communauté dévouée de React a pleinement compensé la réputation de Google et a rendu React similaire à Angular.

En fin de compte, React vs Angular est une question de préférence personnelle, de compétences et d'habitudes. En tant que débutant en programmation, vous bénéficieriez probablement plus en commençant par React. En tant que développeur expérimenté, vous continuez simplement à travailler avec ce que vous connaissez le mieux.

N'oubliez pas de vous challenger et de commencer à apprendre un nouveau framework, React ou Angular. En tant que chef de projet ou propriétaire d'entreprise externalisant des développeurs, vous devriez parler à votre équipe de développement web et choisir ensemble le framework qui vous convient le mieux, qu'il s'agisse d'Angular ou de React.

Avez-vous une idée pour un projet Angular ou React ?

Mon entreprise KeenEthics est expérimentée dans le développement React, et nous fournissons également des développeurs AngularJS exceptionnels pour vos projets. Si vous avez besoin des services suivants, n'hésitez pas à nous contacter.

Si vous avez apprécié l'article, vous devriez définitivement lire une autre comparaison merveilleuse de 2 frameworks JS : React vs Svelte : Comment construire des composants de messagerie.

P.S.

Je voudrais remercier tout le monde qui a contribué à cet article, y compris Sergey Gornostaev et Volodya Andrushchak, développeurs full-stack logiciels @ KeenEthics.

L'article original publié sur le blog de KeenEthics peut être trouvé ici : Angular vs React : lequel choisir pour votre application.