📨 #187: Next.js, Expo, Popover, rethrow, SWR, React-Query, Astro, PPR, tRPC, zsa, Memory leaks, INP, RN IDE, Skia, WebGPU, RNSC, Atlas, Re.Pack, Prisma, SwiftUI, Flutter, Angular...
Salut à tous !
La semaine dernière, nous avons reçu de formidables annonces lors des conférences Vercel Ship et App.js.
J'ai également trouvé des articles de blog communautaires très intéressants cette semaine ! Il y a beaucoup de contenu intéressant à lire ici. Celui sur les fuites de mémoire est assez effrayant 😅.
Je me suis demandé dernièrement s'il était encore utile d'écrire un Fil Twitter ? J'ai posé la question sur Twitter et j'ai l'impression que plus personne ne le lit, à part quelques personnes. J'envisage d'arrêter. Qu'en pensez-vous ? 🤔
💡 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
React-admin: The Open-Source Framework for B2B apps
👩🏻💻 For developers, by developers: React-admin is a free, low-code library that accelerates the development of internal tools, admins or B2B apps. Unlike no-code tools, you use code, ensuring you’re never limited by the framework.
🔌 Flexible Integration: React-admin supports any API format (REST or GraphQL) and various authentication backends, including Auth0, Cognito, Google Auth, Active Directory, and Keycloak. You control the server, so there are no extra costs for Single Sign-On (SSO) capabilities. It's fully themeable, allowing you to customize it with your company's colors.
🚀 Proven Success: Over 25,000 companies have built single-page applications with React-admin. For your next project, save weeks of development time by using react-admin. Try react-admin now.
⚛️ React
Une nouvelle version majeure de Next.js est tombée en RC lors du Vercel Ship la semaine dernière. Les points forts de cette version sont les suivants :
- Support de React 19 RC
- Support du compilateur React (expérimental) à travers le plugin Babel (cela peut augmenter le temps de construction)
- Amélioration des erreurs d'hydratation, affichant le diff incorrect
- Mise en cache moins agressive, maintenant opt-in :
fetch
et Route Handlers ne sont plus mis en cache par défaut - Adoption progressive du Partial Prerendering avec une nouvelle option de configuration de route
experimental_ppr
. - Nouveau design de
create-next-app
, invitant à l'utilisation de Turbo en dev, et possibilité de créer des projets - next/after (expérimental), une nouvelle API utile pour différer les tâches d'analyse et garder les réponses rapides
- Optimisation du regroupement des packages externes (
serverExternalPackages
) maintenant stable
D'autres choses intéressantes ont été annoncées au Vercel Ship. Ressources supplémentaires à consulter :
- 📜 Vercel Ship 2024 recap
- 📜 Introducing deeper integrations for feature flags in Vercel
- 📜 Introducing the Vercel Web Application Firewall
- 🎥 Jack Herrington - NextJS 15: React 19, Less Caching, Turbopack, Better Hydration Errors and more from Vercel Ship!
- 💸 Build AI apps with React and JavaScript — Frontend and UI for any LLM
- 👀 React Core PR - Throw if React and React DOM versions don't match : React 19 sera plus strict et exigera que la version du moteur de rendu (DOM ou RN) utilise exactement la même version que le package central de React.
- 👀 React DOM PR - Add support for Popover API : Cette nouvelle API est désormais disponible dans tous les principaux navigateurs, et React vient d'en fusionner la prise en charge.
- 👀 Next.js PR -
unstable_rethrow
: Prochaine API Next.js pour éviter de capturer les erreurs internes lancées par Next.js (telles que les erreurs de redirect/notFound). - 🐦 Latest SWR beta can seamlessly move data fetching between client-side and server-side. Et React-Query + Apollo Client a également mis en œuvre des fonctionnalités similaires.
- 🗓 React Rally - 🇺🇸 Utah - 12-13 août - 10% de réduction avec le code « TWIR ». Il y a un atelier React avancé avec Cory House.
- 📜 Sneaky React Memory Leaks: How useCallback and closures can bite you : Un super article qui explique une fuite de mémoire dans une vraie application de production. Cela m'a surpris, je ne pouvais pas deviner qu'un tel code React pouvait provoquer une fuite de mémoire, et je suis presque sûr que mes applications contiennent des fuites de mémoire maintenant 😅. Bonne nouvelle cependant : l'application ne présente pas de fuites de mémoire lorsque l'on utilise le nouveau compilateur React.
- 📜 Automatic Query Invalidation after Mutations : React Query ne se préoccupe pas de la manière dont vous invalidez les ressources mises en cache et vous permet de mettre en œuvre une stratégie personnalisée à partir de primitives flexibles. Par exemple, vous pouvez invalider les requêtes par des tags.
- 📜 Migrating from Radix to React Aria: Improving Accessibility and UX : Après avoir utilisé des alternatives telles que Reakit ou Radix, Greg donne de bonnes raisons d'adopter React Aria. Le retour d'expérience de la migration est positif, mais certains défis ont été rencontrés. React Aria est assez « strict » pour s'assurer que vos composants restent accessibles.
- 📜 On Laravel, Full-Stack JavaScript, and Productive Frameworks : Josh a créé 2 méta-frameworks React (dont Shopify Hydrogen) et utilise également Laravel de manière intensive. Il partage une perspective intéressante sur les avantages et les inconvénients de l'écosystème Laravel vs React.
- 📜 A virtual DOM in 200 lines of JavaScript : Cela explique en grande partie comment un DOM virtuel (comme celui de React) fonctionne sous le capot, en créant une petite bibliothèque qui peut exécuter une application TodoMVC.
- 📜 Design System Retrospective : Une perspective intéressante sur la réussite de la mise en œuvre d'un système de conception de type Chakra (jetons comme props). Le développeur lambda doit se démener pour comprendre comment composer des primitives. Tailwind pourrait leur convenir davantage.
- 📜 Combining React Server Components with react-query for Easy Data Management : Une bonne lecture expliquant les limites des RSC. Les Server Actions s'exécutent en série, et vous devez attendre que les RSC soient rendus à nouveau, ce qui peut être lent sans une mise en cache appropriée. L'utilisation de React-Query avec prefetching pourrait légèrement augmenter la taille du bundle et produire plus d'allers-retours, mais dans l'ensemble, cela pourrait donner une UX plus rapide.
- 📜 Using Server Actions with tRPC : Les Server Actions sont similaires à tRPC, mais elles sont simples. Le responsable de tRPC explique ce que tRPC permet de faire en plus, comme l'authentification, la validation des inputs, l'observabilité, la réduction du débit, et d'autres middleware possibles. Notez qu'il y a des alternatives à considérer comme next-server-action et zsa.
- 📜 Optimizing INP for a React App & Performance Learnings : Un long retour d'expérience sur l'optimisation de la réactivité d'une application React 18 prod. Parmi les différents enseignements, on peut citer le report du travail et de l'analytique, ou encore faire attention aux re-renders inutiles.
- 📜 Partial Prerendering without a framework : Démonstration du PDG de Netlify montrant comment mettre en œuvre le « vanilla PPR » (sans Next.js qui a cette fonctionnalité expérimentale).
- 📜 Behind the ‘as’ prop: polymorphism done well : Il explique également comment le typer correctement.
- 📜 Redwood - Using Middleware: RSS and Sitemap
- 📜 Structured logging for Next.js - Using the Pino logging library
- 📜 Facebook just updated its relationship status with web components
- 📜 Authentication with WorkOS in Next.js: A Comprehensive Guide
- 📜 The Next.js <Image> Component
- 📜 How To Dockerize A React App
- 📦 Astro 4.9 - React 19 support for Astro Actions : Ajout de nouvelles API withState/getActionState pour intégrer Astro avec React 19 useActionState, y compris l'amélioration progressive.
- 📦 Storybook 8.1 - typesafe mocking, Unit testing React Server Components
- 📦 NextUI 2.4
- 📦 Ark UI 3.0
- 📦 React-Query 5.39 - Supports React 19
- 📦 Redwood 7.6 - React Compiler experimental flag
- 📦 zsa 0.1 - Typesafe Server Actions for Next.js
- 📦 React-Executor - Asynchronous task execution and state management for React
- 🎥 UI Engineering - Portals Can Share State Between Windows : L'idée d'utiliser des portals React pour s'intégrer de manière transparente entre les fenêtres est plutôt cool et pourrait également être utile pour la future API Picture-in-Picture du navigateur.
- 🎥 Theo - I Was Wrong About React Router.
- 🎥 James Quick - Astro Launches Actions Similar like Next.js
Ne manque pas le prochain email !
💸 Sponsor
Next.js auth tutorial with RSCs and Server Actions
The latest tutorial with WorkOS and Sam Selikoff shows how you can easily add AuthKit's hosted login box to a Next.js app:
📚 Get started using the Authkit <> Next.js integration library