React JS : la librairie JavaScript de Facebook au crible
React (appelé aussi React.js ou React JS en langage courant) est un moteur de rendu JavaScript qui se démarque de ses concurrents par une architecture qui se veut efficace et performante. Il a été initialement créé chez Facebook qui l'a utilisé pour développer le fil d'actualité de son réseau social. React est publié en open source en mai 2013, sous Licence Apache 2.0. Depuis la sortie de sa version 0.12 en octobre 2014, React est proposé sous licence BSD clause 3 - Facebook autorisant en parallèle l'utilisation des brevets associés au logiciel. Dans la foulée de son passage en open source, son niveau de popularité n'a cessé de croître comme le montre la courbe Google Trends ci-dessous (illustrant l'évolution de l'intérêt pour la requête "React JS" dans Google).
Aux côtés de Facebook, React est également utilisé par Instagram, Netflix, Airbnb, WhatsApp ou encore Atlassian. Fin 2015, Automattic a par ailleurs annoncé la refonte en JavaScript et React de l'interface d'administration de WordPress.com, sa déclinaison de WordPress en mode SaaS.
React propose une logique best of breed
React peut être qualifié de moteur de rendu Web. Il s'agit d'une librairie JavaScript et non d'un framework - comme AngularJS par exemple. "Le choix d'AngularJS est comparable à l'achat d'un PC tout fait. C'est un framework full-stack. A la différence de React qui s'apparenterait plutôt à un PC à assembler soi-même", commente Nicolas Cuillery, consultant-formateur chez Zenika. Ainsi, React se concentre sur la gestion du rendu de la vue. Il peut d'ailleurs être combiné à un framework MVC (Model-Vue-Controller) ou MVVM tiers... comme AngularJS. "Mais ce n'est pas l'approche la plus naturelle", poursuit Nicolas Cuillery.
Pour gérer la structure applicative d'un site web sous React, Facebook a développé Flux. Un patron de conception qui n'impose pas d'implémentation de référence. "Il existe plusieurs implémentations de Flux. Redux est celle qui a tendance à s'imposer, du fait notamment de la simplicité qu'elle permet en termes de codage", poursuit Nicolas Cuillery. Preuve que Redux se démocratise : son créateur, Dan Abramov, a été embauché par Facebook (voir sur Youtube sa présentation des avantages de Redux à React-Europe). En matière de routage, React Routeur commence lui aussi à se dessiner comme un standard de fait pour bâtir les applications React, même si, là encore, il existe d'autres solutions. Côté AJAX enfin, il n'existe pas de brique propre à l'écosystème React, alors pourquoi pas se tourner vers l'API Fetch.
Une architecture très souple
En termes de performance, React optimise les opérations sur le DOM en utilisant un DOM virtuel. Concrètement, ce dispositif compare le DOM existant à celui dont l'affichage est demandé (retourné par la méthode .render()), puis via un mécanisme de réconciliation ne modifie que la partie du DOM virtuel qui nécessite de l'être. Au final, seuls les éléments impactés par un changement au sein de la page web sont mis à jour.
Un moteur de rendu orienté composant
Autre particularité, React est orienté composants. Ce qui le rend adapté à la création d'architectures modulaires, voire orientées microservices (reste que ses composants ne peuvent pas pour autant être containérisés). "Il est également possible d'optimiser la performance d'affichage composant par composant", ajoute Nicolas Cuillery.
Pour manipuler le Virtual DOM, React fait appel à JSX. Un langage qui étend JavaScript avec une syntaxe déclarative permettant de définir le mode de rendu HTML du composant. "C'est assez surprenant au premier abord mais ça devient naturel au fur et à mesure qu'on rentre dans la logique Composant. C'est agréable de ne plus basculer sans cesse entre les deux fichiers HTML et JavaScript. Tellement agréable qu'il est finalement dommage que les styles ne suivent pas cette logique", souligne-t-on chez Zenika. Certes, il est toujours possible d'avoir recours en parallèle à des feuilles de style CSS. Mais pour ceux souhaitant pousser la logique jusqu'au bout, il est envisageable de gérer les CSS au sein des objets React, en mode inline. Pour faciliter cette approche, une librairie comme Radium pourra émuler le CSS dans le fichier du composant. L'avantage étant de disposer de tout le code de rendu dans le même fichier, et également d'éviter le code mort.
React n'est pas encore en version stable
Point important, React n'est pas encore en version stable. Ce qui peut, dans certains cas, engendrer des montées de versions un peu douloureuses. Dans sa dernière bêta (0,15), React évolue dans l'optique de s'ouvrir à terme à la gestion d'autres technologies de rendu que le DOM.
"Grâce à son ouverture sur d'autres modes de rendu, React devrait évoluer vers la notion de React Core qui permettrait d'adresser plusieurs catégories de vue de type React Native [la déclinaison de React pour les apps natives NDLR] ou React DOM. C'est une vision qui est inscrite dans la feuille de route du projet", explique pour finir Nicolas Cuillery.