Ce que nous retenons de React Brussels 2023 

La semaine dernière, Justine Bruneau-Zahiri, Fabien Kovacic et Antoine Cau ont participé à la conférence React Brussels 2023. Bien que nous disposions d’une belle renommée pour notre expertise en PHP, nous sommes aussi particulièrement attentifs aux bibliothèques et technologies JavaScript : nous contribuons à Next.js (un framework qui s’appuie sur les performances de React et partie intégrante d’API Platform), nous sommes partenaires de la core team de React Admin, nous avons créé la bibliothèque de cache React ESI, nous avons contribué à l’intégration de Turbo à Symfony, nous maintenons PM2, l’outil de supervision de Node.js…

Cette conférence, qui se tenait à Maison de la Poste, au cœur de Bruxelles, nous a plongés dans cet écosystème captivant, et nous avons été impressionnés par son contenu riche et l'accueil chaleureux qui nous a été réservé. Découvrez les conférences et les lightning talks qui nous ont marqués !

Matteo Frana, fondateur de React Bricks, a créé cet outil en constatant que les CMS sur le marché étaient soit axés sur les besoins des éditeurs de contenu, soit sur ceux des devs, mais rarement sur les deux.

C'est pour pallier ce manque qu'il a présenté React Bricks, qui permet de construire des sites web comme des Legos. Les utilisateurs créent des pages avec des "briques" préconçues sans altérer le design. Ces briques sont ensuite personnalisables avec des “props”.

Techniquement, cela se traduit par un répertoire de composants, compatibles avec diverses technologies web. Malgré l'arrivée des "server components", React Bricks est déjà utilisable pour de réels sites web. Allez le tester !

La délicate question “Qu’est-ce qu’une bonne documentation ?” a été abordée lors de cette table ronde animée par Rachel Lee Nabors, Atila Fassina, et Tejas Kumar.

La création d'une documentation de qualité revêt une importance capitale. Elle doit servir de "porte d'entrée” pour fournir rapidement des informations essentielles. En outre, elle doit être conçue pour expliquer de manière concise les points qui peuvent poser problème, permettant ainsi de gagner du temps. Il est également crucial d'inclure des exemples dans plusieurs langages, de manière à ce que les utilisateurs puissent se familiariser plus rapidement avec le sujet. La possibilité de tester le code directement depuis la documentation est un atout majeur, offrant une expérience plus interactive et plus pratique. Des liens vers GitHub pour obtenir des informations plus détaillées est une bonne pratique, car cela permet aux utilisateurs de creuser davantage si nécessaire. De plus, l'auto-documentation, étroitement liée au code, doit être constamment mise à jour pour rester pertinente.

L'accessibilité est un autre critère essentiel. Les utilisateurs ne peuvent pas consacrer un temps excessif à la lecture de l'intégralité de la documentation avant de commencer à travailler ou à tester un "Hello World". Une documentation bien structurée qui permet aux utilisateurs de trouver rapidement les informations dont ils ont besoin est un énorme avantage. La scalabilité est un aspect souvent négligé. Pour accueillir un public varié, la documentation doit être conçue avec une approche pédagogique, en évitant d'être excessivement descriptive tout en prenant en compte la diversité des compétences des utilisateurs.

Il est essentiel de comprendre son public. Par exemple, dans le cas de la documentation de React Native, certains utilisateurs peuvent être novices en React et en JavaScript, venant parfois de SwiftUI. Adopter une attitude pédagogique, expliquer sans vendre le produit, et laisser les utilisateurs prendre leurs propres décisions sont des pratiques à privilégier.

Les retours des devs sont une source précieuse d'amélioration continue. L'automatisation de la documentation des APIs, ainsi que la prise en compte du versioning et l'explication des nouveaux concepts dans les mises à jour, sont des aspects incontournables. Un exemple concret de la démarche de Spotify, avec une documentation interne et des tooltips redirigeant vers GitHub en cas d'incompréhension, illustre à quel point une documentation bien pensée peut simplifier la vie des utilisateurs.

Lorsque l'on souhaite créer son propre framework, l'une des étapes cruciales est de comprendre le rendu côté serveur (SSR). Dans cette démarche, Tejas Kumar explore la création de composants SSR de manière innovante pour expliquer le fonctionnement.

Tejas utilise Express pour le processus de rendu et s'appuie sur la fonction renderToString de React. Il met en place un routeur basé sur les fichiers pour la gestion des routes. On apprend que les frameworks, tels que Next.js, nécessitent un export par défaut dans leur fonctionnement interne.

Dans un premier temps, Tejas développe les composants sans effectuer de récupération de données. Ensuite, il montre comment intégrer la récupération de données depuis des APIs. Cependant, un problème survient lorsqu'un composant asynchrone renvoie une promesse au lieu d'un élément JSX. Il résout ce problème en expliquant comment "déballer" la promesse au niveau du routeur, à l'aide d'une fonction qu'il a nommée "unwrapRsc."

Enfin, du côté client, il explique comment hydrater le contenu rendu, permettant l'utilisation du state React, et il montre comment modifier le comportement par défaut des liens pour qu'ils fassent des requêtes aux composants serveur.

Cette présentation est très instructive pour clarifier le fonctionnement des composants serveur, bien que sa durée de 25 minutes puisse sembler un peu courte, un peu plus de temps n’aurait pas été du luxe pour tout saisir.

Cette journée nous a aussi permis d’en apprendre plus sur les mystères des rendus de React, mais aussi sur l’utilisation de l’IA avec Figma. La question de l'amélioration des performances et de l’analyse des métriques du Web a également été abordée. Nous souhaitons remercier encore une fois React Brussels pour cet événement, et notamment BeJS Community pour l’organisation. On espère vous revoir bientôt !