React Hebdo #109: React Labs, Linaria, React-Aria, Design System, Ladle, Sandpack, Redwood, React-Native, Moon...
React
React Labs: What We've Been Working On – June 2022
React Labs est une nouvelle série d'articles: l'équipe React souhaite partager plus régulièrement son avancement sur des travaux plus ou moins expérimentaux.
Je conseille de lire l'article en entier. On y retrouve beaucoup d'infos très intéressantes, en particulier:
les Server Components: modèle async/await, plus extension
.server.js, unification Webpack/Vite...React Optimizing Compiler (React Forget) ré-écrit, et qui semble bien progresser.
l'API Offscreen qui offre des nouvelles capacités super intéressantes (instant transitions ❤️️)
Voir aussi les commentaires de Dan Abramov sur Reddit
Airbnb’s Trip to Linaria
Airbnb nous explique comment ils sont passés de Sass à react-with-styles puis Linaria. Linaria est un framework CSS-in-JS sans runtime avec extraction statique du CSS. Ils expliquent leur choix, stratégie de migration, et font un retour positif sur l'outil auquel ils contribuent.
React Aria - Date and Time Pickers for All
React Aria vient d'annoncer la sortie de composants et hooks Date et Time Picker. Comme on peut s'y attendre, il y a un véritable focus sur l'accessibilité, la fléxibilité et l'internationalisation. On sent qu'il y a énormément de travail derrière ces composants de la part des équipes Adobe.
Notes on maintaining an internal React component library
Gabe travaille sur Walrus, le design system React interne de Digital Ocean. Il propose un retour d'expérience très détaillé sur la maintenance d'un design system React dans le temps. Partage des leçons intéressantes aussi bien sur l'aspect humain que sur le design des props, l'encapsulation des composants ou la gestion des montées de version.
Capture Phase Event Handling in React
On utilise souvent la phase de "bubbling" des events DOM, mais il est parfois utile d'utiliser la phase de "capture" qui n'est pas très connue. On peut utiliser par exemple onClickCapture avec React.
Extras:
📖 You Might Not Need an Effect: nouvelle page de doc en beta
📦 Sandpack 1.0: code playground React derrière CodeSandbox. Nouveau design, support SSR, React 18...
📦 Ladle 1.0: alternative à Storybook basée sur Vite. Peut maintenant customiser la config Vite.
📦 uipkg: plugin pour exporter un design Figma en composant React
📦 Remix-routers: proposer d'adapter le routeur Remix à divers frameworks (pour l'instant uniquement Vue)
📦 React-Teleporter 3.0: support React 18
📦 SWR 2.0 Beta 4: resource preloading API
📦 React-cmdk: A command palette for React
📦 Redwood 2.0: quelques mois seulement après la v1.0? Redwood respecte le semantic versioning et incrémente simplement la version majeure à chaque breaking change.
📦 React 18.2: release avec des bugfixes SSR
📦 Vitext: alternative à Next.js basée sur Vite?
💸 Sponsor
💡 Comment sponsoriser React Hebdo
Axiom - Zero-Config Observability for Vercel
Axiom vous permet de surveiller la santé et la performance de vos déploiements Vercel en ingérant toutes vos données de requête, de fonction et Core Web Vitals.
Utilisez le tableau de bord d'Axiom pour avoir une vue d'ensemble de tous vos logs et stats Vercel, explorez des projets et des déploiements spécifiques et obtenez un aperçu de la performance des fonctions en un seul clic.
PS: J'utilise Axiom pour surveiller les logs de ma newsletter 😉
💸 Jobs
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
Pelico - Front-End Engineer - Paris/Remote - 45-70k€
Pelico développe une plateforme qui agit comme un assistant intelligent et aide les industries complexes, à optimiser la gestion quotidienne de leurs flux opérationnels. Par leurs expertises, les Pelicans collaborent pour réduire le fossé qui s’est creusé entre la technologie et l’industrie.
Tu as de l’expérience sur Single Page Applications avec React / Vue / Angular; tu utilises GraphQL, Redux ou Typescript, tu as expérimenté le Design System (Material UI, Ant Design) et enfin tu as de l’expertise en CSS : rejoint l’équipe Front End!
Salaire selon profile + BSPCE + Bureau à deux pas de Beaubourg + Mutuelle Alan Blue et d'autres avantages bientôt en place.
React-Native
Helping migrate React Native libraries to the New Architecture
L'équipe React-Native explique comment ils vont nous aider à adopter la nouvelle architecture. On retrouvera de la documentation, du support via le working group, mais aussi des exemples d'applications et de migrations. A noter que React-Native 0.69 (avec React 18) ne devrait pas tarder: les features de Concurrent React ne seront disponibles que pour les utilisateurs sur la nouvelle architecture.
@shopify/react-native-performance
Packages créés par Shopify pour profiler les performances de vos apps. Support du profiling React-Navigation et FlatList. ⚠️ Attention: 3 packages populaires qui ont le même nom 😅
Extras:
🧵 Metro + web: Metro en croissance sur le web, utilisé par Airbnb, Stripe et Expo.
📦 React-Native-Owl 1.0: outil de visual regression testing pour React-Native
📦 React-Native-Performance Config Plugin (pas le même 😅)
Divers
The cost of convenience
Une reflexion intéressante sur les abstractions frontend et leur cout... Propose un modèle mental intéressant pour différencier un framework d'une librairie (IoC - Hollywood principle - "Don't call us, we'll call you"). Tout ça illustré avec quelques exemples React.
Moon - A build system for the JavaScript ecosystem
Semble être un nouveau compétiteur à Nx et Turborepo, cette fois écrit en Rust 😏
Extras:
