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

Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 @sebastienlorber

This week in React 👉 Chat with Swyx & Sunil 👉 Shopify Hydrogen 👉 MUI v5 👉 React antipatterns 👉 useIsMounted 👉 useReducer 👉 Expo OTA 👉 Skia Breakout 👉 Reanimated Layout anim 👉 Colorwaver 👉 Smart client vs Smart server 👉 Rome ➡️ Rust 👉 Partytown ... 🧵 Details 👇 https://t.co/YmVXhuySDF

React

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

• opinions sur les state machines

• esbuild vs swc (et pourquoi swc est plus adapté pour Next.js)

• Bun, nouveau bundler Rust, releasé prochainement

• Gatsby 4 vs Next.js

• React server-components, Shopify Oxygen/Hydrogen

🙉 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:

• CSS-in-JS: migre de JSS vers Emotion

• sx prop

• Unstyled components

• MUI X: extension payante de MUI Core

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.

💸 React Brussels: 15 Octobre 2021 (en ligne) [sponsor]

Rejoignez-nous le 15 Octobre prochain pour des discussions sur les sujets les plus trendy de l'écosystème React.

Profitez de workshops sur AWS Amplify, BlitzJS, React Concurrent Mode, Supabase et React Bricks.

Posez vos questions à nos conférenciers (Max Stoiber, Brandon Bayer) et experts techniques dans nos Discussion rooms !

Extras:

• Gatsby 4 + Netlify: la semaine dernière j'ai fait la prédiction que les nouvelles features de Gatsby 4 (SSR, DSG) tourneraient à terme sur Netlify, mais en fait c'était déjà le cas 😅

• Le Call-For-Paper de React-Europe est ouvert

• Dan Abramov partage son salaire

React-Native

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.

Extras:

• Un casse-brique implémenté avec Skia qui tourne sur React-Native. Dernière démo de Christian Falch et William Candillon.

• Reanimated 2.3: premiere beta. Les layout animations se stabilisent et la lib contiendra des transitions prédéfinies

• RFC: Accessibility APIs: nouvelles propositions de Nicolas Gallagher pour aligner les API i18n avec WAI-ARIA et simplifier l'usage pour les développeurs.

• Colorwaver est une app de Marc Rousavy (Expo) qui est une belle démo pour sa lib Vision Camera et JSI. Elle permet de detecter une palette de couleur en temps réel. Disponible sur iOS / Android.

• Running React Native everywhere: la série continue avec web et Browser Extensions + Electron.

• Meetup React-Native London: une série de meetups prévus la core team Expo.

• 🎦 React Native's JSI Explained: série de videos techniques.

• 🎧 React-Native-Radio 212: conf React-Native EU résumée.

Jobs

💸 Shotgun: Dev Fullstack Senior - Remote - 60-75k€ (+BSPCE)

Shotgun c'est une billetterie et plateforme de streaming pour des évènements electro/techno 🎶. On a déjà les plus gros évènements en France, maintenant on s'agrandit à l'international (US/Brésil/Europe) 🌎. L'équipe est composée de 13 personnes et on fait déjà plusieurs millions d'euros de volume par mois. Malgré le Covid, on vient de faire le mois le plus rentable de notre histoire.

• 🌴 Remote OK (tu peux aussi travailler depuis nos bureaux de Marseille ou Paris)

• 📈 Challenge B2C : aider les gens à sortir et s'amuser (Recommandations / Social / UX aux petits oignons)

• 📈 Challenge B2B : soutenir les organisateurs dans la création et la promotion de leur event (CRM / Business Intelligence / Marketing / Finance)

• 🤖 Côté tech : ReactNative, React, Typescript, Apollo, GraphQL, NextJS, PgSQL, Vercel (serverless)

PS: j'ai travaillé en freelance pour Shotgun, l'environnement technique est plutôt cool et les gens sympas ☺️.

💸 Une offre ci-dessous t'intéresse? Réponds à cet email!

Ask Mona: dev React confirmé - CDI Paris 45-50k

Ponicode: dev JS/React - CDI Paris 40-65k

Shift: dev React senior - CDI Paris/full-remote 50-60k

Choose: dev React-Native - CDI Paris 50-60k

Splio: dev fullstack React/NodeJS senior - CDI Paris 60-70k

F4: dev NodeJS - CDI Paris 40-50k

Aria: dev NodeJS - CDI Paris - 45-60k

Divers

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).

Extras:

• CSS for JavaScript Developers: la formation de Josh Comeau est officiellement disponible! Perso je l'ai achetée en earlybird mais je n'ai eu le temps de regarder que quelques modules. Il n'y a pas de doutes, c'est une formation nouvelle génération, très intéractive, sur laquelle il travaille depuis plus d'un an. Il a partagé son histoire dans Pre-Selling a Programming Course and Making $550k in Revenue.

• Enumerating and analyzing 40+ non-V8 JavaScript implementations

• Electron 15.0: upgrade sans gros highlight. Reste une bonne solution pour le dev cross-platform d'apps Desktop, en attendant que React-Native Desktop se démocratise. La nouvelle doc est en Docusaurus :p

• “We’ve started to land limited, non-user-facing Rust experiments in the Chromium source code tree” (pour des raisons de sécurité, pas de performances)

• How SPA architectures affect Core Web Vitals

• Speculative Prerendering