React Hebdo #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...

Nouvelle librairie de positionnement pour les éléments flottants (tooltip, dropdowns…), similaire à Tether ou PopperJS, mais plus légère, bas niveau, avec un système modulaire, découplé du DOM. Elle propose également des APIs plus haut niveau comme des composants React, et un support expérimental de React-Native! La lib est proposée par un maintainer de PopperJS, qui a jugé qu'il valait mieux créer un nouveau projet.

Une comparaison de Remix à Rails, approuvée par Michael Jackson. Evoque les primitives proposées par Remix (resource routes, loader, convention filesystem, co-location…), le contexte de “Jamstack fatigue” dans lequel on se trouve, l'avénement du déploiement Edge serverless et le retour du SSR.

Redwood vient de sortir sa 1ère release candidate, avec quelques highlights comme l'intégration avec Chakra, Fastify ou RedwoodRecord. Redwood est projet supporté par Tom Preston-Werner, le créateur de GitHub et Jekyll, qui a beaucoup utilisé Rails. Redwood focus d'abord sur la vélocité produit, avant les performances techniques. Il a des opinions fortes, comme l'usage de Chakra, Prisma, GraphQL, TypeScript, Storybook…

La v2 de cette lib de gestures vient de sortir, avec des APIs repensées, mais rétro-compatibles. Elle s'intègre bien avec les worklets Reanimated 2.

Les nouveautés:

Il y a déjà Storybook pour React-Native, mais c'est un projet séparé, qui a ses propres addons, moins nombreux. Danny est un des maintainers, et nous propose d'utiliser un nouveau plugin officiel pour React-Native-Web. Les trade-offs sont différents: on peut réutiliser tout l'écosystème de plugins existant pour le web, mais les composants React-Native peuvent s'afficher un peu différemment que sur mobile (voir ne pas fonctionner). On peut faire de la non-reg visuelle avec Chromatic, ou envoyer un lien vers le Storybook web aux stakeholders.

Les 2 approches sont complémentaires. Si un composant ne fonctionne pas, on peut toujours le désactiver avec un stub en .web.js.

Un bundler proposé par CodeSandbox et capable de fonctionner dans le navigateur, y compris avec des dépendances npm. Particulièrement intéressant pour créer des expériences intéractives d'édition de code en live. Des composants facilitent l'intégration avec React. Déjà utilisé sur la nouvelle doc React en beta. Une bonne alternative à React-Live?