L’écosystème React

par Jeff Sanchez,

8 mars 2018.

Jeff Sanchez, consultant chez Spiria Boston, nous explique comment React, avec Redux et ES6/ES7 dans un environnement Node, offre un écosystème intuitif, flexible et peu contraignant pour le développement rapide d’applications Web. Cet article originellement écrit en 2016 a été mis à jour et augmenté.

Il semble qu’il n’y ait pas de fin aux nouveaux frameworks et bibliothèques JavaScript qui veulent améliorer la qualité de notre développement web. La “fatigue du framework” est un sujet de discussion depuis des années parmi les développeurs JavaScript. Beaucoup ont essayé de construire des applications complexes avec Dojo, YUI, ExtJS, jQuery UI, Backbone, Ember, Cappuccino, SproutCore, GWT — hé, quelqu’un pour se souvenir de GWT ? — Angular 1, Angular 2, Sencha, jQuery Mobile, Knockout, Meteor, Ampersand, Flight, Mithril, Polymer, React… Ça semble juste vouloir ne jamais finir !

Découvrir React

Si vous n’avez pas encore eu l’occasion d’examiner React, vous êtes probablement (à juste titre) un peu hésitant à l’idée d’investir du temps dans l’apprentissage d’un autre framework ou bibliothèque pour le développement web. Il faudrait vraiment que ce soit bien — nettement mieux que des solutions similaires — pour s’en soucier, n’est-ce pas ? Eh bien, après avoir rapidement développé une application React complexe dans le domaine des soins de santé, nous sommes heureux d’annoncer que c’est le cas. Et cela devient encore mieux quand on prend en compte l’écosystème React en pleine expansion. Puisque React est juste une bibliothèque (par opposition à un framework potentiellement rigide), il est facile de plonger ses orteils dans le monde de la React sans trop de risques et d’efforts. En outre, il s’agit d’un paradigme de flux de données unidirectionnel (à l’origine Flux, mais maintenant Redux comme standard de fait, semble-t-il) qui est assez facile à comprendre et à ajouter dans le mix techno de votre application.

Alors, qu’en est-il d’autres choix populaires que l’on entend souvent dans le même contexte que React ? Il y a Angular 1.x, que nous avions envisagé à l’époque, mais nous avions eu des problèmes avec la difficulté à déboguer son flux bidirectionnel dans des situations plus complexes, sans compter les changements radicaux avec la version la plus récente d’Angular, sa façon plus dogmatique de faire les choses, tout en étant un framework plus lourd. (Angular 2 aurait été un meilleur choix, mais n’était pas vraiment prêt à l’époque.) Ember est un autre choix populaire (ou qui l’a déjà été), mais c’est un peu trop péremptoire et sa courbe d’apprentissage est trop abrupte à notre goût, du moins par rapport à React. De plus, il utilise également l’approche bidirectionnelle qui est moins intuitive.

Flux, une approche unidirectionnelle de gestion du flux de données a également été un argument en faveur de l’utilisation de React. Comme nous l’avons mentionné, l’approche bidirectionnelle de la liaison des données d’Angular et Ember cause des problèmes de performance et ajoute une complexité inutile aux applications de grande taille.

Flux “évite le modèle-vue-contrôleur (MVC) en faveur d’un flux de données unidirectionnel” comme le dit Facebook, ce qui signifie simplement qu’il est plus facile de réfléchir aux données circulant dans votre application, en particulier lorsque vous utilisez Redux (une variante de Flux).

Plus précisément, le modèle de flux de données unidirectionnel de Flux permet une base de code plus simple et moins boguée. Cela fonctionne également bien avec React et l’aspect DOM virtuel de React. Pour plus d’informations sur Flux, voir ici.

Notre boîte à outils

Voici la liste des outils que nous avons utilisés pour nos projets avec React et Flux :

En plus du choix de React, nous avons également décidé d’utiliser ECMAScript 6 (“ES6”), la version 2015 de JavaScript. Il y a beaucoup de nouvelles fonctions/constructions du langage qui rendent le développement de React beaucoup plus agréable avec ES6 (classes, Template Strings, fonctions fléchées, opérateurs Spread, par exemple), et nous pouvons facilement utiliser Babel pour transformer notre code ES6 en code ES5 qui est supporté par presque tous les navigateurs (ce dont nous nous soucions !). Nous avons également décidé d’utiliser Webpack pour le regroupement de code source, la minification, la transformation SCSS, la gestion de Babel, etc., car c’est très efficace dans tous ces domaines, et l’industrie semble converger vers Webpack.

Avantages de React

L’une des choses les plus remarquables que nous avons découvertes lorsque nous avons commencé à expérimenter avec React est sa simplicité et sa flexibilité — nous pouvons vraiment l’utiliser pour des petites parties d’un projet, ce qui rend très facile de tester de petites expériences React dans une application qui utilise principalement d’autres bibliothèques/frameworks liés à l’interface utilisateur ou au MVC. Comme il est dit dans la documentation, React est essentiellement le V dans MVC — vous n’avez pas besoin de gérer les modèles, les contrôleurs, les services, etc. C’est aussi flexible du point de vue des versions de JavaScript — et c’est à peu près aussi simple de créer des composants React en ES5 qu’en ES6 (et même en ES7 si vous vous sentez particulièrement à la pointe... ne vous inquiétez pas, Babel va tout faire fonctionner correctement).

Un autre important aspect différenciant de React pour la création d’interfaces utilisateur modernes est la facilité avec laquelle on peut transformer une maquette HMTL statique en une page “Réact-ifiée” entièrement fonctionnelle, avec la persistance de l’état de la page, la communication avec sources de données externes, etc. Nous avons trouvé que c’était un processus assez intuitif :

Commencez avec une maquette d’interface utilisateur ;
Divisez la page en composants visuels (en passant, nous avons trouvé Pattern Lab très utile dans cette étape) ;
Décidez quel devrait être l’état des composants (et quels composants ont le plus de sens pour stocker l’état) ;
Ajoutez le code de gestion d’état (nous avons plusieurs options pour ça — plus à suivre sur ce sujet) ;
Et enfin, reliez les comportements (essentiellement les actions impliquées dans les flux de données/changements d’état de l’application).

Mais un avantage moins évident de React, quoique probablement plus important (du moins pour les applications Web de plus grande échelle et prêtes à être mises en production), réside dans son DOM virtuel associé à d’efficaces algorithmes de comparaison de DOM. Pourquoi se soucier de telles choses, dites-vous ? Parce que cela fait une grande différence en termes de performances lorsque vous avez une page avec un grand nombre de composants qui ont potentiellement le besoin d’être re-rendus. React détermine avec efficacité quelle partie du DOM a besoin d’être rendue à nouveau (via sa représentation DOM virtuelle du DOM réel) et ne reconstruit ensuite que cette partie. Pour une petite application, cela n’a pas grande importance, mais si vous avez des grilles avec une centaine de lignes et cinquante colonnes avec des composants modifiables dans la grille… c’est à ce moment que vous commencerez vraiment à voir briller React de tous ses feux (surtout par rapport à des frameworks comme Angular 1.x).

Parce que React bénéficie du plein soutien de Facebook (en passant, Instagram est implémenté avec React, donc évidemment que React est prêt pour être sur le devant de la scène), vous disposez en plus une grande base de développeurs enthousiastes qui va de l’avant, fournissant un support supplémentaire, des bibliothèques, des idées pour s’attaquer à tout type de projet application Web et affronter les problèmes que vous rencontrerez probablement. Pour nous, c’était un aspect essentiel pour nous engager dans une nouvelle approche du développement web. Un problème générique pour tout développeur d’application est la gestion de l’état de l’application, et nous avons trouvé une solution particulièrement intéressante grâce à la communauté React.

Le cas de Redux

Si vous avez regardé React, vous avez probablement déjà vu passer Flux, qui est leur “modèle de flux de données unidirectionnel” suggéré. (Plus précisément, les flux de données allant des vues aux actions, à un dispatcher, aux stores, et puis retour aux vues.) Flux a diverses implémentations et aide à organiser l’état de l’application dans les stores associés aux différents composants de l’application. Redux dans un sens va un peu plus loin que Flux, et stocke simplement tout l’état de l’application dans un store en tant que structure de données arborescente. Au début, cela peut sembler une approche douteuse pour une application complexe, mais il s’avère que c’est en fait merveilleusement simple et élégant. De plus, l’état d’application complet est une grande arborescence immuable (c’est-à-dire que toute modification de l’état de l’application produit une nouvelle version complète de cet arbre). Cela peut ne pas être immédiatement évident, mais cela simplifie grandement les choses comme la fonctionnalité annuler/rétablir, le Playback/Time Travel Debugging, et la facilité générale de débogage de l’ensemble de l’application.

Les écueils potentiels

En ce qui concerne les zones à problèmes/les pièges potentiels dans React — jusqu’à présent, nous n’avons pas vraiment rencontré de problèmes significatifs dans le cadre du développement — certains peuvent plus ou moins vous préoccuper :

JSX (la syntaxe d’extension JavaScript façon XML pour React) peut demander un peu d’habitude, et certaines personnes trouvent que le changement de contexte entre le code JSX et JavaScript est un peu difficile à lire.
La bibliothèque de composants disponible, bien que décente et croissante (voir React.rocks ou React-components.com pour de bonnes options) n’est pas aussi développée que, par exemple, celle d’Angular ; vous pourriez donc vous retrouver à faire vos propres composants maison. Nous avons dû le faire à quelques reprises (par exemple, pour des éléments tels que des onglets imbriqués et des fenêtres modales imbriquées), mais nous avons trouvé que ces développements supplémentaires étaient assez faciles.
React adopte essentiellement un flux de données unidirectionnel par défaut, donc, si vous recherchez vraiment un flux de données bidirectionnel, quelque chose comme Angular pourrait avoir plus de sens.

Mise à jour 2018

Depuis la rédaction de cet article, il y a eu plusieurs améliorations apportées à l’écosystème de React/Redux, ce qui confirme notre point de vue selon lequel React est la solution idéale pour le développement d’applications web complexes. Certaines d’entre elles sont :

Configuration plus facile pour les nouveaux projets avec create-react-application (vous n’avez plus à vous soucier d’installer et de configurer des outils comme Webpack ou Babel, c’est déjà fait pour vous). C’est extrêmement bien documenté et supporté par la communauté Facebook.
Standardisation de la gestion d’état sur Redux (déjà le cas pour Flux depuis des années), ou Mobx, essentiellement une version plus simple de Redux, pour des projets moins complexes (en termes de gestion d’état).
Changement pour la licence MIT qui est plus souple en matière de brevets, après la pression de la communauté pour améliorer la situation. (Les plaintes très médiatisées d’Automattic au sujet de la licence de React ne sont certainement pas étrangères au fait que Facebook ait changé de cap.)
Adoption de librairies comme Redux-Saga et de fonctions de générateur dans ES2017 (ES7), pour faciliter la compréhension et la gestion du code impliquant des appels asynchrones (effets secondaires).
Introduction d’un gestionnaire de yarn packages pour aider à résoudre les problèmes de versionnage des bibliothèques npm.
L’adoption généralisée de Storybook pour la conception de composants React (un genre d’outil comme Patternlab mentionné plus haut dans cet article).
Des bibliothèques de tests solides comme Enzyme et Jest sont maintenant disponibles et largement utilisées.
De plus en plus de soutien pour des bibliothèques de composants React, dotées de fonctionnalités complètes et bien stylées, provenant d’organisations telles que PrimeFaces.
Dépasse les 50 000 étoiles sur Github, et continue d’être plus populaire qu’Angular.

Conclusion

React, avec Redux et ES6/ES7 dans un environnement Node, offre un écosystème intuitif, flexible et peu contraignant pour le développement rapide d’applications Web à page unique. Il dispose d’une communauté large et grandissante, et il est facile à utiliser, autant ponctuellement sur de petits projets, sans trop de difficulté et sans exiger trop d’efforts, que pour démarrer une application complexe à partir de zéro. Je vous encourage à explorer l’écosystème React et à découvrir avec quelle vitesse vous pouvez vous lancer avec quelque chose de cool !