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

Bonjour à tous!

Une belle diversité d'articles React cette semaine! J'ai bien aimé ceux avec Rust/WASM et les Web-Components qui sortent un peu de l'ordinaire.

La semaine dernière, c'était la Launch Week pour Astro et Redwood qui ont fait quelques annonces intéressantes.

C'est calme coté React-Native.

TypeScript 4.7 est dispo en beta, encore une superbe release avec en particulier le support ESM!

Si tu es dev dans une belle startup et souhaites me soutenir: n'hésites pas à proposer à tes RH / Tech Recruiters / Engineering Manager de sponsoriser une offre d'emploi. Je n'ai pas forcément les contacts et j'aime pas trop le cold-emailing pour démarcher 😅. Je dédie 2j/semaine à cette newsletter et suis transparent sur les revenus. Après 2 ans ça couvre à peine 50% d'un TJM 😄 alors un petit coup de pouce est apprécié.

Au passage, je sais que certains d'entre vous recoivent mes emails en Spam en ce moment. C'est lié à mon provider Revue, je ne peux rien y faire 😢

🙏 Pour soutenir la newsletter: 

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.

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.

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

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.

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

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.

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.  

💡 Sponsorise React Hebdo pour publier une offre d'emploi

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

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 !

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.