React Hebdo #81: Hydrogen, Server Components, Next.js, React-Router, Storybook, State Initializer, Expo modules, TDD, TypeScript...

React

Le meta-framework React créé par Shopify vient d'être annoncé en developer preview (Twitter, blog post, video). Il utilise React, Vite, Tailwind, GraphQL, React-Query et un ensemble de composants et hooks sur mesure pour le e-commerce et l'intégration avec l'API Shopify.

La vision est assez similaire à Next.js: du contenu dynamique, sans compromis sur la performance, qui reste très importante pour le e-commerce. Hydrogen utilise les dernières innovations React: le streaming SSR et les React Server Components.

Ils prévoient également une solution d'hébergement Serverless appelée Oxygen, basée sur leur propre infra utilisant des isolats V8.

Pas mal de resources ont été publiées:

• 🧵 Thread d'Ilya Grigorik qui explique pourquoi ils ont créé un framework React

• Meet Hydrogen: A React Framework For Dynamic, Contextual And Personalized E-Commerce

• Building Blocks of High Performance Hydrogen-powered Storefronts: le blog post avec le plus de détails techniques

• Shopify partners with StackBlitz to bring Hydrogen development in-browser

React-Router n'a pas eu de breaking change depuis la v4 en 2017. La v6 est ré-implémentée de zero en utilisant les hooks React, ce qui permet de réduire la taille de 50%. Un usage avec React.Component reste tout de même possible. Il y a quelques changements notables, mais l'API reste familière et intuitive.

La v6 reprend le meilleur des versions passées et apporte des nouveautés:

• React-Router: code splitting, support TypeScript, co-located nested routes, JavaScript config object...

• Reach-Router: automatic route ranking (plus besoin de exact)

• Layout routes avec un composant <Outlet>

• Sous-routes sont relatives à leurs parents, facilitant la composition

• Incitation à upgrader, d'autres améliorations sont prévues

La migration de v5 ou de Reach Router ne semble pas trop complèxe, il y a déjà pas mal de doc sur le sujet, et ils préparent des packages de rétro-compatibilité.

Storybook est un outil pratique pour afficher et travailler sur des composants en isolation. Mais parfois, les props du composant ne sont pas suffisantes pour mettre le composant dans l'état souhaité (en particulier lorsqu'il est stateful).

Pour résoudre ce problème, ils ajoutent une méthode Component.play() qui permet d'interagir avec le composant via Testing Library pour le mettre dans l'état souhaité.

Kent C. Dodds présente un pattern qui consiste à pouvoir ré-initialiser le state d'un composant React sur la valeur initiale. Il y a un interêt par rapport à l'usage de key: permet d'éviter de démonter/remonter le composant, qui en dehors d'être plus lourd, peut présenter d'autres désavantages qu'il illustre avec un exemple sympa d'animation de radio button. Pour fournir cette callback reset(), il faut aussi faire attention à conserver quelque part le state qui a servi à l'initialisation (une prop initialValue n'est pas fiable car elle peut changer au cours du temps)

Un article sympa qui montre bien les baby steps du TDD appliqué à un composant React. A noter qu'on ne teste pas les détails d'implémentation, , ce qui rend le test moins fragile. Pour tester le style du composant, il y a de meilleurs outils que TDD, comme Storybook + Chromatic.

Extras:

• Gatsby 4.1

• TypeScript Control flow analysis for destructured discriminated unions: PR de Anders Hejlsberg mergée, feature qui sera très utile pour React (sur le destructuring de props, de résultats de fetch...)

• File-based routing with React Router: partie 2 publiée, qui propose d'apporter en plus le code splitting via l'API Vite import.meta.glob et <Suspense>

• 🎙️ Podcast de Swyx avec Lee Robinson: Next.js 12, Server Components, Edge Functions, vs Remix... une liste de sujets très intéressante!

• 🐦 Addy Osmani mentionne que les Core Web Vitals de nos frameworks web se sont bien améliorées, avec une belle progression pour Next.js (sans doute gràce au projet Aurora) et pas trop mal pour React. Attention: une grosse amélioration ne veut pas dire que les scores sont forcément les meilleurs. On est pas trop mal, mais il faudra surement attendre les Server Components pour que React puisse réellement rivaliser avec les frameworks plus léger.

• 🧵 Houssein Djirdeh du projet Aurora explique les améliorations livrées et à prévoir dans Next.js.

• 🐦 "React Server Components is such a good idea that we will spend the rest of the decade continuing to explore its implications and applications": Guillermo Rauch

• Recoil 0.5

• Next.js 12 Performance Test: Builds Appear to be Slower, Not Faster: benchmark a confirmer, pas de commentaires de Vercel

React-Native

Les développeurs vanilla React-Native ont parfois une perception erronée du SDK Expo, pensant à tort qu'utiliser un module Expo ne sera pas possible, ou va alourdir considérablement leur app.

J'ai aussi constaté via plusieurs audits que beaucoup d'apps vanilla React-Native n'utilisaient aucun module Expo, préférant des alternatives non-Expo qui sont souvent de moins bonne qualité.

Kudo déconstruit ce mythe (auquel il croyait, il faut dire que c'était vrai du temps du monolithe ExpoKit), explique qu'un module Expo peut facilement être installé sur une app vanilla React-Native, et ne dépend que du package common expo qui reste assez léger.

Extras:

• React-Three-Fiber: support React-Native mergé pour la v8

• Reanimated 2.2.4: supporte déjà React-Native 0.67 (RC)

• Nouvelles démos Skia: drawing (code) + shaders

💸 Jobs

Cajoo: Dev Fullstack - Remote - 40-75k€ (+BSPCE)

Cajoo veut créer le supermarché de demain 🛒 Nous sommes présents dans 10 villes en France et suite à un investissement de 40M$ de Carrefour nous étoffons l'équipe tech pour créer la stack tech du futur du retail. Les squads s'insèrent dans les 3 streams:

• 🛍️ Consumer: App B2C en React Native, back-office React, backend Hasura & lambdas Node/Typescript

• 🏭 Warehouse: PWA React avec XState pour les opérateur en entrepôt, back-office React, backend Hasura & NestJS

• 🚴 Delivery: App coursiers en React Native sur Expo, back-office React, backend Hasura & lambdas Node/Typescript via Serverless

Notre code est typé de bout en bout avec Hasura en backend qui génère des endpoints GraphQL que nous consommons en frontend avec Apollo et un typing fort via Typescript.

• 🌴 Remote pour les équipes Tech, Produit et Data (avec possibilité de venir dans nos locaux dans le 8ème à Paris)

• 🏄‍♂️🏔️ Offsite chaque trimestre dans un endroit sympa en France (Hossegor, Chamonix)

Une offre ci-dessous t'intéresse? Réponds à cet email!

Smallable: dev React senior - CDI Paris 50-60k (+ CTO)

Ask Mona: dev React confirmé - CDI Paris 45-50k

Hublo: Node.js React senior - CDI Paris/remote 60-70k (+ EM)

Habx: React TS - CDI Paris - 38-50k

Ponicode: dev JS/React - CDI Paris 40-65k

Shift: dev React senior - CDI Paris/remote 50-60k

Choose: dev React-Native - CDI Paris 50-60k

Splio: dev fullstack React/NodeJS senior - CDI Paris 60-70k

F4: dev NodeJS - CDI Paris 40-50k

Aria: dev NodeJS - CDI Paris - 45-60k

HD Rain: dev backend Node.js React - CDI Toulouse 38-45k

Teester: dev frontend React - CDI Nantes 40-45k

Divers

Le support des ES modules pour Node.js est retardé.

J'aime en particulier:

• le nouveau type Awaited

• --module 2022, support de top-level await

• Template String Types as Discriminants

• Tail Recursion Conditional Types (utile en particulier pour les parser recursivement les Template String Types)

• Support de import {type XYZ} from 'lib'

Un nouveau DevTool Chrome permet d'enregistrer tout un flow utilisateur et pouvoir le rejouer, ce qui peut être très pratique pour debugger certains problèmes de performances.

Le support des user flows dans Lighthouse permet de detecter des problèmes qui ne surviennent qu'après le chargement initial de la page, comme une navigation ou une interaction utilisateur qui produit un layout shift.

Jusqu'a présent, les outils de performance étaient surtout focalisés sur le chargement initial des pages. C'est une bonne chose qu'on puisse mesurer un flow dans son ensemble: cela permet de juger plus objectivement si l'usage d'une Single-Page-Application présente des avantages face à une solution plus légère qui aura souvent de meilleurs scores sur le chargement initial.

Extras:

• Les attaques de "package supply chain" via npm continuent, avec de nouveaux packages compromis (coa, rc). Voir aussi RFC npm Make npm install scripts opt-in. Un nouveau vecteur d'attaques "Trojan Source" a aussi été publié: vous pourriez merger du code compromis sans même vous en rendre compte via l'usage de "Unicode control characters"

• Babel 7.16.0: ESLint 8 and TypeScript 4.5

• Le système de plugins Rust pour SWC arrive bientôt.

• Error Cause en stage-4: peut-être que mon tweet aidera à comprendre l'interet?

• Angular 13: drop du support IE11, de View Engine, activation du persistent caching Webpack 5 et diverses améliorations...

• GitHub change de CEO: Nat Friedman -> Thomas Dohmke

• 1, 2, 3 soleil de Squid Game en TensorFlow 😂

• Towards an animation smoothness metric

• structuredClone: API JavaScript bientot dispo partout