📨 #198: React-Email, MUI, Rspack, prerendering, tree-shaking, Next.js, TanStack, Remix, RSC, Code Hike, Astro, CodePush, visionOS, Tophat, Bluetooth, MKKV, Swift, Re.Pack, Reanimated, TypeScript, Node...
Salut à tous !
On dirait que c'est déjà la fin de l'été, hein ?
Cette semaine, nous avons reçu de nombreux articles et nouvelles versions de grande qualité !
Je suis particulièrement enthousiaste à propos de React Email, que j'aimerais utiliser pour un prochain template d'email de newsletter, et de Rspack que je suis en train d'adopter pour Docusaurus pour remplacer webpack.
💡 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
WorkOS: Modern Identity Platform for B2B SaaS
With WorkOS you can start selling to enterprises with just a few lines of code.
🔐 WorkOS AuthKit 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.
✨ AuthKit is free up to 1 million MAUs and includes bot protection, MFA, RBAC, & more.
🤝 WorkOS is trusted by hundreds of leading startups like Perplexity, Vercel, & Webflow.
⚛️ React
Une nouvelle version majeure de React Email est disponible. Les points forts sont les suivants :
- Une toute nouvelle bibliothèque de 54 composants à copier/coller, similaire à shadcn/ui
- Amélioration des performances de rendu par un facteur de 11
- Support de React 19 RC
- 💸 Reactile – a new approach to React-based web apps. Create your own views. Let it handle your windows and widgets in a single browser tab
- 👀 React Core PR - Schedule prerender after something suspends : Vous vous souvenez de la controverse sur le changement de comportement de Suspense qui a retardé la sortie de la version stable de React 19.0 ? Andrew a mis au point une implémentation pour ajouter la prise en charge du pré-rendu des frères et sœurs dans les composants Suspense, et ceci est le premier d'une série de PR. Il introduit un nouveau concept de « pré-rendu » qui devrait nous donner le meilleur des deux mondes : garder le pré-rendu des frères et sœurs sans bloquer le fallback de Suspense !
- 👀 Next.js PR - Apply optimization for unused actions : Mise en place d'un « tree-shaking » des server actions inutilisées trouvées dans les fichiers « use server » de haut niveau (pas en ligne). Cela permet d'atténuer un risque de sécurité signalé par la communauté et d'éviter d'exposer des endpoints par erreur.
- 👀 React DevTools PR - Support Server Components in Tree : Ajoute également un badge
[server]. - 👀 React Router PR - Add support for
routes.ts: Définit une liste statique de routes, avec la possibilité d'ajouter la convention du système de fichiers Remix. Le plugin Vite utilise ce fichier pour créer des bundles pour chaque route. - 📖 TanStack Start new doc - Server Functions : Il donne un aperçu intéressant du futur framework basé sur TanStack-Router. Il utilise un
createServerFn()explicite en plus des directives 'use server' et peut vous donner accès au contexte de la requête. - 📖 Next.js new doc - ISR with App Router
- 🗓️ React-Brussels - 🇧🇪 Bruxelles - 18 octobre - Bénéficiez d'une réduction de 10% avec le code « TWIR ». Le programme complet est maintenant disponible, visitez le site web de la conférence !
- 🗓️ React Advanced London - 🇬🇧 Londres - 25 & 28 octobre - Des billets à distance gratuits sont disponibles, cliquez ici !
- 🗓️ Next.js Conf - 🇺🇸 San Francisco & Online - 24 octobre
- 📜 Error handling and retry with React Server Components : Pour récupérer les échecs de RSC, vous pouvez présenter un bouton de réessai dans votre
<ErrorBoundary>, et appeler Next.jsrouter.refresh()dans une transition. - 📜 Everything about Google Translate crashing React (and other web apps) : Un article de blog interactif qui explique en détail comment Google Translate fonctionne et comment il interfère avec la réconciliation du DOM et React, entraînant des plantages ou des textes qui ne se mettent pas à jour. Malheureusement, il n'y a pas de véritable solution.
- 📜 Multipart Namespace Components: Addressing RSC and Dot Notation Issues : Explique comment des composants comme
<Card.Body>peuvent causer des problèmes dans le monde RSC et empêcher le tree-shaking. Suggère d'utiliser des exports ES nommées au lieu d'assigner des propriétés au composant racine par défaut. Des librairies comme Chakra et Radix le font. - 📜 Implementing React from scratch : Réimplémente le typage, la réconciliation et les hooks. Vous pourriez découvrir des choses surprenantes en cours de route, comme la possibilité d'appeler
useContextconditionnellement, ou le fait queuseCallbackest similaire àuseMemorenvoyant un callback. - 📜 An SSR Performance Showdown : Vous avez peut-être vu ce benchmark qui montre que React SSR est lent. Il devrait être mis à jour avec des chiffres plus précis prochainement. Le PR de Dan Abramov a rendu React SSR x4 plus rapide en activant le mode production, l'exécution automatique de JSX, et en mettant à jour React 19 RC (Fast JSX).
- 📜 Never Call new Date() Inside Your Components : Pour garder vos composants testables, vous devriez éviter d'initialiser l'état avec des fonctions impures comme
new Date()ouMath.random(), et les passer en tant que props à la place. Selon moi, vous pouvez aussi utiliser le contexte React. - 📜 Consuming a Remix backend from a mobile app or external client : La solution de contournement
?_datane fonctionnera plus en mode Remix Single Fetch. Il est préférable de créer des routes API dédiées aux applications mobiles et de partager le code commun dans une abstraction. - 📜 Why is CSS-in-JS slow? : Des articles très illustrés expliquent pourquoi le CSS traditionnel en JS est lent et comment le CSS compilé en JS l'accélère en évitant une cascade d'étapes pour les navigateurs.
- 📜 Interface Segregation Principle in React : Explique comment appliquer ce principe SOLID lors de la conception des prop de composants et vous encourage à utiliser la composition. Personnellement, j'aime aussi utiliser le typage TypeScript duck et les helpers comme
Pickpour les types d'objets restreints. - 📜 Exploring an experimental Micro-Frontend Architecture with Server-Side Rendering using React Server Components : Un framework alternatif RSC a introduit un concept innovant de « délégation du RSC ».
- 📜 Introducing InformAI - Easy & Useful AI for React apps
- 📜 Next.js + Supabase app in production: what would I do differently
- 📦 Material UI 6.0 : Une excellente version avec de nombreuses nouvelles fonctionnalités et améliorations. Plus important encore, elle introduit une intégration en option avec Pigment CSS pour l'extraction CSS statique et CSS-in-JS sans exécution, en remplacement d'Emotion, avec la possibilité de prendre en charge React Server Components et React 19.
- 📦 Code Hike 1.0 - Bridges the gap between Markdown to create rich interactive experiences
- 📦 Astro 5.0 alphas - stable globalRoutePriority, stable astro:env, CSRF protection by default…
- 🎥 Theo - React, is it time to move on?
- 🎥 Lee Robinson - Fast ecommerce with optimistic UI and Next.js
Ne manque pas le prochain email !
💸 Sponsor
Increase Library Adoption with Interactive Tutorials
Are you looking to increase adoption of your JavaScript framework or library? TutorialKit by StackBlitz is a command-line interface (CLI) generator that allows you to create fully interactive code tutorials that engage your users and help them learn quickly.
To get started with TutorialKit, simply run the npm create tutorial command to launch a wizard that guides you through the tutorial site generation process. The scaffolded project takes care of the underlying tutorial logic and in-browser code editor, so you can focus on the content.
Whether you're launching a new framework or updating an existing library, TutorialKit ensures that your users have the best learning experience possible. Don't let your library go unnoticed. Get started now!
📱 React-Native
- 💸 Learn how to create a simple, type-safe PDF viewer with the Apryse SDK and React Native — complete with editing and annotation features.
- 🐦 Reanimated 4.0 will only work with Fabric (the new RN architecture)
- 🐦 React Native WebGPU on visionOS demo
- 👀 React Native PR - migrate template to Swift : Passionnant de générer de nouveaux projets React Native avec AppDelegate en Swift plutôt qu'en Objective-C.
- 🗓️ React Universe Conf - 🇵🇱 Wrocław - Sept 5-6. 10% de réduction avec le code « TWIR ». Vous ne pouvez pas venir sur place ? Inscrivez-vous pour bénéficier d'un accès gratuit à la diffusion en direct ! Intervenants : Mike Grabowski, Fernando Rojo, Alex Hunt, Eric Vicenti...
- 📜 Shopify Tophat - Crafting a Delightful Mobile Developer Experience : Réintroduit « Tophat », l'application macOS menubar pour augmenter React Native DX, que Shopify a finalement open-sourcé la semaine dernière. Apparemment, cette application a été une source d'inspiration pour Expo Orbit.
- 📜 Expo - What to do without CodePush : Le Microsoft App Center sera bientôt fermé, y compris CodePush. Cet article propose des alternatives à CodePush pour les mises à jour en direct. Il vous encourage à adopter EAS Update en offrant une belle comparaison entre les deux, mais mentionne également des alternatives auto-hébergées.
- 📜 Introducing Oblivious HTTP support in Swift : Une nouvelle API Swift qui pourrait être utile aux développeurs React Native cherchant à renforcer la protection de la vie privée.
- 📜 How to build a Bluetooth Low Energy powered Expo app : Tutoriel utilisant
react-native-ble-plxavec le plugin Expo Config. - 📜 How to deploy App Store and Beta versions of React Native iOS app from Azure DevOps pipeline
- 📜 How Rosebud decided to go native with Expo
- 📦 React-Native-MMKV 3.0 - faster key/value storage, full rewrite to pure C++ TurboModule
- 📦 React Native visionOS 0.75
- 📦 Re.Pack 4.3 - RN 0.75, --watch flag
- 📦 Belt - Opionated CLI tool for starting a new React Native app
- 🎥 Beto - Building an Obscura Pro Camera App with React Native Vision Camera and Expo
- 🎥 Simon Grimm - When does local-first make sense?
- 🎥 The React Native Podcast rebrands to React Universe On Air : Le célèbre podcast Callstack a changé de nom pour s'adapter à la conférence React Universe qui aura lieu la semaine prochaine et pour couvrir un champ d'application plus large de React cross-platform.
- 🎙️ Rocket Ship 48 - MLKit & The React Native Paradox with Gant Laborde
- 🎙️ RNR 305 - On-device AI in React Native with Gant Laborde (oui, encore lui !)
🇫🇷 En français
- 🇫🇷 ReactHebdo.fr - Dernières éditions traduites en français
- 📜 Comment configurer NextAuth Password avec une base de données (Next App Directory)
- 📜 Faut-il apprendre React ou Angular ?
- 🎥 devaidaya - Setup de NativeWind dans un projet React Native (Expo et Expo Router)
- 🎥 Melvynx - Je refais mon blog de 0 (Design / Stack / NextJS)
- 🎙️ Double Slash - Les news web dev pour août 2024
🔀 Autre
Rspack est un bundler Rust très rapide qui est presque 100% compatible avec Webpack, y compris tout son écosystème de plugins et de loaders. Rspack est bien adapté pour être un excellent choix pour de nombreuses applications React utilisant Webpack qui ont besoin de bundler plus rapidement aujourd'hui. Il est facile à adopter grâce à sa compatibilité, mais aussi à l'épreuve du temps avec la prise en charge prochaine des React Server Components de première classe. C'est pourquoi je suis en train de migrer Docusaurus vers Rspack. Je vous recommande également de jeter un œil à Rsdoctor, c'est un excellent outil qui fonctionne également avec Webpack et qui vous indiquera les goulots d'étranglement de votre build.
- 📜 JS Dates Are About to Be Fixed
- 📜 How To Create An NPM Package
- 📜 How to make your web page faster before it even loads
- 📜 Fix Your Annoying Popups with the CloseWatcher API
- 📜 Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations
- 📜 Regexes Got Good: The History And Future Of Regular Expressions In JavaScript
- 📦 Node v20.17 - require() sync ESM graphs, matchesGlob()
- 📦 Node v22.7.0 - Experimental support for TS Enums/Namespaces, detect modules stable
- 📦 Deno 1.46 - The Last 1.x Release
- 📦 Test-server - Utility for creating HTTP and WebSocket servers for testing
- 📦 TypeScript 5.6 RC - Iterator methods, Disallowed Nullish and Truthy Checks…
- 📦 Turborepo 2.1
🤭 Fun
A plus 👋
Ne manque pas le prochain email !
