React Hebdo #59: Remotion, Docusaurus, Latest Ref pattern, forwardRef + generics, Formily, Expo, HeadlessUI, Jamstack, TypeScript, Serverless...

React

Remotion 2.0 vient de sortir avec plein d'améliorations, en particulier le support de l'audio! Remotion permet de générer des videos à partir de code React!

Dans la release alpha.73, on vient de sortir quelques features sympas dans Docusaurus, pour créer votre documentation encore plus facilement. La sidebar peut maintenant être générée automatiquement, et vous n'avez plus qu'a écrire des docs markdown. La documentation est maintenant entièrement traduite en français 🇫🇷! (merci forresst!)

Kent C Dodds met en évidence un pattern utile pour éviter le problème des stale closures en React sans pour autant produire des re-renders inutiles. J'avais aussi documenté un pattern similaire dans une issue React.

Reflexion intéressante sur ce qu'implique l'adoption d'une librairie par rapport à un framework.

Une librairie de gestion de formulaire qui support React et Vue créée par Alibaba qui semble déjà populaire en Chine. Je découvre avec la v2.0 qui est sortie en beta récemment, et la doc qui commence a être traduite en Anglais. A surveiller.

Utiliser un composant avec un type paramétré avec React.forwardRef est un peu compliqué: le composant perd son type paramétré. Stefan propose 3 solutions, la dernière est plutôt cool.

Retour d'expérience de la migration incrémentale du frontend React de Sentry vers TypeScript. Coincidence, ils mentionnent le problème de React.forwardRef + generics ;)

Un article qui explique un des hooks les plus méconnus de React: useImperativeHandle. En effet, il s'agit surtout d'un workaround pour gérer certaines situations qui va à l'opposé de la philosophie déclarative de React. A associer avec forwardRef :)

L'auteur explique qu'il aime bien Styled-Components en terme d'expérience, mais gérer tout le CSS d'une app avec un runtime CSS-in-JS est trop couteux comparé aux CSS modules ou une solution CSS-in-JS sans runtime. Sur le même sujet: Real-world CSS vs. CSS-in-JS performance comparison

Francesco donne un retour d'expérience de la migration de Mailbrew de CRA + Gatsby vers Next.js.

Du coté de Tailwind Labs, la lib Headless UI proposant des composants accessibles en React et Vue passe en v1.0, et leur offre payante Tailwind UI supporte maintenant React.

Jobs

Une de ces offre vous intéresse? Répondez à cet email!

Bloom: dev Fullstack NodeJS/React senior - CDI Neuilly 60/70k

Choose: dev backend Node/TypeScript senior - CDI Paris 60/70k

Lazy: dev React senior - CDI remote (France) 55/65k

Ponicode: dev JS/React - CDI Paris 40-65k (confirmé ou senior)

StartupFlow: dev Fullstack NodeJS/React - CDI Paris 45-60k

Snapshift: dev React confirmé - CDI Paris 50/60k

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

F4: dev NodeJS - CDI Paris 40/50k

ReactNative

Le SDK 41 est basé sur React Native 0.63. On trouve quelques améliorations sympas comme des raccourcis sur le CLI pour reloader son app, la config TS automatique, l'amélioration des messages d'erreur et un nouveau system de plugins. Un support Hermes potentiellement prévu pour le SDK 43? Avec Reanimated 2 qui demande Hermes pour le debugging, supporter Hermes pourrait devenir une priorité.

Mike Grabowski (Callstack) annonce une série d'articles sur le support d'Hermes sur iOS ajouté avec React-Native 0.64. Le premier post mentionne quelques raisons d'utiliser Hermes sur iOS ainsi quel les risques associés.Je pense qu'Hermes va vraiment se démocratiser cette année. La liste des features JS supportées devient assez complète, les over-the-air updates marchent déjà avec CodePush, et Microsoft apporte également un support pour MacOS et Windows!

Pour éviter de bloquer inutilement le thread UI de React-Native. avec des calculs couteux, cette librairie propose un support du multithreading en se basant sur une architecture moderne (JSI) et un système de worklets (comme Reanimated 2).

Divers

Après avoir exposé les faiblesses de l'Incremental Static Regeneration (mis en avant par Next.js / Vercel), Netlify propose sa solution pour améliorer les temps de build des sites Jamstack. Les On-Demand builders sont des fonctions serverless qui permettent de retarder la génération des pages statiques non critiques de votre site Jamstack. Solution qui permettra à Netlify d'héberger Next.js sur un pied d'égalité face à Vercel, mais avec des tradeoffs un peu différents (atomicité du déploiement, délai à la première requête, pas de fallback stale-while-revalidate...)

Cloudflare a releasé un bon paquet de nouveautés cette semaine, et devient une plateforme de plus en plus attractive pour "fullstack Jamstack". Cloudflare Pages sort de beta, mais aussi Workers Unbound (workers avec temps d'execution jusqu'a 30s) et WebSocket in Workers qui devrait permettre d'héberger des souscriptions GraphQL en mode serverless.