Aujourd’hui disponible en version BETA, AngularJS 2 est sur le point de devenir le nouveau framework à la mode en 2016. Voici venu le moment de l’évaluation. Voyons comment il s’en sort face au chouchou de 2015 : ReactJS.
Disclamer : J’ai beaucoup apprécié travailler avec la version 1 de AngularJS mais j’ai changé pour ReactJS en 2015. Je ne suis peut-être pas complètement objectif, mais croyez-moi, j’attaque des deux côtés.
Aller, c’est parti pour saigner !

Photo credit: @jwcarrol

N’essayez pas de comparer des fruits et des légumes

Oui, AngularJS est un framework alors que ReactJS est une library. Pour certains, cela rend impossible une comparaison objective. Ce n’est pas mon avis !

Choisir entre AngularJS et ReactJS, c’est un peu comme choisir entre acheter un ordinateur prêt à démarrer ou acheter des pièces détachées pour monter le sien.

Cet article accorde une attention particulière aux deux approches en tenant compte de leurs avantages et Inconvénients respectifs. J’ai comparé la syntaxe et le modèle des composants de ReactJS et de AngularJS. Cela correspond donc à comparer un processeur d’ordinateur assemblé à un processeur acheté au détail, une comparaison faisable.

Les avantages de AngularJS 2

Commençons par les avantages d’AngularJS 2 sur ReactJS.

Pas de décision compliquée

AngularJS est un framework, ce qui signifie qu’il met à disposition un grand nombre d’options et de fonctionnalités natives. Avec ReactJS, il est nécessaire d’ajouter des bibliothèques de composants externes pour disposer du même nombre de fonctionnalités. Il vous faudra ajouter des éléments pour le “routing”, pour forcer des flux unidirectionnels, pour appeler des API, mettre en place des tests, gérer les dépendances etc. Le développeur décide de chaque chose et la moindre évolution technologique repose sur ses choix.
AngularJS permet d’utiliser un certain nombre d’options directement, ce qui permet de démarrer plus rapidement un projet sans être intimidé par les choix à faire au démarrage. Cette standardisation permet d’ailleurs de changer de développeur très facilement puisque les projets reposent sur des composants embarqués et de fait standards, facilitant également le travail d’équipe.
J’admire d’ailleurs l’adoption de TypeScript par l’équipe de développement AngularJS, cela nous mène au deuxième avantage important de AngularJS.

TypeScript = Clear Path

TypeScript ne fait pas l’unanimité. AngularJS 2 a l’essence de Javascript même si ce n’est pas que du Javascript. De son côté, les exemples présentés de ReactJS sont parfois en ES5, parfois en ES6 dans les mêmes proportions. Et ReactJS permet aujourd’hui d’utiliser trois déclarations différentes pour la même action : la déclaration de composants. Cela a pour effet de désorienter les nouveaux arrivants.
Même si AngularJS 2 ne contraint pas à l’utilisation de TypeScript, le noyau dur des développeurs AngularJS pousse fortement dans cette direction, notamment au travers de la documentation. Cela veut dire que la plupart des exemples disponibles dans les projets Open Source proposerons une syntaxe familière aux développeurs qui suivent cette norme puisque la plupart respecte cette norme. AngularJS propose des exemples qui montrent comment utiliser le compilateur de TypeScript (Ces démonstrations sont admirables d’ailleurs, tout le monde n’utilise pas TypeScript aujourd’hui, mais je suis prêt à parier que cela se sera bientôt imposé en standard). Cette façon de travailler permet d’éviter toute erreur liée à une mauvaise décision qui pourrait intervenir en ReactJS.

Réduire le Churn

2015 a été l’année d’un certain essoufflement du Javascript vanilla. ReactJS a été l’un des acteurs de ce changement. alors que React en est à la version A 1.0, de nouveaux changements devraient voir le jour dans le futur. L’écosystème autour de ReactJS continu de subir un phénomène de Churn, particulièrement autour des composants utilisés au sein de Flux. Cela veut dire que tout ce qui est écrit dans du ReactJS aujourd’hui sera probablement obsolète lors de la sortie de ReactJS 1 ou nécessitera à minima une ré-écriture importante.
Par contraste, AngularJS 2 est une ré-invention méthodologique et précautionneuse de la version précédente. Cette version est plus mature, plus compréhensible. Donc oui, les mises à jours dans une version ultérieure de AngularJS seront bien moins douloureuses que celles de ReactJS. Et en tant que framework complet, quand on décide de travailler avec AngularJS, on sait que les éléments embarqués et disponibles nativement fonctionnent bien ensemble car ils ont été choisis pour travailler ensemble. Dans ReactJS, c’est votre responsabilité de choisir les composants qui peuvent dans certains cas présenter des problèmes de compatibilité, de performances etc. Les mises à jours des composants génèreront peut être également des difficultés supplémentaires et du debugging. Nous savons tous que ces phases sont frustrantes, peuvent générer des pertes de temps importantes et sembler véritablement sans fin.

Un vaste panel d’outils supportés

Comme vous le constatez plus bas, je considère React JSX comme une belle avancée, bien qu’il soit nécessaire de choisir des composants supportant le JSX. React est devenu si populaire que le support d’un outil particulier est rarement un problème, il suffit d’être patient. En effet, les nouveaux outils ont rarement le support JSX lors de leur lancement (exemples : les IDE, les linter etc.). Les templates AngularJS 2 et leur markup en chaines de caractères sont stockés dans des fichiers HTML séparés. De fait, cette méthode ne requiert pas d’outil particulier pour faciliter leur lecture.

Compatible avec les Web Components

La conception de AngularJS 2 respecte les standards des Web Components. En quelques mots, les composants que vous construirez en AngularJS 2 devraient être beaucoup plus facile à convertir en composants purs que ceux produits en ReactJS. Le support des navigateurs reste limité, mais cela pourrait être un accélérateur à long terme lors de vos migrations par exemple.
Maintenant que nous avons une meilleure connaissance des points forts de AngularJS 2, il est temps de passer en revue les points forts de ReactJS.

Les Avantages de ReactJS

Alors, qu’est ce qui distingue réellement React ?

JSX

Le JSX est un pseudo-langage d’une syntaxe proche du HTML compilé par le Javascript. Le markup et le code applicatif se composent dans un même fichier. L’avantage est que cette architecture permet d’avoir une autocompletion performante durant le développement notamment lorsque l’on renseigne une variable, un mot clé etc. C’est une différence importante avec AngularJS 2. De ce fait, ReactJS dispose d’une bonne colorisation syntaxique cohérente et complète dans la plupart des éditeurs, souvent d’ailleurs avec une autocompletion au moins partielle et la possibilité d’identifier les erreurs d’écriture au stade de la conception (sans attendre la compilation). Cela dit, AngularJS propose un parser maison pour palier à cette difficulté (bravo !).
Si on est allergique aux templates basés sur des chaines de caractères comme en AngularJS, il est également possible d’éclater les contenus en plusieurs fichiers mais au prix du retour à une architecture de fichiers à “l’ancienne”.

ReactJS identifie rapidement les erreurs

Quand on commet une erreur de syntaxe dans ReactJS, cela ne compilera pas. C’est une excellente chose. Cela signifie que vous êtes en mesure d’identifier immédiatement quelle est la ligne comportant une erreur. Le compilateur JSX nous indique immédiatement quand un élément n’est pas fermé par exemple ou quand une propriété est mal utilisée ou inexistante dans le contexte de la page. Cette approche fluidifie considérablement les phases de développement.
Par contraste, lorsqu’une erreur de type mauvaise référence de variable est commise dans AngularJS 2, rien ne l’indique… AngularJS 2 ‘plante’ silencieusement, et compile néanmoins. L’erreur est identifiée lors du lancement. Cela a pour effet de ralentir le développement. On charge l’application et il faut alors se demander pourquoi les données ne se chargent pas par exemple…

ReactJS est Javascript Centric

La voici, la différence fondamentale entre ReactJS et AngularJS 2. Malheureusement, AngularJS 2 reste centré sur le HTML plutôt que sur le Javascript. C’est de fait un problème de conception fondamentale :

AngularJS 2 continu d’ajouter du Javascript dans du HTML. ReactJS met sur HTML dans le JavScript.

Cela impacte fondamentalement l’expérience de développement. L’approche centrée HTML est la plus grande faiblesse d’AngularJS. Javascript est bien plus puissant que le HTML. Ainsi, il semble plus logique que le Javascript supporte le markup HTML que le contraire. Le HTML et le javascript ont besoin de travailler ensemble, ils sont liés. L’approche javascript de ReactJS est donc fondamentalement supérieure à l’approche de AngularJS, EmberJS ou encore Knockout qui repose sur le paradigme opposé.
Voici pourquoi

ReactJS : conception centrée Javascript = simplicité

AngularJS 2 est la continuité de l’approche de AngularJS. L’approche consiste toujours à donner plus de puissance au HTML. On utilise donc la syntaxe AngularJS 2 pour les traitements simples comme les boucles, les conditions etc. Malheureusement, cela manque de standard. Par exemple AngularJS 2 propose les deux méthodes de binding (simple ou bidirectionnel) avec une syntaxe différente :

{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding

En ReactJS, l’une ou l’autre accepte le même type de syntaxe.

{myVar}

AngularJS 2 supporte une syntaxe ‘inline’ directement dans l’élément :

&lt;ul&gt;
&lt;li *ngFor="#hero of heroes"&gt;
    {{hero.name}}
  &lt;/li&gt;
&lt;/ul&gt;

L’exemple de code plus haut boucle sur un tableau appelé ‘heroes’. J’ai plusieurs interrogations à ce stade :

Il faut déclarer un modèle ‘master’ via une instruction précédente.
le dièse (#) devant hero déclare une variable locale. Ce concept clé dans AngularJS ressemble à du bruit inutile. On peut également utiliser var si on préfère.
L’instruction ngFor ajoute une sémantique de boucle dans le HTML au travers d’attributs spécifiques à AngularJS.

Il y a un contrast important entre la syntaxe de AngularJS 2 plus haut et celle de ReactJS qui est en pure javascript (plus bas).

&lt;ul&gt;
  { heroes.map(hero =&gt;
&lt;li key={hero.id}&gt;{hero.name}&lt;/li&gt;
  )}
&lt;/ul&gt;

Puisque Javascript supporte de base les boucles, le JSX de ReactJS réutilise toute la puissance de Javascript directement pour ce type d’opérations, et bien d’autres, telles que les maps, les filtres etc.

Pour lire de l’AngularJS : il est essentiel de connaitre un grand nombre de mots clés spécifiques à AngularJS.
Pour lire du ReactJS : il suffit de connaitre Javascript.

La syntaxe de ReactJS est donc une syntaxe conceptuellement assez simple en comparaison aux autres frameworks qui proposent des spécificités.

Ember: {{# each}}
Angular 1: ng-repeat
Angular 2: ngFor
Knockout: data-bind=”foreach”
React: JUST USE JS. 🙂

Tous, sauf ReactJS utilisent des mots clés spécifiques en replacement des instructions natives disponibles dans Javascript : une boucle. Voici la beauté de ReactJS. Cela respecte les conventions de Javascript et en conserve la puissance. Il n’y a pas de mauvaise surprise ou de grammaire discutable.
Les bizarreries d’AngularJS 2 quant-à elle continuent avec le click binding:

(click)=”onSelect(hero)"

Par contraste avec le naturel du javascript natif dans ReactJS

onClick={this.onSelect.bind(this, hero)}

ReactJS inclue également un système d’événement (comme AngularJS 2 d’ailleurs). De ce fait déclarer des événements ne pose pas de problème de performances lors de la déclaration d’écouteurs.
Pourquoi apprendre une syntaxe et une grammaire de code spécifique à un framework quand il est possible de ne garder en tête que du pur javascript ?

Une expérience luxueuse du développement

Le support de l’autocompletion pour le JSX, la validation en temps réel et la richesse des messages d’erreurs permet d’accélérer le développement considérablement.

La question du poids

Voici le poids des frameworks les plus populaires (source)
Angular 2 : 566k (766k with RxJS)
Angular 2 : 764k minified
Ember : 435k
Angular 1: 143k
React + Redux : 151k minified
Donc, AngularJS 2 est 4 fois plus lourd que ReactJS + Redux qui sont d’une simplicité comparable. AngularJS 2 perdra probablement du poids dans les mois qui viennent et avant la sortie définitive de la version officielle, mais quand même !
Les frameworks comme AngularJS ou EmberJS sont plus lourds en terme de poids parce qu’il y a beaucoup plus de fonctionnalités disponibles nativement.
Cela pose question. De nombreuses applications n’ont pas besoin de tous ces éléments proposés dans ces framworks. Dans le monde ou de plus en plus de micro-services ou micro-apps émergent, ReactJS propose une puissance de bonne capacité en vous permettant d’embarquer uniquement le strict nécessaire. Dans un monde qui connait plus de 200.000 modules de type NPM c’est un positionnement intéressant.

ReactJS respecte la philosophie du monde UNIX

Rappelons le, ReactJS est une bibliothèque (library). C’est précisément l’opposé de la philosophie des frameworks plus larges de type AngularJS et EmberJS. Quand on sélectionne ReactJS on est libre de choisir la meilleure library complémentaire moderne pour régler telle ou telle difficulté. Le Javascript avance rapidement, et React permet de passer d‘un petit bout de code à une application embarquant des bibliothèques plus importantes en un clin d’oeil.

En résumé

AngularJS 2 est une amélioration considérable de ce qui était proposé dans sa première version. Le nouveau modèle de composants est plus simple à comprendre et intégrer que les directives de la version 1. Cette version supporte l’isomorphisme / le rendu universel et elle utilise une version de DOM virtuel offrant une amélioration de 3 à 10 fois supérieure en terme de performances. Ces changements font de AngularJS 2 un framework qui n’a pas à rougir quand on le compare à ReactJS. On ne peut pas nier que les fonctionnalités proposées par AngularJS 2 sont complètes et offrent des bénéfices important en réduisant l’écriture de Javascript.
Cependant le poids d’AngularJS 2 et sa syntaxe interrogent. Le fait que AngularJS soit centré HTML rend complexe sa comparaison avec ReactJS qui est centré Javascript. Dans React, il n’est pas nécessaire d’apprendre un langage particulier pour utiliser le framework. Il suffit de connaitre Javascript. Néanmoins, ReactJS n’écrit rien à la place du développeur, il y a donc beaucoup plus de code à écrire au global, même s’il ne s’agit que de Javascript. C’est le futur auquel je crois.
Article original de Cory House, publié sur le site medium.freecodecamp.com
Traduit de l’anglais par Mathieu Breton – CTO JS-Republic
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC est une société de services spécialisée dans le développement JavaScript. Nous sommes centre de formation agréé. Retrouvez toutes nos formations techniques sur notre site partenaire dédié au Training” btn_label=”Nos formations” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external=”1″]

Angular 2 contre ReactJS : il va y avoir du sang !