React Hebdo #75: Hydrogen, MUI, anti-patterns, useReducer, OTA, Skia, JSI, Reanimated, Rome, Rust, Bun, Partytown...

Un épisode vraiment passionnant! Dispo aussi en audio 🎧. Des sujets variés qui touchent à React, de belles découvertes. J'ai aimé en particulier:

🙉 J'ai totalement loupé cette annonce en Juin! Heureusement que le podcast au dessus en parle!

Pour Tobi, CEO de Shopify, React est sur le point d'atteindre la maturité nécessaire pour les sites de e-commerce. Shopify est en train de créer Hydrogen, son propre méta-framework, et fait un “all-in” sur les React server components.

Hydrogen dispose de composants et hooks le e-commerce. Il utilise le bundler Vite, et sera déployable sur Oxygen, un runtime dédié. Oxygen/Hydrogen n'est pas sans rappeler Vercel/Next.js.

Le projet Material-UI est rebrandé en MUI pour la sortie de la v5, qui contient pas mal de changements importants:

Intéressant à lire même si on utilise pas la librairie. Explique les raisons derrière certains choix techniques, la stratégie de monétisation…

Une liste de quelques anti-patterns React à éviter. Je peux confirmer que ces erreurs sont assez courantes, et il y en a même certaines qu'on peut faire sans même s'en rendre compte (par exemple, créer un composant React pendant un render).

Matthieu rappelle qu'avoir un hook useIsMounted() est un anti-pattern (documenté sur le blog de React) pour résoudre le warning “Can’t perform a React state update on an unmounted component”. Il propose une meilleur solution basée sur AbortController.

Pierre nous propose un article assez complet sur le hook useReducer. Après quelques rappels de base sur le fonctionnement, il explique pourquoi utiliser useReducer au lieu de useState, avec des exemples de formulaires, et fait une comparaison avec Redux.

Jamon montre comment installer expo-updates sur une app React-Native. Il part volontairement sur une version non-Expo de l'app pour pouvoir détailler l'installation sur les plate-formes natives. Je suis quand même bien content qu'Expo fasse tout ça pour moi ^^. C'est tout à fait possible d'utiliser les OTA updates Expo sur une app React-Native classique, même si CodePush semble être l'option plus populaire dans ce context.

Reflexion intéressante de Swyx qui explique que le débat n'est pas REST VS GraphQL, mais plutôt Smart Clients VS Smart Servers. Il donne une bonne vision d'ensemble des implémentations les plus populaires.

L'endroit ou se trouve l'intelligence aura des implications sur UX, DX, type-safety, performance, bande-passante, sécurité…

Les créateurs originaux de Babel travaillent sur Rome, une toolchain frontend qui inclus linter, compiler, bundler, testing… Les auteurs étant des devs JS, ils ont préféré commencer sur ce language. Mais après quelques tests, utiliser Rust ne semble finalement pas être un problème à leur productivité. Le langage et son écosystème semblent proposer de meilleurs tradeoffs.

Ils expliquent aussi un changement important: le passage d'un Abstract-Syntaxt-Tree vers un Concrete-Syntax-Tree, qui permet de parser un programme invalide, d'y représenter les erreurs, et de pouvoir re-créer le programme original à partir du CST. Ca a l'air intéressant, mais j'ai encorer du mal à cerner les use-cases que cela rend possible (ils n'ont pas trop communiqué la dessus).

Un nouvel outil qui propose de faire tourner les scripts tiers dans un Web Worker pour off-loader la charge du main thread. Utilise Proxy et sync XHR pour que le script original puisse faire ses appels aux APIs DOM de manière synchrone, au lieu de devoir passer par postMessage().

L'idée semble plaire à pas mal de monde, comme Addy Osmani, Rich Harris, Evan You (réponses sur Twitter).