React Hebdo #70: ComboBox, Remotion, Gatsby, Suspense, GraphQL, Fabric...

Le composant ComboBox fait son apparition dans React-Spectrum, le design system de Adobe. Ils font un retour d'expérience et expliquent que ça n'a pas été si simple à implémenter. En particulier, l'usage de portals React demandent quelques précautions pour l'accessibilité. Je trouve que ce genre de composant est le plus difficile à implémenter dans un design system. Entre l'accessibilité, la navigation clavier, les animations et le design d'une API flexible…

Remotion permet de créer des vidéos en React, et c'est l'outil que j'utilise pour ThreadMotion. La 2.2 sort quelques nouveautés. En particulier un support de Three.js, un composant Freeze et diverses améliorations sur le player.

Des features expérimentales pour améliorer les perfs: Parallel Query Running et Webpack Persistent Caching.

Alex explique quand un composant React re-render et comment l'usage de memo permet d'optimiser son app. Rien de nouveau, mais l'explication avec des gifs plutôt bien faite et compréhensible pour les débutants.

Un autre article bien expliqué d'Alex, très visuel, et un peu plus technique cette fois. Montre que l'optimisation du render sur les listes React n'est pas si simple. Il faut d'abord stabiliser le “onChange” au lieu d'utiliser une arrow function. Autre problème (pas mentionné dans l'article) que je n'ai toujours pas résolu: comment faire en sorte que l'enfant ne ré-injecte pas l'id dans le parent xD

Swizec Teller explique qu'avec Suspense (qui viendra avec React 18.x), le chargement de données asynchrone est natif. Il compare avec React-Query et met en évidence la simplicité du code avec Suspense: on peut se concentrer sur le “happy-usecase” et directement afficher les données, comme si elles n'étaient pas asynchrones.

Une architecture d'app React simple, scalable, et dont les choix techniques sont documentés. Pas eu le temps d'étudier plus que ça, curieux de savoir ce que vous en pensez.

L'app Facebook a migré tous ses (1000+) écrans React-Native vers Fabric, la nouvelle architecture, qui devrait donc pas tarder (enfin! mais après RN 0.65 - la RC3 vient de sortir). En pratique, il est déjà possible d'utiliser certaines parties dans vos projets (cf les travaux de Marc Rousavy avec les Frame Processors et ce tweet).

Un article qui met en avant les différentes, utile pour ceux qui ont envie de tester React-Native pour la 1ère fois. N'attendez pas, lancez-vous avec Expo!

Airbnb a expliqué le fonctionnement de sa “Ghost Platform”. Le principe est d'envoyer une représentation propriétaire de votre UI (au lieu du JSON) aux différents clients qui sont capable d'en faire un rendu. C'est un peu comme si votre serveur vous retournait du VDOM React propriétaire (et me fait aussi penser aux server components). C'est pas la première fois que je vois ça sur des très grosses apps (cf Facebook Messenger) qui ont plein d'écrans dans plein de variantes: avoir plein de composants React dans son app mobile n'est pas scalable et il vaut mieux shipper un moteur qui donne la main au backend d'envoyer les variantes en payload. Au final, avoir un backend qui retourne les data json, ou du html, il peut y avoir un juste milieu ;)

Encore des nouvelles du TC39 avec quelques petites updates sur les proposals sur Array, ArrayBuffer, Class, Intl. A noter également array.groupBy() qui a été extrait dans une nouvelle proposal.

Blog post qui résume les dernières nouveautés de Firefox. Particulièrement intéressé par la proposal Error Cause dont j'ai déjà parlé plusieurs fois, qui bénéficie d'une première implémentation de “bout en bout”, avec les DevTools qui loggent correctement la chaine de cause d'une erreur.

TheGuild présente son nouveau projet: Envelop un est un système de plugins pour étendre GraphQL. Ils comparent ce nouvel outil à Babel, car il permet l'usage de features GraphQL avant qu'elles ne soient officiellement standardisées (@defer, @live…). A priori, ce système devrait pouvoir être adopté par les différents serveurs GraphQL (dont Apollo Server qui vient de sortir en v3), ce qui rendrait les plugins portable.