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
La v6 reprend le meilleur des versions passées et apporte des nouveautés:
Reach-Router: automatic route ranking (plus besoin de
exact
)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é.
Extras:
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
Next.js 12 Performance Test: Builds Appear to be Slower, Not Faster: benchmark a confirmer, pas de commentaires de Vercel
React-Native
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é.
Extras:
React-Three-Fiber: support React-Native mergé pour la v8
Reanimated 2.2.4: supporte déjà React-Native 0.67 (RC)
💸 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 awaitTemplate 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'
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"
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 😂