📨 #140: React Labs, Server Components, Next.js, Remix, Storybook, Astro, refs, Ark, Impala, Docusaurus, Expo-Blur, WebView, AsyncContext...

4 avril 2023 · 8 minutes de lecture

Editeur - Mainteneur de Docusaurus

Salut à tous !

Je rentre juste de vacances: on rattrape 2 semaines de news! Beaucoup de liens, cette édition sera un peu moins commentée que d'habitude.

Un nouveau blog post React Labs présente maintenant React Forget en reactivity compiler.

Les Server Components n'en finissent plus de nous surprendre. Pas mal d'innovations liées ne sont pas encore trop mises en avant, à part quelques signaux faibles sur Twitter.

Il y a également pas mal de contenu pour les devs React-Native!

💡 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 !

One of the few things I regularly read to keep up with the React world.

Theo BrowneFounder of ping.gg - Youtuber

💸 Sponsor

React-admin - Le Framework Open Source d'applications B2B

Les Single Page Apps restent le meilleur choix pour les applications d'administration, les CRM et les ERP basés sur des APIs REST ou GraphQL. React-admin est le framework open-source de référence pour le développement de SPA.

React-admin, c'est une bibliothèque de plus de 150 composants orientés métier, qui assemble le fleuron des libs open-source de routing, UI, gestion de formulaire et data fetching pour React. En libérant les développeurs des tâches répétitives, react-admin les rend plus productifs... et plus heureux !

Notre point fort ? La meilleure "Developer Experience" du monde React, grâce à une documentation impeccable, de nombreux exemples et une communauté dynamique. React-admin, c'est 6 ans de développement, plus de 20 000 développeurs convaincus, et 3 000 nouvelles applications lancées chaque mois. Venez l'essayer, c'est gratuit - 30 minutes suffisent.

⚛️ React

React Labs: What We've Been Working On – March 2023

Update officielle de la R&D autour de React qui aborde différents sujets:

React Server Components. Une belle implémentation est déjà dispo dans Next.js via App Router. Les RSCs avec async/await devraient aussi pouvoir tourner dans une app client. J'ai l'impression qu'ils veulent unifier les abstractions coté client/server (et je pense que AsyncContext va être super pour ça!).
Asset loading: intégration avec Suspense pour le chargement de CSS, font et images (details).
Document Metadata: support officiel d'une API pour les metadata <head> avec support streaming.
React Optimizing Compiler: n'est plus présenté comme un auto-memoizing compiler, mais comme un reactivity compiler. D'ailleurs React Forget a atteint un milestone et ils se concentrent maintenant sur l'intégration.
Offscreen Rendering: c'est vraiment une innovation que j'attends avec impatience, qui différencie React des autres frameworks. Meta teste le prerendering sur ses apps React-Native avec des gains de performance positifs
Transition Tracing: une API qui permet de détecter les transitions lentes, mis sur pause pour l'instant.

🥇 React.dev on ProductHunt - Product of the day
👤 Tom Occhino et Dominic Gannaway rejoignent Vercel.
👀 Les Server Components sont capables d'envoyer des modules de manière lazy au client.
👀 Jarred Summer - "Server Components is coming in Bun v0.6.0"
👀 Lee Robinson - "Improved sitemap support is coming to Nextjs"
👀 Lee Robinson - "The Next.js App Router now supports static exports!"
👀 Astro roadmap - Client-side Routing: Astro devrait implémenter une navigation coté client. En option: Astro reste par défaut un framework MPA.
👀 Vercel - Remix without Limits: Vercel propose maintenant une intégration first-class avec Remix.
🐦 Dan Abramov - "we’ve changed our forms recommendations to emphasize uncontrolled inputs"
📜 Learning React from two Angles in 2023: il est maintenant possible d'apprendre React en tant que librairie, ou en tant que framework/architecture (Next.js). Pas évident de savoir par où commencer pour un débutant.
📜 Refs in React: from access to DOM to imperative API: bonne intro aux refs, forwardRef et useImperativeHandle.
📜 Rethinking React best practices: illustre bien la tendance actuelle de React qui passe progressivement d'une simple librairie UI à une architecture full-stack.
📜 isMounted tricks are code-smell: si vous utilisez ce genre de pattern, je pense que cela posera problème avec la future Offscreen API.
📜 Setting State On An Unmounted Component
📜 The useEffect cleanup and the two circumstances it's called
📜 How Will the Future of Web Development Be Affected by Influential New React Docs?
📜 Making Tanstack Table 1000x faster with a 1 line change
📜 How to build zero-CLS A/B tests with Next.js and Vercel Edge Config
📜 Custom fonts without compromise using Next.js and next/font
📜 Animated page transitions with Remix's nested routes
📦 Storybook 7.0: belle release avec Vite, CSF3, frameworks API, MDX2... Les nouveautés ont déjà été présentées précédemment, mais on aura surement droit a un blog post prochainement?
📦 Server Components Demo updated
📦 Ark UI: l'équipe Chakra UI présente une nouvelle lib UI universelle (React, Vue, Solid) basée sur les state machines de Zag.js
📦 Simple-RSC: implémentation simplifiée et annotée des Server Components, suite à un stream entre Ben Holmes (Astro) et Dan Abramov.
📦 Impala - A very simple static React framework
📦 Webpack-RSC
📦 MDX syntax highlighting VS Code extension
📦 ContentLayer 0.3.1 - React Server Components support
📦 Styling Addon: configure styles and themes in Storybook
📦 Docusaurus 2.4
📦 Framer Motion 10.9 - Timelines
📦 Planby 2.3.0 - Schedule / Timeline for React with
📦 Ionic 7
🧑‍🎓 React.gg: nouveau cours React prometteur en beta privée
🎥 Theo - So I had a call with Dan...: je partage l'avis que le nommage client/server components n'est pas idéal, et "use interactive" me semble une bonne idée.
🎥 Smarter and Simpler React State
🎥 Next.js App Router: Routing, Data Fetching, Caching
🎥 The official T3 Stack Tutorial

Ne manque pas le prochain email !

If every newsletter was as informative, the world would be a better place!

Mike GrabowskiCTO and founder - Callstack

💸 Sponsor

Tina.io is a headless CMS for Markdown-powered sites

Editing UI for your Markdown files
UI for MDX components
Supports static (SSG) and server-side rendering (SSR)
Option for visual editing (live-preview)
Build with reusable blocks

Test a starter site

Docusaurus (github.com)
Next.js + Tailwind with visual editing (github.com)

Or run npx create-tina-app@latest then visit localhost:3000/admin

Watch the 4-min demo video

📱 React-Native

📜 Storybook for React Native (6.5): super nouvelle pour les utilisateurs de Storybook sur React-Native, l'intégration rattrape son retard sur Storybook web, adopte CSF, Controls, Args, et devrait bientôt être compatible avec Storybook 7.0. Avec les nouvelles features Metro (require.context), le besoin de générer un index de stories devrait prochainement disparaitre.
📜 How Migrating from Vanilla Redux to Redux Toolkit Improved State Management in Shopify POS: retour d'expérience sur une migration incrémentale vers RTK qui a permis de supprimer 3500 lignes.
👀 RFC: DOM traversal and layout APIs in React Native: API avancée qui pourrait débloquer l'implémentation de features comme MutationObserver, IntersectionObserver...
👀 View Flattening on iOS: React-Native pouvait déjà optimiser sur Android en évitant de créer des vues natives inutiles. Samuel explique le fonctionnement et annonce que maintenant ça marche aussi pour iOS.
👀 Expo Router + Apple Handoff demo: super innovation iOS pour passer de la version web à mobile, et ça devrait bien marcher avec les apps Expo Router universelles 👌
🎥 The Joy of Painting with React Native: nouveau style de video Skia ASMR par William Candillon 😄
📦 React-Native WebView 12.0: support nouvelle architecture
📦 React-Native 0.76.1: série de releases liés à des problèmes de build sur XCode
📦 Expo-Blur - Android support: il sera bientôt possible d'utiliser BlurView sur toutes les plateformes
🐦 Tzvetan Mikov - "Messenger for MacOS is a React Native app."
🎙️ RNR 263 - Shopify Goes React Native!

🧑‍💻 Jobs

🧑‍💼 Shotgun - Senior Full Stack Engineer - 60-75k€ + BSPCE

Shotgun est la billetterie des évènements electro. Nous recherchons des devs expérimentés pour travailler sur une stack moderne: React, React-Native, Typescript, GraphQL, NextJS, PgSQL, Vercel...

🧑‍💼 Premier Octet - Développeurs(euses) React - Paris

Nous cherchons des développeurs(euses) JavaScript passionnés. Vous interviendrez en développement sur des projets variés et motivants, à la fois serveur et front (React, Nest, Next), et éventuellement mobile (React Native).

💡 Comment publier une offre d'emploi ?

🏢 Vous recrutez en CDI ou freelance? Contactez-moi!