📨 #192: Fog of War, react-html, Memory leaks, Suspense, security, chadcn/ui Charts, MUI, XR, Filament, Rise, Expo, React Navigation, Reanimated, Node, TypeScript, pnpm, Vitest...
Salut à tous !
La newsletter est de retour après une pause bien méritée de deux semaines !
Nous couvrons donc trois semaines d'actualités en un seul numéro, et il y a trop de liens à caser dans un seul e-mail, j'ai donc dû filtrer les actualités de manière plus agressive. Malgré la saison des vacances, nous avons eu beaucoup d'excellents articles sur la communauté React, et des nouvelles assez intéressantes sur React Native !
Si vous aimez vraiment le côté exhaustif de cette newsletter, je vous encourage à consulter la version en ligne cette fois-ci : elle contient exceptionnellement des sections bonus avec deux fois plus de liens que vous pourriez encore trouver intéressants. Cela vous donne également une idée de la valeur que j'apporte : le travail que vous ne voyez pas est constitué de tous les articles que j'ai rassemblés et lus/écoutés et que j'ai dû filtrer.
Jetez un œil à la conf React-Brussels de notre partenaire (🇧🇪 Bruxelles - 18 octobre), qui nous offre une réduction de 10 % avec le code « TWIR ». Certains orateurs ont déjà été révélés !
💡 Consulter cette newsletter sur Twitter - format visuel 🎨
Pour me soutenir:
- 😘 Recommande la newsletter! Ça m'aide vraiment beaucoup!
- 💸 Sponsorise la newsletter ou sponsorise-moi
- 🧵 Retweet le dernier thread Twitter
- 📨 Réponds à cet email
- 💬 Rejoins le chat Discord
Ne manque pas le prochain email !
💸 Sponsor
The Category-Defining React Grid for Your Enterprise
Data grids are complex components of web applications, but current solutions are inefficient, require a lot of maintenance, and perform poorly. Graphite Grid transforms the landscape with two key features: retargetable rendering and reactive signal state.
Graphite Grid separates grid state from view logic, allowing a single unified state model to support a variety of render targets, declaratively or imperatively. It includes a DOM and Canvas renderer, giving developers flexible, high-performance options 🚀.
Graphite Grid is declarative and consistent, leveraging state signals to ensure seamless integration with your application. Designed with React in mind, it is the only JavaScript data grid built with React's state management primitives. Try it now!
⚛️ React
Nous en avons déjà parlé dans notre dernier numéro, mais il y a maintenant un article de blog dédié qui explique en détail de quoi il s'agit. Une nouvelle fonctionnalité de React Router vous permet de diviser votre manifeste de route en morceaux. Cet article explique comment elle a été intégrée dans Remix 2.10 et quels sont les compromis. Il s'avère qu'un manifeste de route peut devenir assez grand, et si vous ne le divisez pas, cela peut retarder l'hydratation React de votre application parce qu'il doit être chargé en amont. Si vous avez un site Remix ou React Router de taille moyenne ou grande, je vous recommande de vérifier immédiatement la taille de votre manifeste, et de réfléchir à des moyens logiques de le diviser, parce que la réduction de taille permise par cette nouvelle fonctionnalité peut avoir un impact significatif sur les performances. Le manifeste initial de Shopify est passé de 10MB à 1.9KB ! Le manifeste du site web de Docusaurus est également de 200KB et je prévois définitivement d'implémenter cette fonctionnalité.
- 💸 Meilisearch — Build fast, typo-tolerant search with React
- 👀 React Core PR -
ReactHTML.renderToMarkup: Un nouveau packagereact-htmlest introduit pour produire du HTML qui n'est pas destiné à être hydraté (comme les emails). C'est le successeur derenderToStaticMarkup, supportant des fonctionnalités modernes comme Suspense. - 👀 React Core PR -
React.captureOwnerStack(): D'après les nombreux PR que je vois, beaucoup d'efforts sont faits dans le repo de React pour améliorer le débogage, la journalisation et la production de « stack trace de son propre composant » lisible. Cette nouvelle API publique devrait être utile aux auteurs de frameworks pour afficher une boîte de dialogue d'erreur. - 👀 Next.js PR - TypeScript config file (
next.config.ts) : Une amélioration appréciée de DX pour avoir un support TypeScript de première classe dans les fichiers de configuration, ne se limitant plus aux commentaires JSDoc. - 🗓️ React Rally - 🇺🇸 Utah - 12-13 août - Obtenez 10% de réduction avec le code « TWIR ». Une programmation impressionnante est annoncée avec Kent C. Dodds, Cory House, Joel Hooks, Tejas Kumar.
- 📜 Sneaky React Memory Leaks: How the React compiler won't save you : Ceci clôture une excellente série de 3 parties sur les fuites de mémoire dans React. Kevin a trouvé un cas où l'utilisation du compilateur React introduisait une fuite mémoire dans un code qui n'en aurait pas eu normalement. L'utilisation de bind pourrait être une solution de contournement décente. Notez que ces problèmes de mémoire ne sont pas limités à React, mais sont dus à l'utilisation de la programmation fonctionnelle et des closures en JS en général.
- 📜 How to Simplify Component Imports with TypeScript Namespaces : J'avoue que je ne connaissais pas cette astuce React + TypeScript assez pragmatique que Matt Pocock approuve également.
- 📜 How to protect against a security breach in React Server Components : Cela illustre parfaitement le fait que la validation avec Zod n'est pas suffisante, et qu'il est important de vérifier le contrôle d'accès pour toute entrée concernant une action du serveur.
- 📜 WorkOS - Migrating to Next.js App Router with zero downtime : Une migration incrémentale des pages vers l'App Router n'offre pas une grande qualité de navigation. Ils ont trouvé un moyen astucieux d'exposer la même application en tant que routeur de pages et routeur d'applications, avec la possibilité de changer de routeur par le biais d'un paramètre de chaîne de requête.
- 📜 Enhancing The New York Times Web Performance with React 18 : Ils ont migré depuis React 16 et constatent de grands bénéfices tels que la diminution des re-renders et l'amélioration du score INP. Ils ont également rencontré quelques difficultés en raison des exigences plus strictes en matière d'hydratation.
- 📜 Learn Suspense by Building a Suspense-Enabled Library : Crée un hook
useFetch()activé par suspense pour démontrer de manière générale comment les bibliothèques du monde réel fonctionnent. - 📜 All About That Button, ’Bout That Button : Remix encourage l'écriture de mutations en HTML déclaratif qui fonctionne « avant » le JS, et d'autres choses intéressantes d'amélioration progressive liées aux boutons.
- 📜 Secret knowledge to self-host Next.js : Guide contenant tout ce dont vous avez besoin pour déployer la production de Next.js en dehors de Vercel.
- 📜 5 Misconceptions about React Server Components
- 📦 chadcn/ui Charts - Collection of beautiful chart components, built using Recharts
- 📦 Material UI 6.0 beta - Pigment CSS build-time CSS-in-JS support (optional), container queries
- 📦 react-three/xr 6.0 - AR/VR for react-three-fiber
- 📦 Motion-Primitives - Beautifully designed motions components based on Framer Motion
- 🎥 Jack Herrington - Warning: React 19's use Hook Can Impact App Performance : J'ai appris un détail surprenant concernant l'implémentation de React lorsqu'il rencontre pour la première fois un hook « use ».
- 🎙️ PodRocket - React Compiler with Sathya Gunasekaran and Joe Savona
Bonus :
- 👀 Next.js PR - onRequestError in instrumentation.js
- 💬 Why Vercel created Turbopack instead of using Vite
- 📜 The Secret to Maintainable Remix Apps: Hexagonal Architecture
- 📜 Can you modify React Props?
- 📜 Demistifying cache in Next.js
- 📜 How much code can Tanstack Query save
- 📜 The Experience of Deploying Next.js Apps on Cloudflare
- 📜 Preparing for React 19: a guide for WordPress 6.6 users
- 📜 A pragmatic guide for adding React to an existing Rails application (and still use Hotwire)
- 📜 Next.js and cache poisoning: a quest for the black hole
- 📜 Security advice for self-hosting Next.js in Docker
- 📜 Nested arrays and objects in Form Data with Conform
- 📜 React Form Button
- 📜 Extra Arguments for Server Actions in React Forms
- 📜 Next.js createPage helper with loader pattern
- 📜 How Zustand Was Born
- 📜 The React useRef Hook: Not Just for DOM Elements
- 📜 Path To A Clean(er) React Architecture (Part 7) - Domain Logic
- 📦 Headless UI React 2.1 - Simplified transition API and improved multi-dialog support
- 📦 Storybook 8.2 - beforeAll test hook, enhanced play function, portable stories, new onboarding
- 📦 React Flow 12.0 - SSR support, Computing flows, dark mode
- 📦 Hono 4.5 - React 19 Compatible APIs
- 🎥 Dave Gray - Toast Notification Patterns with Next.js Server Actions and next-safe-action
- 🎥 Lazar Nikolov - Implementing Clean Architecture Patterns in Next.js
- 🎥 Jolly Coding - NextJS 'use server' Trap (Accidentally Leaking Data)
- 🎥 Olivier Larose - GSAP vs Framer Motion for React
- 🎙️ This Month in React - React 19 delayed (drama-ish), why no JS Laravel, TS 5.5…
Ne manque pas le prochain email !
💸 Sponsor
WorkOS: Modern Identity Platform for B2B SaaS
With WorkOS you can start selling to enterprises with just a few lines of code.
🔐 WorkOS supports a complete User Management solution along with SSO, SCIM, RBAC, & FGA.
🏗️ The APIs are flexible, easy-to-use, and modular. Pick and choose what you need and integrate in minutes.
🎨 Design and user experience are everything. From the quality of our documentation to how your users onboard, we remove all the unnecessary complexity for developers.
✨ User Management is free up to 1 million MAUs and includes bot protection, impersonation, MFA, & more.
🤝 WorkOS is trusted by hundreds of leading startups like Perplexity, Vercel, & Webflow.
Future-proof your auth stack with WorkOS 🚀
📱 React-Native
L'équipe Margelo a publié un nouveau moteur de rendu 3D temps réel basé sur la physique pour React Native, basé sur Google Filament. Il est accéléré par le GPU grâce à Metal/Vulkan, rendu sur un thread séparé, fonctionne avec Reanimated, et supporte déjà la Nouvelle Architecture et Expo. Le readme explique bien en quoi il diffère des solutions 3D existantes basées sur expo-gl (expo-three et react-three-fiber RN). Avec Skia et Filament, l'avenir semble prometteur pour les capacités 2D/3D de React Native.
Une toute nouvelle solution pour créer des interfaces utilisateur pilotées par le serveur dans React Native, qui vous permet de déployer de nouvelles vues sur le serveur sans reconstruire/resoumettre votre application (ou même envoyer une mise à jour OTA). Cette solution est philosophiquement très proche du modèle React Server Components, mais avec des compromis légèrement différents : au prix d'un câblage manuel supplémentaire, cette nouvelle solution est agnostique en termes de framework et de langage grâce à un protocole qui définit la façon dont les vues sont sérialisées. Il est encore tôt, mais cela semble prometteur.
- 💸 RevenueCat Paywalls - Easy remotely configurable paywalls for React Native apps
- 📣 React Native 0.76 - Android minSdk will bump to Android 7.0 (API 24)
- 👀 More-reacty-native-demo : Evan Bacon expérimente l'exposition des vues natives en tant qu'éléments JSX intrinsèques en minuscules qui peuvent être utilisés directement sans les importer, comme les divs sur le web.
- 📖 Reanimated Cookbook - Real-life examples to help you learn
- 🗓️ The Geek Conf - 🇩🇪 Berlin - 18 & 25 juillet - 10% de réduction avec le code « TWIR ». Derniers billets pour les événements à distance de demain !
- 📜 Expo - Increase iteration speed with PR previews : Une nouvelle fonctionnalité intègre EAS Updates avec GitHub pour poster automatiquement les mises à jour OTA en tant que statut de commit PR. Un excellent DX, similaire à ce que Vercel/Netlify offre sur le web, mais pour le mobile ! Mon seul souhait est qu'ils affichent un QRCode dans un commentaire PR épinglé.
- 📜 Use a framework to build React Native apps : L'équipe React Native approuve enfin officiellement l'utilisation d'Expo ! Si vous n'utilisez pas de framework, vous êtes probablement en train d'en construire un.
- 📜 From Web to Native with React : Kadi d'Expo a créé une excellente ressource pour aider les développeurs web à apprendre React Native, y compris une comparaison entre les éléments intrinsèques de React DOM et React Native, comment le modèle flexbox est un peu différent, les erreurs à éviter, les nouvelles choses natives à apprendre, et globalement une grande vue d'ensemble de tout ce qu'il faut savoir sur React Native ou Expo.
- 📜 Microsoft - Building React Native for Windows Apps from a Mac : Il n'est pas nécessaire de posséder un PC Windows, et vous pouvez utiliser une VM Windows via Microsoft Dev Box ou Parallels.
- 📜 App clip with React Native and New Arch (and Swift)
- 📜 Bringing native AI to your mobile apps with ExecuTorch - Part 2, Android
- 📜 Introduction to the React Native OMH Maps Library
- 📦 React Navigation 7.0 RC : La version finale 7.0 arrive, et je suis particulièrement excité par l'API Statique et l'introduction d'une API de préchargement d'écran. C'est un premier pas vers de grandes améliorations de performances perçues, qui pourraient plus tard tirer parti des fonctionnalités Concurrente de React comme notamment
<Activity>. - 📦 FlashList 1.7 - New Architecture support!
- 📦 Yoga 3.1 - gap in %, layout conformance and regression fixes
- 📦 Reanimated 3.13 - New Architecture, Tabs Shared Element Transitions
- 📦 React Native Primitives - Unstyled universal components with a focus on accessibility
Bonus :
- 🐦 React Native running on Meta Quest demo
- 🐦 Expo running on Daylight DC-1 devics demo
- 👀 Flutter-Brownfield - a proof-of-concept for adding React Native to an existing Flutter app
- 📜 Rebuilding a 10 year old iOS app with Expo
- 📜 Building an Image Slider in React Native using Skia and Reanimated
- 📜 Publishing dual module ESM libraries
- 📜 How To Implement Local Storage In Your Expo App?
- 📜 Empowering Users: Developing Accessible Mobile Apps using React Native
- 🔗 Awesome-react-native-ui - list of react native animations created by the community
- 📦 React Native 0.75 RC.5
- 🎙️ Rocket Ship 44 - Yoga, Layouting and New Architecture with Delphine Bugner
- 🎙️ Rocket Ship 45 - React Native Apps for Seafarers with Gabriel Dierks
- 🎙️ RNR 301 - RNR Explains: Using Native Driver for Animated
- 🎙️ RNR 302 - Landing a React Native Job with Taylor Desseyn
- 🎥 Simon Grimm - From React to React Native in 12 Minutes
- 🎥 Simon Grimm - React Native vs Flutter - Which should you use?
🇫🇷 En français
- 🇫🇷 ReactHebdo.fr - Dernières éditions traduites en français
- 📜 Qu'est-ce qu'un layout en React ?
- 📜 Comparatif des différentes libraries de gestion d'état avec React & Next.js
- 📜 Comment créer une API avec plusieurs actions dans Remix ?
- 🎥 Cours React sur le State Management (Zustand et useContext API)
- 🎥 Shadcn/UI vient de sortir les Charts et c'est Game Changer !
- 🎙️ Double Slash - Les news web dev pour juillet 2024
🔀 Autre
- 👀 TypeScript 5.6 Iteration Plan
- 📜 Ecma International approves ECMAScript 2024 - What’s new?
- 📜 Speeding up the JavaScript ecosystem - Isolated Declarations
- 📦 Node 22.4 - experimental Web Storage support (localStorage/sessionStorage)
- 📦 Node 22.5 - experimental node:sqlite module
- 📦 pnpm 9.5 - New “catalogs” feature
- 📦 Vitest 2.0 - better Browser Mode
Bonus :
- 🔐 Polyfill.io supply chain attack hits 100K+ sites
- 📣 Astro + Netlify - Official Deployment Partners
- 📜 How To Hack Your Google Lighthouse Scores In 2024
- 📜 It’s about time I tried to explain what progressive enhancement actually is
- 📜 What's coming next for ESLint - Language-agnostic, core rewrite
- 📜 Is TypeScript Just A Linter?
- 📜 A guide to reading and writing Node.js streams
- 📜 TypeScript 5.5 - A Blockbuster Release
- 📦 StackBlitz pkg.pr.new - Continuous (Preview) Releases for your libraries
- 📦 fetch-super-headers - A drop-in replacement for JavaScript
Headerswith type-safe access - 📦 Deno 1.45 - Workspace and Monorepo Support
- 📦 Rspack 1.0 Alpha - Smaller outputs, module concat, Lightning CSS, lean core
- 📦 Mako - New fast bundler based on Rust
- 📦 Facebook memlab - Find JavaScript memory leaks, analyzing heap snapshots
🤭 Fun
A plus 👋
Ne manque pas le prochain email !
