This Week In React

Share this post

React Hebdo #109: React Labs, Linaria, React-Aria, Design System, Ladle, Sandpack, Redwood, React-Native, Moon...

substack.thisweekinreact.com

React Hebdo #109: React Labs, Linaria, React-Aria, Design System, Ladle, Sandpack, Redwood, React-Native, Moon...

Sébastien Lorber
Jun 22, 2022
Share this post

React Hebdo #109: React Labs, Linaria, React-Aria, Design System, Ladle, Sandpack, Redwood, React-Native, Moon...

substack.thisweekinreact.com

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:

  • 📜 5 Big Takeaways from Remix Conf

  • 📜 What is XState used for?

  • 📜 The Case for Use.GPU

  • 📜 Why Use useReducer?

  • 📜 React Element vs Component

  • 📜 Inversion of Control and JSX Injection via Context API

  • 📖 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?

  • 🐦 React-Three-Fiber + Html embed

  • 👥 React-conferences

  • 🧵 React Summit Sketches

💸 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:

  • 📜 Writing fastlane scripts in Javascript

  • 🧵 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 😅)

  • 📦 Siri Shortcuts Config Plugin

  • 📦 React-Native-Firebase v15

  • 🎙️ RNR 239 - Shrink your app with ProGuard

  • 🎙️ The React Native Show Coffee Talk #3 - Open Source

  • 🎙️ The React Native Show #13 - Migration to React Native

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:

  • TypeScript 4.8 Beta

  • Why You Might Prefer Map Over Object In JavaScript

  • Sponsoring dependencies: The next step in open source sustainability

  • CSS - Complex vs Compound Selectors

  • Socket for GitHub 1.0

  • State of Open Source Security 2022

  • CSS - Backdrop Filter finally in Firefox 103

  • V8 - Discontinuing release blog posts

  • Bringing forward the End-of-Life Date for Node.js 16

  • CSS - New syntax for range media queries in Chrome 104

  • Software Engineering - The Soft Parts

  • Lerna 5.1

  • Boa v0.15

  • zx 7.0

  • Tauri 1.0

  • Deno 1.23

  • Deno raises $21M

Twitter avatar for @markdalgleish
🧁 Mark Dalgleish @markdalgleish
I heard some JavaScript developers saying that hydration is pure overhead, so I decided to stop drinking water.
8:42 PM ∙ Jan 18, 2023
Share this post

React Hebdo #109: React Labs, Linaria, React-Aria, Design System, Ladle, Sandpack, Redwood, React-Native, Moon...

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing