📨 #196: Forms, Jotai, DI, Electron, Docusaurus, Signals, Plunk, React-Server, Switchboard, React-Call, RN WebGPU, Nitro Modules, use dom, macOS, Screens, Autolinking, Cocoapods, Corepack, Node.js, TypeScript...
Salut à tous !
Cette semaine, nous accueillons 2 nouveaux contributeurs pour assurer la continuité de la newsletter tout au long de l'année, même lorsque Seb fait une pause.
Cyril et Matthieu de Theodo Apps (anciennement BAM) sont présents 👋, pour vous présenter les dernières nouvelles des mondes React et React Native.
C'est une semaine relativement calme pour React, avec quelques discussions en cours sur le feuilleton Suspense dans React 19.
Et React Native ? C'est là que se trouve la véritable activité !
Entre la démonstration par Expo d'un moyen d'intégrer les composants React DOM et le lancement passionnant de React Native WebGPU, il y a beaucoup de choses à dire. De plus, nous nous plongeons dans de nouvelles approches du développement de modules natifs qui ne manqueront pas de bouleverser la donne. Et React Native 0.75 est sur le point d'arriver, nous en parlerons la semaine prochaine !
Notre partenaire conf reactjsday (🇮🇹 Verona - 25 octobre) fête sa 10ème année en passant à 2 sessions (16 conférences). Bénéficiez d'une réduction de 10% avec le code « TWIR ». D'excellents orateurs ont déjà été annoncés : Matheus Albuquerque, Aurora Scharff, Dani Coll, et bien d'autres encore !
💡 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
Make the most of your design system with StackBlitz
Your design system makes web development more efficient and consistent, but we know that building and maintaining it comes with no shortage of challenges. StackBlitz makes design systems easier to evangelize, maintain, and evolve. With StackBlitz you can:
- 📈 Increase adoption rates: Provide one-click instant environments your team can use to try internal libraries.
- 💻 Elevate developer experience: Include live code examples in your documentation.
- 🐛 Improve bug reporting: Instantly filter out true issues and never spin up heavy local installations for a simple bug report ever again.
- 🤝 Simplify collaboration: Facilitate seamless collaborations across engineering, design, and other departments.
Ready to transform your design system workflow? Get started now!
⚛️ React
- 💸 Chromatic – Visual testing for Storybook, Playwright, and Cypress. Catch UI bugs that functional tests miss. Lightning-fast & zero flake.
- 👀 React 19 - Disabling prerendering siblings of suspended components breaking common pattern : L'équipe React travaille sur l'annulation de ce changement qui devait être inclus dans React 19 mais qui aurait dégradé les performances de beaucoup de SPA. Aucune date prévue pour le moment, cela peut prendre un certain temps pour obtenir une version stable de React 19.
- 🐦 Matt Pocock has a suggestion for a new approach to library typings : React pourrait par exemple exposer les types
useState
avec des espaces de noms TypeScript - 🐦 Astuce de Matt Pocock pour ajouter l'auto-complétion à vos props de composants : Utilisation de
string & {}
- 📜 A deep dive on forms with modern React : Kent explique comment utiliser les nouveaux hooks
useFormStatus
,useActionState
etuseOptimistic
. - 📜 How Jotai was born : Daishi Kato revient sur ses multiples expériences en matière de bibliothèques de gestion d'état avant de créer Jotai.
- 📜 Why using dependency injection in your app can lead to cleaner and easier to maintain code : Un article précieux qui encourage la réflexion sur l'injection de dépendances dans le développement frontend, en particulier pour ceux qui travaillent sur des projets React plus complexes.
- 📜 Building an App with Next.js and Electron with Server Components Support : Explique comment détourner Next.js pour faire tourner un serveur RSC dans une application Electron.
- 📜 Optimizing SPA load times with async chunks preloading
- 📜 What is a Component Library and Should You Build Your Own?
- 📦 Docusaurus 3.5 - Authors pages and many new blogging features
- 📦 Impact-React in RC - Signals for React, by CodeSandbox
- 📦 Plunk - New OSS email platform, with react-email and jsx-email integrations
- 📦 react-switchboard - Quickly create custom DevTools for your apps
- 📦 react-call - Imperatively display React Components and await their result : Une idée intéressante pour simplifier la mise en place de dialogues de confirmation, de toasters...
- 📦 @lazarv/react-server - An alternative framework with Server Components
- 🎙️ Syntax.fm - We React to State of React Survey
- 🎙️ Syntax.fm - CSS Components: Tailwind, Panda, Scoped, Modules, Classes, Variables, CSS-in-JS and Sprinkles!
- 🎥 Sam Selikoff - Avoid premature abstraction with Unstyled Components
Ne manque pas le prochain email !
💸 Sponsor
Statsig: Ship, Measure, Repeat
The feature management, A/B testing, and product analytics tools used by OpenAI, Notion, & Brex. Build better products by measuring everything you ship 🚀
Install Statsig once and get:
🧪 A/B Testing: Automated experiments with advanced stats. Ship only the features that work
🚩 Feature Flags: Unlimited free flags and turn any flag into an A/B test with one click
🥇 Product Analytics: Track growth and measure feature impact. Conduct analysis by feature flag or A/B test group
🎥 Session Replays: Replay user interactions to understand experiences and frictions
🌐 Web Analytics: Drop a JS snippet for essential website metrics and dashboards
Get up to 2M free-tier events and 10K session recordings — all for free!
📱 React-Native
React Native WebGPU vient d'être lancé, offrant une API unifiée pour exploiter le GPU pour des graphiques et des calculs avancés dans React Native ! En réutilisant la norme Web API, nous serons en mesure d'intégrer facilement les échantillons de code et les bibliothèques WebGPU existants, tels que ThreeJS, directement dans React Native. Au-delà du graphisme, le WebGPU React Native peut être utilisé pour des tâches telles que les calculs matriciels, ce qui le rend intéressant pour les algorithmes d'apprentissage automatique sur appareil. Il est construit à l'aide de Nitro Modules pour une interopérabilité fluide entre Typescript et C++. Actuellement, il est disponible en aperçu technique, ce qui laisse présager des développements passionnants !
L'avenir des modules React Native
Une période passionnante pour les développeurs React Native ! Marc Rousavy bouleverse les choses avec NitroModules, une nouvelle façon d'écrire du code natif 📦 qui fait décoller les solutions existantes dans les tests de vitesse. Il a rencontré quelques limitations avec JSI dans VisionCamera. Le projet est déjà stable du côté C++ et est déjà utilisé dans divers projets comme 🐦 react-native-unistyles et react-native-webgpu, avec des liaisons Swift et Kotlin toujours en cours.
👀 Entre-temps, une nouvelle proposition visant à promouvoir l'utilisation de Swift pour les TurboModules a vu le jour. Ces changements faciliteront le développement de modules natifs en s'éloignant de l'Objective-C et du C++. Avec ces mises à jour, la création de modules natifs est sur le point de s'améliorer considérablement !
- 💸 Galaxies.dev - Become an expert React Native Developer & Save $65 before price increases next Tuesday!
- 👀 React Native 0.76 will likely bump the minimum iOS version to 15.1
- 👀 “use dom” - Expo is working on a way to seamlessly integrate React Web components in React Native apps : La nouvelle fonctionnalité expérimentale d'Expo permet d'importer des composants React DOM, en communiquant avec eux avec des props et des callbacks ! Les composants sont rendus avec des webviews et non des vues natives, donc cette fonctionnalité sera probablement plus utile pour les migrations ou les fonctionnalités secondaires.
- 👀 React Native Screens 4.0 beta : Avec les « custom detents » d'iOS et les « form sheets » d'Android
- 👀 Upcoming Autolinking performance benefits shipping in React Native 0.75 & Expo SDK 51
- 📖 Expo Docs update - Unit testing with Jest : Explique maintenant comment configurer jest-expo et la bibliothèque de test React Native
- 🗓️ React Universe Conf - 🇵🇱 Wrocław - 5-6 septembre. Bénéficiez d'une réduction de 10% avec le code « TWIR ». Intervenants : Dan Abramov, Evan Bacon, Kent C. Dodds, Delba Oliveira...
- 📜 Cocoapods is officially in maintenance mode : React Native devra migrer à un moment ou à un autre
- 📦 react-native-macos support for RN 0.74 is out
- 🎥 Reactiiive - Building a Story List UI with Reanimated (React Native)
- 🎥 Simon Grimm - React Native Firebase Authentication with Expo Router
- 🎙️ RNR 303 - Stories from Chain React 2024
🇫🇷 En français
- 🇫🇷 ReactHebdo.fr - Dernières éditions traduites en français
- 📜 Comment afficher une liste en React ?
- 🐦 Antoine Lin explique comment optimiser le SEO d'un site Next.js
- 🎥 Melvynx - Next.js : N'utilise plus les API Routes, voici ton nouvel outil favori
🔀 Autre
- 👀 Node.js - Add Support for transpiling typescript enums & namespaces
- 📜 Node.js Takes Steps Towards Removing Corepack
- 📜 Animating entry effects with CSS is now in baseline after it was added to Firefox 129
- 📜 Common Causes of Memory Leaks in JavaScript
- 📜 An approach to optimizing TypeScript type checking performance
- 📜 Exploring the Possibilities of Native JavaScript Decorators
- 📜 Animating Figma's SVG Exports
- 📦 Cheerio 1.0 - Finally stable after 7 years of RC
- 🔗 e18e - An initiative for performance in the JS ecosystem
🤭 Fun
A plus 👋
Ne manque pas le prochain email !