Voir le profil

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

React Hebdo #109: React Labs, Linaria, React-Aria, Design System, Ladle, Sandpack, Redwood, React-Native, Moon...
Par Sébastien Lorber • Numéro #109 • Consulter en ligne
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
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 ❤️️)
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.
Extras:
💸 Sponsor
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. 
💸 Jobs
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
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 😅
Extras:
Divers
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 😏
Extras:
🧁 Mark Dalgleish
I heard some JavaScript developers saying that hydration is pure overhead, so I decided to stop drinking water.
Avez-vous aimé ce numéro ?
Sébastien Lorber

Chaque semaine, je t'envoie les nouvelles les plus pertinentes pour un(e) dev React et React-Native ouvert d'esprit.

⚠️⚠️⚠️ La newsletter React change d'adresse ⚠️⚠️⚠️   
➡️ RDV sur ReactHebdo.fr 🇫🇷

Pour vous désabonner, cliquez ici.
Si on vous a fait suivre cette lettre d'information et que vous l'aimez, vous pouvez vous y abonner ici.
Propulsé par Revue
Lambda Scale - SIRET 82951115300027