React Hebdo #74: 2000 abonnés! React 18, Gatsby 4, Context, React-Native, cross-platform, flashbacks, shadows, Corepack, webperf...

Dan Abramov nous partage un résumé détaillé de l'avancement de React 18 et autres features en développement. On voit que ça avance, et certaines APIs ont l'air de se stabiliser, mais il reste encore pas mal de travail. React 18 ne s'adressent pas qu'aux apps de type Facebook. Dan nous invite à ne pas extrapoler la vision d'ensemble qu'ils n'ont pas encore bien communiqué, et d'éviter de créer du contenu sur des APIs non stabilisées.

Dustin Schau présente les nouvelles features qui arrivent dans Gatsby 4. Server-Side Rendering et Deferred Static Generation devraient aider à la scalabilité des sites statiques, et redonner de l'intérêt pour le framework face à Next.js.

Ces features semblent tout de même assez couplées à l'offre Gatsby Cloud, mais je ne serai pas surpris de voir Netlify les supporter à terme (ça ressemble aux On-Demand Builders). Entre Vercel, Netlify et Gatsby, la concurrence est rude sur l'offre Cloud Jamstack.

Un article qui présente des techniques à connaitre pour bien utiliser les contexts React: encapsulation derrière provider et hooks sur mesure, mémoisation de la valeur, et séparation en 2 contexts.

Ces patterns avancés ne sont pas forcément très intuitifs, et je ne les ai pas souvent vus en application dans les codebases que j'ai audité, pourtant ils peuvent avoir un impact significatif sur la lisibilité du code ou ses performances.

Note: la combinaison de Context Selectors et Records & Tuples pourraient rendre ces patterns moins utiles.

Omar propose de créer son propre système de routing en fonction du file-system, en s'inspirant de l'API de Next.js.

Il utilise le bundler Vite via l'API import.meta.globEager(), mais ça doit aussi être possible avec Webpack via require.context().

Josh Comeau nous propose un super article sur le design d'ombres cohérentes en CSS (box-shadow et drop-shadow), en s'inspirant de la réalité, et utilisant des techniques comme le shadow layering que je ne connaissais pas du tout. Il propose une implémentation React en utilisant Styled-Components et CSS vars.

Petit flashback avec Swyx et un extrait d'un vieux podcast de Pete Hunt (Instagram), qui a fortement contribué au succès de React à l'époque.

React n'a pas fait l'unanimité lors de son introduction (via un tutoriel), et n'a commencé à convaincre les amateurs de programmation fonctionnelle qu'en prenant le temps d'expliquer les détails d'implémentations.

A cette époque, le post de David Nolen The Future of JavaScript MVC Frameworks a eu un impact fondamental. C'est cet article qui m'a convaincu, étant ancien dev Scala.

Matteo a récemment publié un boilerplate React-Native cross-platform qui vise iOS, Android, Windows, macOS, web, Electron, extension Chrome…

Il partage quelques idées originales, comme le fait de créer un package npm par plateforme. Cela permet en particulier de pouvoir utiliser une version React-Native différente pour que chacune d'elle. MacOS étant à la traine (0.63), on à pas forcément envie de rester bloquer sur une vieille version partout ailleurs.

Une série de posts intéressante (la moitié est déjà publiée), pour ceux qui veulent apprendre à configurer un monorepo React-Native (Metro, Yarn nohoist, Webpack, Babel…).

Un autre flashback de Swyx avec cet extrait de podcast (cette fois très récent), avec Christopher Chedeau qui retrace les débuts de React-Native.

Le projet est né d'un hackathon Facebook de 3 jours pour répondre à un besoin de vélocité sur les apps mobiles natives (les technos web n'étant pas assez bonnes). React-iOS est né comme ça, mais c'était pas gagné et l'histoire à bien failli s'arrêter la! C'est fou comme l'investissement d'une seule personne peut changer la donne.

Pour rester dans le cross-platform, Bartosz (Callstack) donnes quelques raisons d'utiliser React-Native Windows par rapport à d'autres possibilité comme Electron.

2 autres posts suivent sur le même sujet:

Corepack arrive en expérimental avec Node.js v16.9.0, et simplifie l'intégration avec Yarn et pnpm, alternatives populaires à npm (qui pour rappel est une entreprise à but lucratif). Un nouveau champ est disponible dans package.json pour dire quel package manager utiliser (exemple: “packageManager”: “Yarn@1.22.1”).

Cette version de Node.js supporte aussi Error Cause (mais pas encore dans les logs des erreurs il me semble).

Ben de Caliber (outil dédié à la perf web) nous propose un post plein de bons conseils, dont beaucoup s'appliquent dans un context React.

D'ailleurs, je découvre react-live-chat-loader, qui permet d'intégrer de manière performante un widget de chat!