React Hebdo #86: spécial React Conf, React Forget, WebComponents, Framer Motion 3D, Expo, Turborepo, Tailwind, Vitest...
React
Andrew Clark parle la vision React 18. "Our north start: to make it easier to build great user experiences". Avec React, les designers et développeurs parlent le même langage. Rappelle la relation étroite entre UX et DX.
Juan Tejada parle de Suspense, les problèmes résolus comme les race conditions ou la friction lors du design des expériences de chargement... Suspense coté serveur (React.lazy) arrive avec React 18, mais pour le data fetching il faudra attendre encore un peu.
Lauren Tan parle des nouveautés React 18: il n'y a plus de concurrent mode, seulement des features concurrentes. La migration vers React 18 semble facile et devrait être assez rétro-compatible si les nouvelles APIs ne sont pas utilisées. Une Release Candidate est publiée!
Andrew Clark parle des Server Components: feature permise grâce à Suspense. Superbe DX, permet de réduire significativement la taille du bundle. En preview, uniquement dans Next.js et Hydrogen pour l'instant. Sortira dans une version mineure, après React 18. Un working group dédié est créé.
Ricky Hanlon parle de React-Native: en réalité, React === React-Native. Le travail pour améliorer une plateforme permet d'améliorer toutes les autres par la même occasion. React-Native n'est pas créé pour le dénominateur commun entre toutes les plateformes, mais pour tirer le meilleur de chaque plateforme sans aucun compromis. C'est vraiment ce que j'aime avec React comparé perso!
Xuan Huang parle de React without Memo: c'est la grosse surprise de cette conférence. Facebook travaille sur React Forget, ce "smart compiler" dont ils parlent depuis quelques années déjà, pour qu'on puisse écrire du code sans
useMemo,useCallbackou mêmeReact.memo! Il y a plein de problématiques à résoudre pour y arriver, et c'est un projet complexe qui pourrait même échouer (cf Prepack), mais c'est très encourageant de savoir qu'il se passe quelque chose. C'est un des devs Hermes qui travaille la dessus, il doit s'y connaitre en compiler 😏.Brian Vaughn parle des React DevTools: fonctionnement des DevTools React, les améliorations (named hooks...), leur intégration avec les nouvelles features React 18 (scheduler,
useDeferred,Suspense...). Insights en bonus: React-Native semble équipé pour répondre aux besoins VR 2D/3D (Metaverse? 🤔). Ca parle aussi de Server-Driven UI (pourquoi pas React-Native Server Components? 🤔)
Extras:
React et Custom Elements: support des Web Components mergé et peut-être inclus dans React 18
React Server Components and Remix: Remix n'utilise pas encore les Server Components. Cet article présente de nombreuses démos qui montrent que Remix arrive à surperformer les démos Server Components de React et Next.js. Dan Abramov commente. Les démos officielles ne sont pas encore optimisées, donc à prendre avec des pincettes.
What is Remix? TL.DR: "a compiler for React Router"
🧵 Dan Abramov: "a hundred things i learned working on the react team"
Framer Motion 3D: intégration entre Framer Motion et React-Three-Fiber. Les démos sont super cool!
Introducing the new Relay compiler: explique pourquoi un compiler, et détaille pourquoi le ré-écrire en Rust (perf x5)
Ariakit: v2 de Reakit
Docusaurus 2 beta.10: avec une feature très demandée: lier une categorie sidebar à une page
Redux Toolkit 1.7: support du SSR pour RTK Query
Sandpack: support des React DevTools
💸 Sponsors
Tu peux me soutenir et sponsoriser React Hebdo: offre d'emploi, produit, cours, agence…
Indy: la comptabilité repensée pour les indépendants
Liasse fiscale, exercice comptable, amortissement… c'est un langage que tu ne maîtrises pas ? Découvre Indy, la comptabilité repensée pour les indépendants 💪.
Grâce à la synchronisation bancaire sécurisée et à l'intelligence artificielle, les transactions bancaires sont automatiquement catégorisées. En quelques clics, les déclarations fiscales sont préremplies et télétransmises à l'administration. Un doute ou une question ? Un support client aux petits soins répond par chat sous 4 minutes 😍.
🔥 Pour essayer Indy gratuitement durant 2 mois et sans engagement, rendez-vous ici.
Être freelance, très peu pour toi ? Ils recrutent des profils tech à Lyon !
React-Native
Le SDK 44 en beta pour une semaine. En résumé:
nouveaux modules pour customiser les couleurs de navbar et background (voir cette démo).
Reanimated v2.3, avec layout animations
Gesture Handler v2.0, avec nouvelle API gestures
React-Native-Screens v3.1, avec React-Freeze
Cela rejoint bien la vision du fondateur d'Expo Charlie Cheever: There’s no reason that building mobile apps has to be harder than building websites. Ils construisent petit à petit une DX équivalente à Vercel ou Netlify.
Extras:
The New Architecture Playbook: nouvelle doc pour adopter la nouvelle architecture, en cours d'écriture (PR)
💸 Jobs
Luko | React Native Staff & Senior Engineer
Luko est la néo-assurance qui connaît la croissance la plus forte en Europe ! Notre ambition: rendre votre foyer plus sûr en travaillant de manière éthique. L’application est déjà notée 4.8/5 (iOS / Android) avec 100.000 visiteurs mensuels !
On recrute 2 profils pour rejoindre nos 6 ingénieurs React Native:
Staff Engineer: 80k€+
Senior Engineer: 60k€+
Au programme: Typescript, GraphQL, React Query, Shopify/Restyle, Testing Library, Detox, Bitrise…
CDI - Full-remote possible (notre culture) - Salaire + stock options (grille de salaire) + jours de congés illimités.
Divers
Jared Palmer est un développeur bien connu de l'écosystème React (Formik, Razzle, tsdx...). Son dernier projet Turborepo (initiallement payant), vient d'être racheté et open-sourcé par Vercel, qu'il a rejoint par la même occasion. Il présente le projet et répond aux questions dans cette video.
Il s'agit d'un outil de build pour les monorepos JS et TS, qui améliore significativement les performances (par rapport aux alternatives comme Lerna). Le concept: ne jamais executer 2 fois une même tache grâce à un système de cache (fingerprinting + artifacts dans node_modules/.cache/turbo). Et ce cache peut être uploadé et partagé entre collègues, ou avec votre CI/CD. Jared fait l'analogie: "Dropbox for dist directories". Il y a aussi la possibilité de déclarer des dépendances entre les étapes de build, des outils pour analyser le graph de dépendance, et profiler la performance de votre build dans Chrome DevTools...
L'outil est déjà intégré à Vercel. Vous disposez gratuitement d'un compte permettant d'héberger le cache de votre projet. Il est aussi possible de self-hoster son propre cache. Vercel améliore simplement la DX et ne fait pas de lock-in. Ce nouveau projet n'est pas sans rappeler Nx, qui dispose aussi d'une offre cloud: il va falloir comparer!
Extras:
Tailwind CSS v3: nouvelle version qui sort avec un beau trailer et un tas de nouveautés, mais qui devrait être essentiellement rétrocompatible. J'aime le compiler JIT et la possibilité d'utiliser n'importe quelle propriété CSS.
Vitest: nouveau framework de test, en beta privé, basé sur Vite (par la team Vite). Semble être une alternative moderne à Jest, tout en facilitant la migration: support ESM, top-level await, TypeScript, matchers, snapshots...
ts-belt: programmation fonctionnelle en TypeScript
Learn Responsive Design: 5 nouveaux modules
