Retour sur React Summit 2022

Après près de 3 ans d’absence, c’est donc le 17 juin 2022 que la conférence React Summit (anciennement React Amsterdam) est revenue à Amsterdam. Nous étions présents à cet événement en compagnie de nos copains de JoliCode.

Le lieu

Situé dans un hangar au bord d’un canal d’Amsterdam, l'événement est facilement accessible en transports, on peut notamment s’y rendre en bateau. Le hangar est divisé en trois grosses parties : deux salles de conférences, et une salle d’accueil où on peut se restaurer. À l’extérieur, on trouve des food trucks accessibles toute la journée, et de quoi se poser pour manger au bord de l’eau.

Les conférences

Les conférences s'étendent de 9h10 à 17h. Au programme : React Native, Web3, performances, sécurité et bien d’autres sujets divers et variés. Nous avons sélectionné ici les conférences les plus intéressantes.

Exploring AR Try-On with React Native - Kadi Kraman

Kadi nous explique les différents moyens d’intégrer de la réalité augmentée dans une application React Native, par exemple avec Viro.

Elle nous présente ensuite comment elle a utilisé le SDK de Snapchat pour intégrer de la visualisation de chaussures en réalité augmentée au sein d’une application. Les librairies existantes sur le marché ont toutes leurs avantages et inconvénients, le point fort du SDK de Snapchat étant qu’il est compatible avec une plus large variété d’appareils.

5 Years of Building React Table - Tanner Linsley

Tanner, créateur notamment de react-query, décrit dans ce talk les cinq années qui ont été nécessaires pour en arriver à la version actuelle de react-table. Entre toutes les props demandées par la communauté (jusqu’à plus de 150 props) ainsi que l’API assez contraignante, la librairie a commencé à prendre un tout autre chemin lorsque Downshift est sorti.

Tanner a donc utilisé le même principe pour sa librairie, ce qui a ensuite été amélioré lors de la sortie des hooks sur la version 17 de React. Malgré ses dernières difficultés pour intégrer TypeScript, cela a pu être réalisé à l’aide de la communauté et aujourd’hui la librairie en est à sa version 8. Cette dernière est désormais platform agnostic : pouvant donc fonctionner sur bien d’autres librairies que React telles que Solid, Vue, Svelte entre autres.

Handling Data at Scale for React Developers - Tejas Kumar

Tejas revient dans ce talk sur le principe de concurrent rendering, introduit par React 18, en présentant une petite application web impliquant une liste de données ainsi que de la recherche.

On y retrouve là des exemples parfait d’utilisation de l'API Suspense ainsi que l'utilisation du hook startTransition. Ceci dans le but de rappeler, qu'à terme, les requêtes d'API au sein d’un useEffect seront de plus en plus rares. Celles-ci seront remplacées par l'utilisation de Suspense afin de rendre les applications plus performantes.

Let’s Talk about Re-renders - Nadia Makarevich

Dans ce talk, Nadia fait un tour d’horizon des bonnes pratiques pour éliminer les re-renders inutiles. Outre l’utilisation adaptée de la mémoisation sur les composants, elle passe en revue plusieurs patterns (moving state down / wrapping state around children / mémoisation des valeurs de contexte) particulièrement efficaces pour améliorer les performances de son app. Elle détaille ses recommandations par un exemple clair et précis, repris dans un de ses articles.

From Blender to the Web - the Journey of a 3D Model - Sara Vieira

Sara nous propose dans ce talk de découvrir Blender, un logiciel de 3D open-source gratuit et de nous montrer comment insérer un objet 3D dans une page web.

Blender, logiciel connu dans son univers mais qui reste pour certain un moment douloureux. Bien qu’il soit complexe et qu’il mette à l’épreuve nos ordinateurs, il regorge d’outils pour créer de beaux objets ou décors 2D-3D.

Sara nous explique qu’il est composé de 2 moteurs de rendu différents : Eevee et Cycles. Cycles par exemple, est un moteur de traçage de rayons. Chaque rayon est calculé, de leur position de départ à leur position finale. A partir d’un cupcake réalisé sur Blender, Sara nous montre comment modifier sa couleur, sa texture et comment exporter sa création. Afin de pouvoir insérer et ré-utiliser un objet 3D, il faut exporter le fichier sous le format Gltf glb en activant la compression des composants pour éviter d’avoir un fichier trop lourd.

À la suite de cela, nous obtenons un fichier json qui est possible de transformer en composant React depuis ce site réalisé par Sara. Et voilà, il est maintenant possible d’intégrer un objet 3D dans un site react et d’y ajouter ou modifier les paramètres (lumières, taille, couleurs etc). À vous de jouer !

The Journey of CodeSandbox Projects - Ives van Hoorne

Ideas refines on working on imperfect ideas

Ives a retracé dans son talk l’histoire de CodeSandBox, de la genèse d’une petite idée, au produit qu’il nous présente aujourd’hui : CodeSandbox Project.

What if I put my dev environment on the web ?

Bien qu'imparfaite, il finit par travailler et itérer sur cette petite idée, qui devient un produit, puis une entreprise, qui finit par rencontrer un succès soudain plusieurs mois après sa publication. Deux usages vont alors surprendre son créateur et aider à affiner les ambitions du produit :

• People learn to code on CodeSandbox !
• Sandbox projects are becoming whole companies

Can we enable really big projects ?

Ives nous a ensuite fait une démonstration de quelques nouvelles fonctionnalités de cette nouvelle version destinée à supporter de projets de grande ampleur (intégration de Git et GitHub, un plugin VSCode pour se connecter à une sandbox en temps réel et les Virtual Machines & snapshots : tout l’environnement est à présent sauvegardé, versionné et se réplique en un instant).

Quelques moments waaoow :

• Ives lance le projet CodeSandBox Projects dans une Sandbox 🤯 ;
• Il lance un serveur Minecraft et construit le logo CodeSandbox 😲 ;
• Fait ensuite un fork depuis la sandbox et l’ouvre dans un nouveau navigateur : le serveur se lance en 2-3 secondes et il pop à l’endroit exact de sa session de jeu précédente. 🤯 🤯

La chasse aux coins React 🔍

Ce concours réservait bien des surprises !

Lors de l'événement, une chasse aux tickets React a été lancée. Répartis aux quatres coins du hangar, l’objectif était de réunir autant que possible de tickets afin de gagner des prix alléchants, tels que des goodies GitNation, une place pour la conférence React Advanced à Londres, ou encore un casque audio. Grâce à un travail d’équipe et à un donateur bien généreux, nous avons réussi à obtenir 65 tickets et arriver en 3ème position, remportant ainsi un lot de goodies GitNation ! Une légère déception de ne pas avoir gagné le casque audio mais nous redoublerons d'effort lors de la prochaine édition 💪.

Pour finir

Cette conférence fut pour nous une expérience très agréable, de part la localisation mais aussi par la qualité des talks proposés. Nous retournerons avec plaisir aux éditions suivantes.

Un grand bravo à toute l'équipe de React Summit 👏