Retour sur la React Europe

Première journée : des hooks, des hooks et encore des hooks !

Je m’y attendais et je ne me suis pas trompé, la grosse nouveauté de React 16.8 était omniprésente durant cette première journée. Ayant la chance de travailler chez un client à la pointe dans l’utilisation de React, j’ai eu l’occasion, dès la release officielle de React 16.8, d’utiliser les hooks et de mesurer l’importance de cette petite révolution dans le monde React.

Les articles traitants des hooks inondant le web, je ne ferais pas ici une énième présentation de ceux-ci et vous invite à vous reporter à la documentation officielle de React https://reactjs.org/docs/hooks-intro.html et à ce talk https://www.youtube.com/watch?v=dpw9EHDh2bM pour mieux saisir les motivations à la base de cette petite « révolution » et mieux comprendre comment ils vont simplifier la vie des développeurs React en les aidant à écrire du code plus propre et maintenable.

La première matinée de la React Europe fut donc plutôt un rappel et un bon moyen de redécouvrir React, sa philosophie, ses origines et d’en apprendre plus sur son évolution future. Ayant eu l’occasion de travailler avec d’autres frameworks Front tels que AngularJS ou Vue, je considère que React a toujours un temps d’avance et que son minimalisme et sa puissance en font définitivement mon framework favori !

Une journée très instructive !

Il existe une dizaine de hooks mais il est clair que parmi ceux là, quelques-uns ne m’étaient pas familiers car propices à une utilisation très spécifique. Même en relisant plusieurs fois la documentation, j’avais du mal à saisir dans quels cas je serai amené à les utiliser. A ce titre, cette première journée fut très instructive. J’ai pu réviser et élargir ma connaissance des hooks et avoir l’occasion de mettre en pratique l’utilisation de quelques hooks que je n’avais jamais utilisés.

C’était par exemple le cas de l’obscur useImperativeHandle. J’ai ainsi pu mieux saisir son utilité et j’ai depuis eu l’occasion de l’utiliser dans un cas « réel » plus aisément. Même si j’avoue de ne pas voir fait de grosses découvertes lors de cette première journée, ce fut pour moi l’occasion de réviser et de me conforter dans ma compréhension des hooks et de leur utilisation. Car même si les hooks paraissent à priori plus simple que l’utilisation de composants stateful sous forme de classe, leur maîtrise nécessite un certain changement d’habitude et de façon de penser qu’il est bon de confronter à celles d’autres développeurs. J’ai par ailleurs beaucoup apprécié certains apartés du workshop traitant de librairies annexes telles que styled-component.

Olivier Tassinari, le contributeur principal de la librairie material-ui étant un des deux leaders du workshop. Son retour d’expérience quant à l’utilisation de styled-components pour construire une librairie de composants graphiques était très intéressant pour moi. En particulier le sujet des compound components. Car cela correspondant exactement à ma mission actuelle où je participe aussi à la création d’une telle librairie avec styled-component.

Deuxième journée à la React Europe : Concurrent mode, Suspense et Lazy Loading !

La seconde journée de ce workshop fut consacrée aux autres nouveautés de React. Elles devraient considérablement booster les performances et fluidifier l’affichage d’une application React.

Concurrent mode

Le futur concurrent mode permettra à React de gérer les priorités des rendus des composants et par exemple d’interrompre un long rendu pour rendre celui d’un autre composant plus prioritaire.

L’expérience utilisateur sera alors améliorée pour l’utilisateur final qui pourra par exemple interagir avec un champ de saisie ou un composant dont l’état change au survol de la souris en évitant les latences dues à d’autres rendus plus coûteux dans le reste de la page (une longue liste par exemple). Cette nouveauté, toujours considérée comme instable à l’heure actuelle, se passe « sous le capot » de React. Elle ne devrait pas impacter le code d’une application existante (il existe néanmoins un moyen d’ajuster « à la main » les priorités de rendu). J’avoue ne pas avoir tout compris de comment fonctionne techniquement ce mode asynchrone des rendus car ils s’agit d’un sujet pointu mais je compte bien suivre de près son évolution et j’attends impatiemment de le voir à l’oeuvre !

Suspense

Lazy loader

Les autres nouveautés permettant un affichage plus réactif d’une application React sont React.lazy qui conjointement avec Suspense permettra de lazy-loader (charger à la demande) un composant et par exemple d’afficher un loader pendant le chargement de celui-ci. Suspense permet, comme son nom l’indique, de suspendre l’affichage d’un composant tant que celui est en attente du réseau.

Cela fonctionne grâce à l’API des Promises, bien connue des développeurs JavaScript, rendant sa mise en œuvre relativement facile. Deux cas d’utilisations se présentent alors. Le cas ou le code d’un composant se trouve dans un autre fichier que celui qui est en train d’être rendu et qui en dépend. On parle alors de code-splitting et de lazy-load. On attend pas que le code des dépendances d’un composant soit chargé avant de commencer son rendu. La syntaxe de ces chargements à la demande avec React.lazy se base sur le futur standard JavaScript des imports dynamiques.

Data fetching

L’autre cas est celui où un composant est en attente de données d’une requête asynchrone. On parle alors de data-fetching. Il est à noter que ces cas pouvaient jusqu’à présent parfaitement être gérés en utilisant notamment les méthodes du cycle de rendu d’un composant (pour le data-fetching) ou à l’aide de libraires tierces comme react-loadable pour le code-splitting. Mais l’intégration, dans React, d’API permettant de gérer ces cas de manière native apporte beaucoup plus de clarté, de norme et cohérence dans le code d’une application. J’ai particulièrement apprécié de pouvoir toucher de manière concrète à Suspense et Lazy car je n’avais pu les expérimenter jusqu’à ce jour… Car il y a un MAIS qui m’a empêché jusqu’à présent d’utiliser cela dans mon travail quotidien.

A l’heure actuelle, Suspense n’est pas compatible avec le Server Side Rendering (crucial dans ma mission actuelle pour le référencement du site et les performances d’affichage). Greg Bergé (encadrant du workshop et par ailleurs contributeur principal de loadable-components) a évoqué un moyen de rendre Suspense compatible avec le SSR. En effet, il existe une libraire react-ssr-prepass qui semble pallier ce manquement. Malheureusement la librairie est très récente, peu performante et relève encore un peu de l’expérimentation… Il semble qu’il soit plus prudent d’attendre que les contributeurs de React résolvent eux même ce problème.

Conclusion sur ces deux journées à la React Europe

Ces deux jours de workshop furent pour moi une excellente occasion de redécouvrir toutes les dernières nouveautés de React et de mettre en pratique celles que je ne connaissais qu’en théorie. Ce fut un excellent exercice car React et son écosystème évoluent rapidement. Il est toujours très intéressant et salutaire de pouvoir s’accorder une pause dans son travail quotidien où l’on a souvent la tête dans le guidon pour revisiter les bases de ses connaissances et confronter son expérience à celles de développeurs chevronnés. A ce titre, je fus conforté dans ma connaissance de React et toujours plus motivé pour continuer à utiliser cette librairie qui évolue toujours dans le bon sens !