React Hebdo #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome...

Apr 12, 2022

Astro Server-Side Rendering

Astro est un meta-framework moderne capable d'utiliser n'importe quelle lib UI (y compris React). Il supporte maintenant le server-side rendering, disponible en expérimental dans la v1.0 beta. Comme Remix, le framework propose une couche d'adapters pour le déploiement.

React-admin V4: Build Your Own Framework

François prend en exemple une simple interface d'admin en React, basée sur MUI et React-Hook-Form. Le code est initiallement assez verbeux, avec 90 lignes. Il refactor progressivement ce code en créant des abstractions réutilisables, pour finir sur un code déclaratif et expressif d'une 20aine de lignes.

Il explique que ces abstractions sont en fait la v4 de React-Admin (v4.0.0-RC.1 dispo). Cette nouvelle version repose sur une stack plus moderne et est plus modulaire: elle expose des composants haut niveau (basés sur MUI par défaut) mais aussi des primitives bas niveau pour créer votre propre framework. Voir aussi la série d'articles sur la v4.

An Overlooked Factor For Performance Optimization In React

Reflexion intéressante sur le besoin (ou non) de mémoiser la valeur d'un context React en fonction de la position du provider dans l'arbre. Perso je préfère quand même toujours memoiser par sécurité, on ne sait jamais si le provider ne va pas être déplacé.

Writing Redux Reducers in Rust

Retour d'expérience sur l'intégration de code métier Rust existant dans une app React et les challenges rencontrés: binding non idéal, coût de serialisation... Ils ont besoin d'accéder au même state des 2 cotés (Rust et TypeScript). Solution: créer les reducers en Rust, et retourner un diff de state à TypeScript.

How to Create and Export Web Components From a React Application

Montre comment utiliser React pour créer un Web Component. Ca a l'air relativement simple, et peut avoir son utilité dans certains contextes. Ne pas confondre avec l'usage de Web Components depuis React (arrivera officiellement plus tard).

React components composition: how to get it right

Donne quelques pistes sur quand/comment découper en sous-composants plus petits. Evoque un principe important du Clean Code (sans le nommer): Single Level of Abstraction.

Extras:

🇫🇷 Comment la librairie react-query s’est imposée dans notre stack
🇫🇷 Passer de react-scripts à viteJS
🧵 React 18 + TypeScript: typings releasés avec des breaking changes. Le type TypeScript pour React.FC n'inclus plus la prop children. Voir aussi article Removal Of Implicit Children, et ce codemod pour aider à migrer.
📜 Test component interactions with Storybook: guide complet pour créer et executer des tests d'intéraction React via Storybook et sa fonction play().
📜 How to easily reduce your NextJS bundle size by 30%? Retour d'expérience, impact chiffré de 4 actions relativement faciles à mettre en place.
📜 React 18 Quick Guide & Core Concepts Explained: résumé des principaux changements React 18
📜 Redwood Startup Fund: suite de la Redwood 1.0 Launch Week. Fond de $1M proposé par Tom Preston-Werner pour les startups qui utilisent le framework React RedwoodJS (tickets de $25k–$50k)
📜 Bad Habits of Mid-Level React Developers
📜 Improving Web Performance with React Hydration Strategies
💡 Gatsby RFC: New Bundler in Gatsby: pourrait migrer incrémentalement vers esbuild?
💡 Gatsby RFC: Script component: même genre que le composant Next.js, avec une intégration Partytown possible?
💡 Redux deprecate createStore?
💡 Remix deferred API?
🐦 React + TypeScript: pas la peine d'importer les types des event handlers
🐦 React 18 + React.lazy() + Suspense + SSR: fonctionne uniquement avec les nouvelles APIs SSR, pas renderToString.
🎥 RedwoodJS Intro par Tom Preston Werner
🎥 React Jargon Explained: What is Concurrent React?
📦 React-Native-Storybook-Starter: avec support mobile + React-Native-Web
📦 Capacitor-Remix-Templates
📦 Remix + Crystallize eCommerce Starter
🎙️ StackOverflow #430: The new version of React...

💸 Sponsors

BeJSconf: conférence JavaScript à Bruxelles et en ligne

Rejoignez des membres du TC-39, et des experts chevronnés des librairies et frameworks JS les plus en vogue, qui vous ont préparé des interventions et ateliers impressionnants afin de vous permettre d'apprendre et de comprendre les rouages de JavaScript.

Retrouvez du XState, Components, ou encore du Multi-core JS… BeJSconf abordera également des sujets non techniques tels que le leadership, l'entrepreneuriat, DevRel, DX et bien d’autres…

BeJSconf sera aussi une occasion de fêter le retour à la normale, notamment à travers l'after-party prévue pour se relâcher et surtout savourer de la bonne frite et de la bière belge.

React-Native

🇫🇷 Comment utiliser XState pour gérer l'état d'un jeu mobile React Native?
🐦 Expo: Evan Bacon automating Android app deployment: veux aller plus loin que Fastlane et permettre de déployer une nouvelle app sans étape manuelle sur l'UI du Play Store.
🐦 React-Native-{bootsplash,localize,permissions}: recherche de sponsors pour le support Fabric
📦 React-Native-Bignumber: lib Fabric/JSI performante
📦 React-Native-Purchase: fonctionne avec les workflows Expo
🎙️ React Native Radio 231 - Using Flipper's Flamegraph Tool

💸 Jobs

💡 Sponsorise React Hebdo pour publier une offre d'emploi

Maki: Développeur Frontend / Fullstack Senior - 65k / 80k

La mission de Maki est de permettre à chaque entreprise de recruter des talents sur mesure. Maki propose des tests d'évaluation standardisés avant l'embauche pour identifier les meilleurs candidats et accélérer les décisions des entreprises, sans préjugés.

Si comme nous vous aimez résoudre des problèmes complexes de façon simple, à l'aide d'outils modernes (ping TypeScript, React-Query, MUI, Playwright, …), afin de proposer des expériences fluides et efficaces, le tout dans une ambiance décontractée (si si), alors venez discuter avec nous :)

Paris 9ème - full remote possible - 65k / 80k en fonction de l’expérience + BSPCE

Showtime - CDI Remote - Top 1% (on double ton salaire !)

Vous pouvez considérer Showtime comme le "Instagram pour les NFTs" où vous pouvez découvrir et soutenir vos artistes préférés, créer et présenter votre collection d'art digital et bientôt être récompensé pour la valeur que vous créez. Ils prévoient d'aider les artistes à récompenser leurs fans en leur permettant de gagner des NFTs (au lieu de devoir les acheter).

Ils utilisent Expo avec Expo Application Services. Ils itèrent aussi vite que l'écosystème web3 évolue en utilisant ensemble React Native et Next.js grâce à React Native for Web. Ils ont construit un design system universel de haute qualité qui fonctionne sur iOS, Android et Web: Universal UI. Ils prévoient d'open-source le monorepo frontend dans peu de temps.

Ils viennent tout juste de sortir la beta sur iOS et Android. Envoie un message à Axel sur Twitter ou un email à axeldelafosse@gmail.com.

PS: j'ai travaillé avec Henry, dev chez Showtime !

Divers

Announcing TypeScript 4.7 Beta

Une belle release TypeScript. Le support ES Modules, très attendu, et de package.json "exports" qui permet de créer plusieurs points d'entrée pour un même package Node.js. Beaucoup d'autres améliorations et nouveautés, dont "moduleSuffixes" utile pour React-Native.