📨 #191: React-Router, Remix, React Query, Suspense, Compiler, Remotion, CodeHike, next-safe-action, Framer-Motion, React-Admin, StyleX, Mobx, FlashList, RN native bridging, Expo, TypeScript, State of JS, Node ...
Salut à tous !
Cette semaine, il semble que nous entrions enfin dans la saison des vacances et de l'été et que le rythme des annonces majeures concernant React se ralentisse. Nous ferons également une courte pause estivale, sautant deux numéros, et serons de retour le 17 juillet.
Du côté de React, nous continuons à avoir du contenu intéressant lié au feuilleton Suspense de la semaine dernière. Une nouvelle fonctionnalité de React Router vous permet de diviser votre arbre de route.
Du côté de React Native, il semble que l'équipe essaie de sortir la v0.75 en tant que RC, et qu'elle rencontre quelques obstacles, mais elle sortira probablement bientôt.
La nouvelle la plus excitante pour moi est la version stable de TypeScript 5.5 : c'est une excellente version, notamment pour l'inférence de type de prédicat ! Les résultats de l'enquête State of JS sont également sortis si vous voulez explorer les tendances JS.
💡 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
📦 React-Router 6.24 - Lazy Route Discovery
Cette version de React Router inclut un nouveau hook unstable_patchRoutesOnMiss qui sera appelé lorsque React Router ne peut pas trouver de route existante. Cela vous permet de charger des routes supplémentaires et de séparer le code de vos routes au lieu de les garder toutes dans un seul module monolithique. Une fonctionnalité bienvenue pour les grandes applications avec des milliers de routes, qui n'ont maintenant plus besoin de toutes les charger en amont, ce qui retarde l'hydratation.
Remix devait faire une pause, mais ce n'est apparemment pas encore le cas ! 📦 Remix 2.10 est sorti et exploite déjà la nouvelle fonctionnalité React Router en l'exposant à travers une fonctionnalité pratique « Fog of War » que vous pouvez activer avec un simple flag future.unstable_fogOfWar. Une optimisation de la récente découverte a également été implémentée pour éviter les waterfalls.
- 💸 Meilisearch — Build fast, typo-tolerant search with React
- 👀 React.dev PR - Add branding context menu : Cliquez avec le bouton droit sur le logo de la barre de navigation du site web pour accéder aux svgs officiels et aux couleurs de la marque React.
- 👀 Next.js PR draft -
nextConfig.requiredEnv - 👀 Next.js PR draft - type check for
env - 🐦 Joe Savona - "Some thoughts on the suspense changes from 19 RC" : Pour éviter des situations telles que le feuilleton Suspense de la semaine dernière, l'équipe React travaille sur des changements afin d'obtenir des retours plus tôt (groupes de travail, RFC, canary...).
- 🐦 Lee Robinsin - "Here's where we're headed with caching in Next.js" : « Notre objectif est de faire en sorte que toutes les opérations asynchrones (comme faire un
fetch) optent pour le rendu dynamique », « Nous pensons que le Prerendering partiel deviendra la valeur par défaut ». - 🗓️ React Rally - 🇺🇸Utah - 12-13 août - 10% de réduction avec le code « TWIR ». Il y a un workshop sur les React Server Components avec Kent C. Dodds
- 📨 ECMAScript News - Discover our partners' newsletter to keep up to date with ES, TC39, JS tooling, and runtimes
- 📜 Component, colocation, composition: A note on the state of React : Le récent épisode de Suspense met en évidence le décalage entre la vision de React, orientée vers les composants, et ses contraintes actuelles.
- 📜 From markdown to video - Animated code walkthroughs with Code Hike and Remotion : Si vous avez vu les récentes vidéos d'animation de code de Matt Pocock ou de Delba, voici un excellent article et des démonstrations pour comprendre comment cela fonctionne.
- 📜 Understanding React Compiler : Explique comment fonctionne le compilateur React, en commençant par les bases (transpiler, AST, mémoïsation), puis en analysant la sortie du compilateur d'un exemple concret.
- 📜 Wait for pending: A (not great) alternative Suspense algorithm : Examine la possibilité d'utiliser un algorithme différent pour Suspense, avec des compromis différents.
- 📜 How to make draggable Framer Motion elements snap to breakpoints : Article interactif implémentant des points de fixation au-dessus de Framer Motion, y compris la prise en charge de l'inertie et de la vélocité.
- 📜 Mobx Memoizes Components (You don't need React Compiler) : Prend une démo existante utilisant le compilateur React et la transforme en une application Mobx optimisée avec un minimum de changements. MobX évite les re-renders en suivant automatiquement les dépendances. Notez que cette issue Mobx explique pourquoi Mobx (basé sur des proxies) n'est pas compatible avec le compilateur, et le créateur de la lib confirme également qu'elle est déjà optimisée.
- 📜 Web Workers, Comlink, Vite and TanStack Query : Comme React Query est un « gestionnaire d'état asynchrone », il fonctionne également très bien pour délester le thread principal des tâches coûteuses.
- 📜 Storybook - Visual testing: The greatest trick in UI development : Je suis d'accord pour dire que trop de développeurs passent à côté des tests de régression visuels. Le retour sur investissement est vraiment excellent, compte tenu de la facilité avec laquelle il est possible de l'ajouter à un Storybook existant. Comme le montre cet article, couvrir le même composant avec React Testing Library demande plus de travail.
- 📜 Communication Between Client Components in Next.js : Avec les RSC, de nouveaux défis sont apparus pour faire communiquer 2 composants clients, et vous pourriez ne pas être en mesure de lever l'état à moins que le parent ne soit également un composant client. Cet article propose 3 solutions : l'utilisation d'un Provider, de paramètres de recherche et de l'état du serveur.
- 📜 How to Validate Form in Remix with clientAction : En utilisant le nouvel export Remix
clientAction, vous pouvez compléter la validationactiondu serveur et enrichir progressivement votre formulaire avec des erreurs locales. - 📜 Type-safe TanStack Query with OpenAPI : Montre comment créer des hooks génériques de React Query (
useGetQuery,usePostMutation...) qui sont entièrement typés selon une spécification OpenAPI. - 📜 How To Use Google Sheets as a Database With React via Next.js
- 📜 Is it ok to pass setState as a prop in React?
- 📦 StyleX 0.7 - CLI (experimental), Literal names for CSS variables : Le nouveau CLI transforme un dossier entier et peut être une alternative à l'intégration du bundler.
- 📦 Next-Safe-Action 7.0 - Type safe and validated Server Actions : Voir également le guide de migration v6 vers v7.
- 📦 Astro 4.11 - 500 page improvements,
<Code>component Shiki transformer - 📦 React-Admin 5.0 - Improves on UI, DX, app init, Data Providers, forms…
- 📦 Shopify Hydrogen Update - Visual Editor, Optimistic Cart, Vite stable, RichText component, SEO meta export…
- 📦 stan-js - Minimalistic state management library
- 🎥 Jack Herrington - React 19's useOptimistic: everything you need to know
- 🎥 Theo - I Used To Hate Next.js…
- 🎥 Dave Gray - Nextjs Server Actions Just Got Better (using next-safe-action)
- 🎥 Ryan Carniato - Facing Frontend's Existential Crisis, React Summit 2024
- 🎙️ Syntax - What’s Next for NextJS with Tim Neutkens
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
Cette section est rédigée par Benedikt.
- 💸 WithFrame - Ready to Use React Native Components
- 🐦 Marc Rousavy on how to get relevant log or crash information in RN for creating issues in open source libs
- 🗓️ The Geek Conf - 🇩🇪 Berlin - 18 & 25 juillet - Obtenez une réduction de 10% avec le code « TWIR ». Mo Khazali - Responsable de l'activité mobile chez Theodo UK, Matteo Collina - Directeur technique de Platformatic.dev, et Siddharth Kshetrapal - Ingénieur logiciel chez GitHub, interviendront !
- 🗓 Chain React Conf - 🇺🇸 Portland, OR - Du 17 au 19 juillet. La conférence américaine React Native est de retour avec des conférences captivantes et des ateliers pratiques ! Bénéficiez de 15% de réduction sur votre billet avec le code « TWIR »
- 👀 Revert "Make the New Architecture the default" : Il semblerait que l'activation par défaut de la New Arch soit reportée et ne fasse finalement pas partie de la v0.75 ?
- 👀 Shopify FlashList PR - New architecture support merged (but not released yet)
- 👀 Fishjam Cloud - New project by Software Mansion to bring video streaming to React Native
- 👀 expo-router-native-intent-demo - Using +native-intent API in Expo Router to support "Copy to app" functionality on iOS
- 📜 Client guide to React Native modules : Oscar explique largement les différences, les avantages et les inconvénients des différentes façons d'exposer des modules natifs à React Native, et nous aide à choisir la meilleure solution en fonction du contexte.
- 📜 Bridging React Native and Rust via JSI : Un article de Ditto, un moteur de synchronisation de données écrit en Rust, sur la façon dont ils ont fait le pont entre leur logique de base (en Rust) et RN via JSI.
- 📜 On-device AI/ML in React Native : Il s'agit d'un projet fascinant, qui aurait été inconcevable il y a encore peu de temps. Construire des filtres de caméra en temps réel avec l'IA de l'appareil dans RN.
- 📜 From web to native with React Native and Expo : Décrit le parcours d'un développeur web qui a créé sa première application mobile en utilisant RN/Expo.
- 📜 Just as Google, BAM believes in Kotlin Multiplatform : La société BAM, principalement axée sur RN, estime que CMP/KMP est un choix convaincant parmi les solutions multiplateformes disponibles et en explique les avantages et les limites.c
- 📜 Expo - FCM v1 Migration Deadline Changed to July 20th
- 🎥 Simon Grimm - TV Apps with React Native
- 🎥 JavaScript Mastery - Free 4,5h React Native Course for Beginners in 2024
🇫🇷 En français
- 🇫🇷 ReactHebdo.fr - Dernières éditions traduites en français
- 📜 Inversion de dépendances : Changer de librairie dans Next.js
- 📜 Éliminez les erreurs "Window is Not Defined" et "Hydration Mismatch" dans Next.js
- 📜 Pourquoi et comment utiliser Promise.all dans un projet front-end ?
- 🎥 React 19 est cassé... drama
- 🎥 Sortie des Résultats de State of JS - Actus JS de juin 2024
- 🎙️ Double Slash 88 - Les news web dev pour Juin 2024
🔀 Autre
- 📊 State of JavaScript 2023 - Survey Results
- 📜 How JavaScript Is Finally Improving the Module Experience
- 📜 Inline conditionals in CSS, now?
- 📜 GitHub Copilot Extensions are all you need
- 📜 MDN - New JavaScript Set methods
- 📦 TypeScript 5.5 - Inferred type predicates, narrowing for indexed access, JSDoc @import
- 📦 farm - Extremely fast Vite-compatible web build tool written in Rust
- 📦 Node 20.15 - Test plans, –inspect-await
- 📦 node-swift - Create Node modules in Swift
- 🎥 Matt Pocock TypeScript 5.5 is a banger
🤭 Fun
A plus 👋
Ne manque pas le prochain email !
