React Hebdo #100: React-18, React-Native 0.68, Redwood, Remix, Next.js, TC39, Node Test Runner, Hydration, Rome
Discover more from This Week In React
React Hebdo #100: React-18, React-Native 0.68, Redwood, Remix, Next.js, TC39, Node Test Runner, Hydration, Rome
React
React v18.0
React 18 vient de sortir! Cette nouvelle version propose de nombreuses améliorations et APIs dont on a déjà parlé: automatic batching, streaming SSR, Suspense, hydratation selective, nouveaux hooks (useId, useDeferredValue, useTransition...)
Cette release très attendue propose aussi Concurrent React. Le rendu React n'est plus nécessairement synchrone et atomique: il peut être interrompu, mis sur pause et reprendre... Cela permet de découper le travail et garder l'interface réactive.
Ces features concurrentes peuvent être utilisées dès aujourd'hui, mais sont principalement destinées à être encapsulées via l'usage d'une librairie ou d'un framework (intégrations prévues dans Remix, Next.js...).
Ce nouveau renderer peut produire des breaking, et ne s'activera que lorsqu'on utilise les nouvelles features concurrentes de React 18, ce qui permet une adoption incrémentale en douceur. Upgrader React vers v18 ne devrait donc pas être trop compliqué. Si l'app à des problèmes en dev, il est conseillé de désactiver le StrictMode.
Ce qu'il faut retenir: React 18 pose de nouvelles fondations, et de nombreuses innovations sont encore à venir. Dan Abramov qualifie cette release de MVP dont le but est essentiellement de faciliter l'adoption graduelle. Certains comme Paul Henschel (React-Three-Fiber) ou James Ide (Expo) prédisent les impacts potentiels sur les performance.
Je pense qu'on rentre dans une nouvelle ère. De nouveaux frameworks web font parler d'eux en terme de simplicité et performances, comme Svelte ou SolidJS. Contrairement à React, ils sont réellement réactifs et sans virtual DOM.
Le virtual DOM de React à un coût, et je pense que Concurrent React peut difficilement être implémenté sans cette abstraction. Avec React 18+, on va enfin savoir si ce coût vaut la peine d'être payé. Il faudra comparer l'UX, la DX et les performances face à Svelte ou SolidJS, qui sont réellement réactifs et sans virtual DOM.
RedwoodJS v1.0
C'est la Launch Week pour Redwood, avec la v1.0 qui vient de sortir, et une autre grosse annonce prévue Jeudi. Ce meta-framework React inspiré de Ruby on Rails à des opinions plus fortes que ses concurrents, pour vous aider à sortir un produit plus rapidement: Prisma, GraphQL, Storybook, TypeScript, Jest... Son créateur, Tom Preston-Werner (aussi créateur de GitHub, Jekyll...) annonce financer lui même le framework avec $1M de manière durable, plutôt que de passer par la case VC.
Remixing React Router
Les repos de Remix et React-Router vont fusionner sous le nom Remix, et de nombreuses features présentes dans Remix vont être rendues disponibles dans React-Router: data loading, mutations, interruptions, revalidation, race-conditions... Ces abstractions sont pensées pour fonctionner de manière optimale avec Suspense et le pattern "render-as-you-fetch".
Extras:
📜 Improving Web Page Performance at DoorDash Through Server-Side Rendering with Next.JS: super feedback d'une migration complexe.
🐦 React core team: Brian Vaughn part, Mengdi Chen arrive
🐦 useDeferredValue mental model: "like debounce but React decides when to bounce"
🐦 JSX && conditionals: dangers à connaitre! Mais il existe des plugins ESLint (1, 2)
📦 React-Three-Fiber: v8.0 (avec support React-Native) + Babel plugin
📦 React Router v6.3.0: compatibilité v5
💸 Sponsors
BeJSconf: conférence JavaScript à Bruxelles et en ligne
Rejoignez des membres du TC-39, et des experts chevronnés des librairies et frameworks JS les plus en vogue, qui vous ont préparé des interventions et ateliers impressionnants afin de vous permettre d'apprendre et de comprendre les rouages de JavaScript.
Retrouvez du XState, Components, ou encore du Multi-core JS… BeJSconf abordera également des sujets non techniques tels que le leadership, l'entrepreneuriat, DevRel, DX et bien d’autres…
BeJSconf sera aussi une occasion de fêter le retour à la normale, notamment à travers l'after-party prévue pour se relâcher et surtout savourer de la bonne frite et de la bière belge.
React-Native
React Native v0.68
Release importante, puisque c'est la première version de React-Native qui propose d'activer facilement la nouvelle architecture (Fabric et TurboModules) via un flag.
La prochaine version d'Expo (SDK 45) devrait se baser sur la v0.68, mais la nouvelle architecture ne sera pas disponible tout de suite dans Expo Go (mais activable via les custom dev clients)
Extras:
🐦 TypeScript moduleSuffixes: améliore l'intégration TypeScript avec les extensions React-Native (
Comp.ios.tsx)🎥 React-Native-Skia: Neumorphism + Gen-Z mode
💸 Jobs
💡 Sponsorise React Hebdo pour publier une offre d'emploi
Showtime - CDI Remote - Top 1% (on double ton salaire !)
Vous pouvez considérer Showtime comme le "Instagram pour les NFTs" où vous pouvez découvrir et soutenir vos artistes préférés, créer et présenter votre collection d'art digital et bientôt être récompensé pour la valeur que vous créez. Ils prévoient d'aider les artistes à récompenser leurs fans en leur permettant de gagner des NFTs (au lieu de devoir les acheter).
Ils utilisent Expo avec Expo Application Services. Ils itèrent aussi vite que l'écosystème web3 évolue en utilisant ensemble React Native et Next.js grâce à React Native for Web. Ils ont construit un design system universel de haute qualité qui fonctionne sur iOS, Android et Web: Universal UI. Ils prévoient d'open-source le monorepo frontend dans peu de temps.
Ils viennent tout juste de sortir la beta sur iOS et Android. Envoie un message à Axel sur Twitter ou un email à axeldelafosse@gmail.com.
PS: j'ai travaillé avec Henry, dev chez Showtime !
Front - Développeur Senior Full-stack / Front-end (React / NodeJS) - Remote / Paris - 60-80k€ + stock options
Front en une journée, c'est:
30 déploiements en production sur 1500 serveurs
10 MM d'évènements temps réel
plus de 100,000 utilisateurs dans plus de 7000 entreprises
Nous développons une plateforme ayant pour but de réunir tous les canaux de communications d'une entreprise, en alliant collaboration et efficacité. Front est l'outil de travail principal de nos clients et nous devons faire attention à chaque détail: Front est une app très complexe avec une grande exigence de performance. On utilise React, Redux ou encore Styled Components, le tout en Typescript.
Nous avons 350 collaborateurs, dont 80 développeurs autour de hubs à San Francisco, Paris, Chicago et Dublin. Full remote possible, « Flexible Friday », environnement de travail en anglais, Salaire entre €60K - €72K + stock option (en fonction du niveau d'expérience)
Divers
Updates from the 89th TC39 meeting
Grosse update du TC39 avec en particulier:
Decorators en stage 3, en bonne voie pour finalement arriver!
Change Array by Copy en stage 3: méthodes immuables sur les tableaux JS! Aussi une étape clé pour que Records & Tuples progresse.
Intl.MessageFormat en stage 1: pourrait réduire la taille des apps utilisant React-Intl.
Extras:
A Built-in Test Runner Is Coming to Node and Why You Should Care: dans Node.js 18!
Release Notes for Safari Technology Preview 142: CSS Container Queries!
From Static to Interactive: Why Resumability is the Best Alternative to Hydration: modèle intéressant de Qwik
Boxed: Functional utility types and functions for TypeScript
14 Linting Rules To Help You Write Asynchronous Code in JavaScript
