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

Bonjour à tous!

Encore une semaine avec beaucoup de contenu, dont 2 articles officiels sur les blogs React et React-Native.

L'écosystème React continue de se développer, et mon workflow de curation s'améliore aussi. Résultat: j'ai de plus en plus de liens à partager 😅

D'ailleurs je suis curieux, le fait d'être exhaustif est plûtot un bug ou une feature? 😄 Tu peux me répondre par email ou sur le sondage Twitter.

Le problème c'est aussi que Gmail tronque ma newsletter 😬. C'est en partie à cause de mon provider Revue et ses liens de tracking à rallonge. Je pense migrer prochainement vers ConvertKit.

Pour info, on fait un debrief de la conf App.js avec le Meetup React & React-Native Bordeaux - 29 Juin - 18h30 - en ligne.

🙏 Pour soutenir la newsletter: 

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:

Voir aussi les commentaires de Dan Abramov sur Reddit

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 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.

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.

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.

💡 Comment sponsoriser React Hebdo 

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 😉

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 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.

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.

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 😅

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.

Semble être un nouveau compétiteur à Nx et Turborepo, cette fois écrit en Rust 😏