📨 #130: Next.js, callback ref, Zod, React-Hook-Form, Redux, mdxjs-rs, Tamagui, Skia, Shopify, Solid, Bun...

3 janvier 2023 · 8 minutes de lecture

Editeur - Mainteneur de Docusaurus

Salut à tous et bonne année 2023 🍾🥂🥳️

En cette période de fêtes, il y a tout de même eu pas mal d'activité avec une release Next.js et de supers articles React. Et l'écosystème React-Native a été particulièrement actif également, avec Tamagui, le support TypeScript et 2 articles Shopify.

Vous êtes maintenant plus de 15000 abonnés à me lire chaque semaine 😍

Merci pour votre fidélité et votre contribution à la croissance de ce projet. Je ferai bientôt une rétrospective 2022 pour tout vous dévoiler. En attendant, vous trouverez beaucoup d'infos sur ma page Indie Hackers.

La newsletter est revenue en avance: j'ai décalé ma semaine de ski, car il n'y a pas beaucoup de neige 😅 Prochaine édition le 17 Janvier.

Oh, et j'ai enfin réussi a créer un meme viral 🥲

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

The one React newsletter/source of "what's new" that I follow

Sunil PaiEngineer - ex React core team

💸 Sponsor

React Bricks est un CMS visuel basé sur des composants React.

Flexible pour les développeurs: créez votre propre design system en utilisant des composants React, ajoutez l'édition visuelle dans votre JSX et ajoutez des contrôles dans la barre latérale pour modifier les props comme la couleur de fond. Choisissez Next.js, Gatsby ou Remix et le framework CSS de votre choix !

Facile pour les éditeurs: qui peuvent éditer directement de manière visuelle sans casser le design system: beaucoup plus facile que d'éditer des entités abstraites en utilisant des champs gris, comme dans un CMS headless classique. Vous gagnez du temps: les éditeurs de contenu sont autonomes !

Prêt pour l'entreprise avec la collaboration, le versioning, l'authentification unique, la conformité réglementation GDPR, le CDN global pour des images optimisées, l'intégration e-commerce électronique, la publication programmée et bien plus encore.

Commencez ici: ReactBricks.com

⚛️ React

Next.js 13.1

Une version mineure avec pas mal d'améliorations:

app directory
TypeScript plugin
Module transpilation
Turbopack et benchmarks
SWC plugin pour transformer les imports
Edge runtime stable pour les API routes et middleware avancé

📖 Beta docs useEffectEvent: mise à jour suite au renommage du hook. Le nouveau site arrive en janvier!
📖 Redux docs: Side Effects Approaches: nouvelle page de doc avec des recommendations et comparaison entre thunks, sagas, observables, listeners, RTQ Query...
📜 React ref Callback Use–Cases: article très complet sur les callback refs qui permettent de déclencher des side-effects associés à un élément DOM. Jules présente de nombreux cas d'utilisation: portals, mesurer un élément DOM...
📜 The Ultimate Form Abstraction: utilise React-Hook-Form avec un résolver Zod. Utiliser la toute nouvelle feature Zod: type coercion pour les inputs number. Construit progressivement une abstraction de formulaire avec une bonne DX et typesafe.
📜 A React Developer’s First Take on Solid: une comparaison intéressante entre Solid et React, puis SolidStart et Next.js/Remix. Jake liste aussi les détails de Solid qu'il a moins aimé.
📜 A Review of UltraJS, Mixing React and Deno in a Single Framework: belle présentation d'Ultra, le framework React pour Deno qui pousse les dernières innovations en avant (ES sans bundling, ImportMaps...).
📜 Turbocharging Next.js: How Remote Caching decreased publish times by 80%: retour d'expérience de Vercel qui a utilisé Turborepo et Vercel Remote Caching pour réduire les temps de build de Next.js, en particulier du build natif de SWC.
📜 Hello React, Goodbye useEffect (I Hope): article bien documenté sur useEffect, sans doute trop utilisé dans nos codebases. C'est avant tout un outil de synchronisation. Quelques incohérences, mais mérite d'être lu.
📜 Simplifying React Three Fiber with Entity Component System
📜 Everything you need to know about Concurrent React (with a little bit of Suspense)
🤔 Bun + new JSX 2.0 Syntax: support de la syntaxe <User {user} />). Une nouvelle qui ne plait pas à tout le monde car la spec de JSX 2.0 n'est pas finalisée.
👀 Remix - CSS Modules support: PR mergée, cela devrait arriver prochainement
📦 mdxjs-rs: implémentation de MDX en Rust 👌
📦 react-wrap-balancer: un composant pour "équilibrer" le texte de vos titres sur plusieurs lignes (impossible en CSS). JavaScript inliné avec support SSR et sans layout shifts.
📦 react-resizable-panels (demo): une nouvelle lib de Brian Vaughn qui permet de resizer les elements d'un layout.
📦 gltfjsx v6: des optimisations sur le loader de modèles 3D GLTF.
📦 react-ts-form: lib de formulaires basée Zod et React-Hook-Form
📦 Gatsby 5.3
📊 Mobile Performance of Next.js Sites
🎥 3 React Mistakes, 1 App Killer
🎥 Learn with Jason - TanStack Query v4 with Dominik Dorfmeister
🎥 Learn How I Built a Twitter UI with TypeScript, Qwik, SolidJS, and React in Mitosis
🎥 Remotion - The Rust journey begins
👥 Storybook Day user conference: conférence en ligne le 14 Mars, lancement de Storybook 7.0

Ne manque pas le prochain email !

My favorite resource for keeping up with the React community!

Evan BaconEngineering Manager - Expo

💸 Sponsor

Vous voulez avoir un impact sur l'écosystème des développeurs ?

D'après le dernier rapport State of the Developer Nation, React est de loin la lib client la plus populaire puisqu'elle est utilisée par 58 % des développeurs web qui utilisent des frameworks web. Qu'en pensez-vous ?

Participez à l'enquête la plus complète jamais créée par Developer Nation, façonnez les principales tendances chez les développeurs pour 2023 et gagnez des cadeaux incroyables ! 🎁

Une fois le questionnaire complété, vous obtiendrez un accès gratuit à notre sac à surprises virtuel. N'oubliez pas de vous inscrire pour participer aux tirages au sort hebdomadaires. Parmi les 250 prix, vous trouverez un ThinkPad L15 Gen 3, un mini PC Intel NUC 10 Performance, des kits IoT, un iPad Air, des cartes-cadeaux, des cours Udemy, des accessoires tech, et bien d'autres encore.

Commencez ici !

📱 React-Native

Tamagui 1.0

Tamagui sort officiellement de beta, et permet de faciliter la création de projets cross-platform (web et mobile) basés sur une même codebase en React, sans pour autant perdre en DX ou en performances. Le projet est divisé en 3 parties:

Tamagui Core: un runtime CSS-in-JS au dessus de React-Native et React-Native-Web-Lite
Tamagui Static: un compiler basé sur Babel et une pré-évaluation Node qui supporte le "view flattening" et l'extraction de styles en atomic CSS
Tamagui UI: une librairie de composants et hooks React pour faciliter l'utilisation

Tamagui est un projet innovant, qui pourrait avoir un intérêt même si on ne vise qu'une seule plateforme. Le support des features React 18 comme Server Components, Concurrent Mode est déjà la. A tester!

React Native Skia: A Year in Review and a Look Ahead

William Candillon fait une belle rétrospective du projet React-Native-Skia. Pour rappel, Skia est le moteur 2D de Google, utilisé par Chrome, Android, Flutter... Ils ont amélioré significativement les performances avec le UI Thread Rendering et une nouvelle API déclarative SkiaDOM. La librairie est flexible et peut être étendue (Skottie, VisionCamera frame processing). En 2023, on peut s'attendre à voir arriver les animations via worklets, une intégration plus performante avec Reanimated, ou encore le layout de texte.

📊 State of React-Native 2022: le sondage est ouvert.
📜 First-class Support for TypeScript: React-Native 0.71 devrait sortir très prochainement avec un support complet de TypeScript par défaut: type definitions, documentation et starter template.
📜 Shopify - Migrating our Largest Mobile App to React Native: Shopifie est en train de migrer incrémentalement son app principale vers React-Native. Il s'agit d'une app vieille de 6 ans et de plus de 300 écrans, qui n'a pas particulièrement de dette technique. Un retour d'expérience très intéressant sur cette migration en cours (environ 10%). La première approche (nouvelles features en React-Native) n'avait pas fonctionné. Ils ont finalement opté pour convertir en premier la racine de l'app.
📜 Implementing CSS Style Inheritance in React Native: un article intéressant qui explique comment reproduire la cascade CSS en React-Native. C'est particulièrement utile pour une intégration avec un CMS, qui assume souvent qu'on peut appliquer le style du texte sur une View parente.
📜 Google Drive auto-backup for React Native on Android: pour persister le async storage (ou autre) d'un téléphone à l'autre 🤔
🎥 How to use Bluetooth Low Energy ( BLE ) Beacons with 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 ?