React Hebdo #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome...
Discover more from This Week In React
React Hebdo #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome...
React
Astro Server-Side Rendering
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.
React-admin V4: Build Your Own Framework
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.
An Overlooked Factor For Performance Optimization In React
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é.
Writing Redux Reducers in Rust
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.
How to Create and Export Web Components From a React Application
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).
React components composition: how to get it right
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.
Extras:
🇫🇷 Comment la librairie react-query s’est imposée dans notre stack
🧵 React 18 + TypeScript: typings releasés avec des breaking changes. Le type TypeScript pour
React.FCn'inclus plus la propchildren. Voir aussi article Removal Of Implicit Children, et ce codemod pour aider à migrer.📜 Test component interactions with Storybook: guide complet pour créer et executer des tests d'intéraction React via Storybook et sa fonction
play().📜 How to easily reduce your NextJS bundle size by 30%? Retour d'expérience, impact chiffré de 4 actions relativement faciles à mettre en place.
📜 React 18 Quick Guide & Core Concepts Explained: résumé des principaux changements React 18
📜 Redwood Startup Fund: suite de la Redwood 1.0 Launch Week. Fond de $1M proposé par Tom Preston-Werner pour les startups qui utilisent le framework React RedwoodJS (tickets de $25k–$50k)
💡 Gatsby RFC: New Bundler in Gatsby: pourrait migrer incrémentalement vers esbuild?
💡 Gatsby RFC: Script component: même genre que le composant Next.js, avec une intégration Partytown possible?
🐦 React + TypeScript: pas la peine d'importer les types des event handlers
🐦 React 18 +
React.lazy()+ Suspense + SSR: fonctionne uniquement avec les nouvelles APIs SSR, pasrenderToString.🎥 RedwoodJS Intro par Tom Preston Werner
📦 React-Native-Storybook-Starter: avec support mobile + React-Native-Web
💸 Sponsors
BeJSconf: conférence JavaScript à Bruxelles et en ligne
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.
React-Native
🇫🇷 Comment utiliser XState pour gérer l'état d'un jeu mobile React Native?
🐦 Expo: Evan Bacon automating Android app deployment: veux aller plus loin que Fastlane et permettre de déployer une nouvelle app sans étape manuelle sur l'UI du Play Store.
🐦 React-Native-{bootsplash,localize,permissions}: recherche de sponsors pour le support Fabric
📦 React-Native-Bignumber: lib Fabric/JSI performante
📦 React-Native-Purchase: fonctionne avec les workflows Expo
💸 Jobs
💡 Sponsorise React Hebdo pour publier une offre d'emploi
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
Showtime - CDI Remote - Top 1% (on double ton salaire !)
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 !
Divers
Announcing TypeScript 4.7 Beta
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.
Extras:
Announcing Rome Formatter: lien cassé lors de la dernière édition 😅 Rome propose un formatteur de code écrit en Rust. Essentiellement compatible avec Prettier, mais 9-12x plus rapide, et capable de formatter du code invalide.
Node v12.22.12: dernière version v12 LTS
JavaScript Testing Best Practices: mise à jour, dispo en Français
Prevent the introduction of known vulnerabilities into your code: nouvelle action GitHub, facile à mettre en place
New to the web platform in March: bon résumé pour survoler l'essentiel
Devs For Ukraine: conf 25-26 April
ECMAScript proposal “Change Array by copy”: four new non-destructive Array methods
With 3 months left before IE retirement, new enhancements arrive in Microsoft Edge for IE mode
