Retour sur React Advanced 2022

Toute l’équipe de Premier Octet était présente à l’édition 2022 du React Advanced : une journée de talks dans le centre Londonien !

La conférence

Cette conférence est organisée par GitNation qui semble aujourd’hui gérer la plupart des événements JavaScript en Europe (React Summit à laquelle nous avions participé, React Berlin…), de bien beaux endroits pour (re)-découvrir les pays voisins et affûter sa veille technique !

Le lieu

Un Eurostar plus tard nous voilà donc en ce vendredi 21 octobre matin à la Brewery (ancienne brasserie). Tout commence par le classico mug de café et viennoiseries, une fois le tout avalé : nous voilà fin prêts pour attaquer cette journée de conférence !

Les tracks

L’événement propose deux tracks en parallèle : la track principale Cousteau et la track Earl. Cette dernière était intégralement dédiée le matin à React Native et se situait dans une plus petite salle.

Voici notre retour sur quelques uns des talks de la journée !

Les talks

Avant de commencer, sachez que la plupart des talks sont disponibles sur la playlist YouTube !

A Career as Software Engineer - Michel Weststrate

Dans ce talk d’ouverture, Michael Westrate, développeur chez Meta (et créateur des librairies MobX et Immer) articule son talk autour d'un constat : le code ne peut pas être parfait. Quoi qu’il advienne, il est illusoire de penser qu'un code peut l'être. Celui-ci deviendra forcément obsolète : telle ou telle abstraction ne fonctionnera plus suite à une nouvelle feature du métier.

C'est pourquoi, il est important en tant que développeur(euse), de rester légèrement détaché de son code et être conscient qu'il sera sujet à changement. Dans ce contexte, Michael souligne alors l'importance des tests : si le code est imparfait, nous pouvons tout de même y ajouter des gardes-fou.

Il conclut cette partie avec une citation : "When the code is perfect, one had too much time".

🎬 Vidéo du talk

Using useEffect Effectively – David Khourshid

David, connu pour sa libriaire de state machine XState nous a parlé des bonnes pratiques concernant l'utilisation du hook useEffect. Après un bref rappel sur les ancêtres de ce hook (coucou componentDidMount,componentWillUnmount…), il souligne quelques défauts inhérents de son API :

• Par défaut, il résulte en une boucle infine ;
• Tableau de dépendances ;
• Impossible d'utiliser un await directement dans le useEffect ;
• Appels consécutifs du useEffect avec React 18 strict ;
• Retour d'une fonction de clean-up peu évidente.

Ceci-fait, il dresse ensuite différents cas d'utilisation où l'utilisation du hook n'est pas pertinente (semblable à l'article You Might Not Need an Effect sur la documentation beta de React), à savoir :

• Utiliser un maximum les events handlers (onSubmit, onBlur…) ;
• Utiliser des références si possible (gestion des focus par exemple) ;
• Ne pas utiliser de useEffect/useState pour les valeurs calculées ;
• Utiliser un maxium le pattern renderAsYouFetch pour récupérer des données (fonction loader() avec Remix, getServerSideProps() avec Next.js…).

Un bon rappel donc sur les bonnes pratiques à suivre pour utiliser au mieux le hook useEffect et rendre son code plus compréhensible !

🎬 Vidéo du talk

How I Test a Million UI States with Every Merge — Visual Testing with Storybook Michael Chan

Michael a commencé par rappeler les différents types de tests, statique, unitaire, intégration et enfin End to end. Pour ensuite se focaliser sur les tests visuels avec Storybook, en rappelant que les snapshots Jest ne sont pas suffisant.

@chantastic What a start ahah 🔥 pic.twitter.com/PQnOIR7hal

— Thibault (@ThibZ) October 21, 2022

Pour avoir un test efficace et complet il faut prendre en comptes de nombreux états et conditions :

• État simple que toute l'équipe connait (le cas "classique" le plus proche du design)
• Asynchrone (chargement, erreur, chargé)
• Variantes (dark mode, squelettes...)
• Viewports avec les breakpoints
• Navigateurs (il n'y a pas que Chrome !)
• Accessibilité (touch, clavier, lecteur d'écran...)
• Authorisation et logique
• Localisation (LTR/RTL)

Après une rapide démo, il nous propose enfin le service Chromatic pour lequel il travaille, et qui vient simplifier tout le process de tests visuels et reviews d'un Storybook avec une équipe.

Un tutoriel documenté est disponible sur le site de Storybook pour aider à la mise en place : Visual Testing with Storybook.

🎬 Vidéo du talk

React Native Everywhere - Taz Singh

Taz Singh, développeur pour l'application Guild, nous a présenté ses différentes recherches pour développer avec React Native pour le web et le mobile. Il commence par rappeler que cette technologie a été créé pour partager du code entre les plateformes iOS et Android.

Il nous présente l'historique via la naissance de plusieurs librairies (que nous utilisons ou suivont de prêt) et qui ont faconné le développement cross plateforme d'aujourd'hui:

• react-native-web qui a apporté le support web et qui permet de transformer à la volée des composants, par exemple une <View> en <div>.
• NativeBase, UI kit universel avec de nombreux composants iOS, Android et Web.
• tamagui, UI kit accès sur la performance via un compilateur et l'extraction de style (le minimum de CSS calculé au runtime)
• react-navigation avec le support du web partiel, avec une gestion approximative de l'URL et son état dans React
• expo-router, architecture de routing avec dossier, similaire à Next.js, chaque fichier dans le dossier app devient un écran mobile et une url pour l'application web

Il termine son talk en nous présentant Guild, une application d'évènements et communautés, qui utilise toutes ces librairies pour proposer une expérience utilisateur unique sur web et mobile avec une navigation commune.

Pour notre part nous avons hâte de réaliser un projet mobile avec le support du web (ou l'inverse) et de tester ces dernières avancées dans l'écosystème React Native.

The New Architecture Is Here… What Now? - Lorenzo Sciandra

Lorenzo Sciandra aka Kelset, développeur chez Microsoft très investi dans l'ecosystème React-Native, nous parle de l'arrivée de la nouvelle architecture sortie sur la release 0.68, ses impacts en terme de performances, de développement, ainsi que sur les migrations à venir sur les librairies existantes.

En effet, au fil des années, l'ecosystème React-Native a énormément gagné en maturité, avec pour objectif d'obtenir des performances de plus en plus proches de celles qu'on pourrait avoir avec les langages natifs propres à chaque OS (Swift / Objective-C pour iOS, Java / Kotlin pour Android). L'arrivée de Fabric, JSI et TurboModules a été une première étape à ces améliorations. En effet, toutes ces briques ont apporté un changement très significatif: on passe d'un comportement asynchrone vers un comportement synchrone. De plus, grâce à JSI, il est possible de déterminer à l'avance les différents types de données qui seront utilisés par les modules natifs. Hermes a aussi grandement contribué à l'amélioration de React-Native, en offrant un gain d'utilisation de la mémoire ainsi qu'un temps de démarrage amélioré. Ainsi on obtient une application qui démarre plus rapidement, qui communique plus efficacement avec les modules natifs, et qui améliorent grandement l'expérience de développement, tout cela en étant compatible avec les nouvelles fonctionnalités de concurrence de React 18.

La sortie de la nouvelle architecture au grand public étant encore assez récente, Lorenzo nous présente aussi les différentes étapes permettant de l'utiliser, comment migrer une librairie vers la nouvelle architecture et comment contribuer à son amélioration, tout en nous rappelant que la migration des librairies se fera probablement en plusieurs mois.

📖 Slides du talk

Deep diving on Concurrent React - Matheus Albuquerque

Dans ce talk Matheus Albuquerque explore les différentes approches pour tirer avantage des nouvelles fonctionnalités concurrentes et ainsi améliorer la réactivité de nos applications web.

Ce parcours initiatique démystifie les nouveautés du moteur de rendu de React 18 en présentant 4 pistes d’optimisation :

• Mieux traiter de gros volumes de données avec l’API startTransition qui introduit la notion de priorisation entre les différents rerenders
• Limiter les rerenders inutiles avec le hook useSyncExternalStore et son utilisation dans la création de sélecteurs
• Profiter des bénéfices de l'hydratation sélective qui priorise le chargement des zones avec lesquelles l’utilisateur a interagi en réduisant ainsi le first input delay
• Suivre les performances de son app avec le nouveau profiler et ses recommandations qui identifient automatiquement les tâches lentes à transférer vers l’API startTransition

Un talk optimiste sur les possibilités futures d'amélioration des performances des app React à retrouver ici :

🎬 Vidéo du talk

Creating an Accessible Web Together in 5 Simple Ways Shruti Kapoor

Shruti Kapoor, lead au sein de l'équipe technique chez Slack nous explique qu'il est important de se soucier de l'accessibilité sur un site web. Nous sommes tous soucieux de construire rapidement des applications web performantes et de créer la meilleure expérience utilisateur mais nous oublions parfois l'accessibilité qui vient en second plan car nous prévilégions souvent la rapidité de mise en production des sites web.

Mais qu'est-ce que l'accessibilité ? c'est permettre à tous (handicapées ou non) d'utiliser facilement nos sites.

Mais à quoi ressemble-t-elle dans le web ? Nous pouvons la retrouver dans divers outils d'aide à la lecture d'écran par exemple (la loupe, les lecteurs de texte ou encore les trackers pour souris)

A travers son site, Shruti Kapoor nous explique que les utilisateurs ne font pas toujours ce à quoi nous pensons ou nous attendons d'eux. En effet, elle prend pour exemple sa partie dédiée aux blogs. Ces derniers ne sont pas forcément lus par les utilisateurs.

C'est pourquoi elle nous explique l'importance de l'accessibilité, les enjeux et nous partage quelques conseils et astuces afin que nous puissions améliorer l'accessibilité dans nos applications.

Voici notamment quelques outils intéressants partagés:

• Les extensions de navigateur (aXe, WAVE)
• Les outils d'accessibilité des navigateurs
• Les outils de build (axe-core, jsx-a11y)
• Les outils d'intégration continue (AccessLint)

En conclusion

Cette conférence était une belle découverte pour nous, avec tout de même un rythme de conférence assez soutenu. Il manquait parfois 5 minutes supplémentaires lors des séances questions / réponses à l'issue de talks. En effet, l'audience (en personne ou remote) pouvait poser des questions directement via le service Slido, résultant à de nombreuses questions pertinentes ! Cela dit, nous avons apprécié la diversité des sujets abordés, la qualité des talks et une belle organisation, peut-être à l'année prochaine ?

La team Premier Octet