React Hebdo #92: Remix, MDX 2, Lifetime Analysis, Story of React, Quick Start Docs, TypeScript, Node.js, Deno, Go, Rust, Error Cause...

Feb 1, 2022

React

Remix: Not Another Framework!

Ryan Florence donne de bonnes raisons pour apprendre Remix, qui se base sur des APIs web standardisées. Il ne sait pas si Remix perdurera dans le temps, mais une chose est certaine: la connaissance ne sera pas perdue. C'est assez similaire à React: pas besoin d'apprendre un nouveau langage de templating: on peut pleinement utiliser JavaScript dans le JSX.

Comme déjà expliqué, Remix est aussi designé pour être framework-agnostic. Ryan Florence nous tease sur les prochains frameworks supportés par Remix. Je mise sur Qwik et Solid.

Je vois de plus en plus Remix comme une potentielle passerelle vers Deno (également basé sur les APIs web), et sur le prochain framework qui survira React.

Pas vraiment lié: accident de voiture de Kent C. Dodds 🤕

MDX 2.0

Sortie officielle pour la v2 de MDX, la techno qui permet de mélanger facilement Markdown et React/JSX, très utile pour créer des contenus intéractifs (cf le site de Josh Comeau), qu'on utilise aussi sur Docusaurus.

La v2 règle des problèmes de syntaxe, améliore significativement les perfs, et peut supporter d'autres frameworks.

Lifetime Analysis for React Component Architecture

Alan s'inspire des concepts de lifetime analysis et d'ownership des objects en Rust pour en déduire ou mettre son state React. J'ai l'impression qu'avec l'expérience c'est je fais intuitivement. Lecture originale, un peu verbeuse au début, mais on comprends bien à la fin. Pas besoin de comprendre Rust.

Creating a Schema-Based Form System

Tania nous explique comment piloter le rendu d'un formulaire React via un schema JSON. Ici il s'agit d'un exemple basé sur Formik et Yup, mais c'est surtout la technique qu'il est important de connaitre, et peut être utile pour l'intégration avec un CMS ou backend qui vous envoie ce schema.

Extras:

Dan Abramov a réécrit la doc React Quick Start (doc en beta)
🎥 The Story of React: belle rétrospective sur l'histoire de React, de JQuery/Backbone à Next.js/Remix
Pause Your React App with Breakpoints: pour ceux qui utilisent encore console.log 😏
react-zorm: lib de forms React (uncontrolled) typée et basée sur Zod qui s'intègre bien avec Remix (validation de FormData)
The baseline for web development in 2022: des stats sur le web qui ont fait parler l'écosystème cette semaine: React n'a pas de si bons scores, et en particulier Next.js (qui est battu par Gatsby sur les core web vitals).
🧵 Sebastian Markbåge: "Over-fetching means three things to me": reflexion intéressante sur les avantages de GraphQL avec un framework comme Relay, par rapport aux alternatives modernes (Remix loaders, Next.js getServerProps, tRPC...).
🧵 Next.js: évitez de retourner trop de data dans getStaticProps et getServerProps
Recoil 0.6: support React 18, concurrent rendering, strict mode
Docusaurus 2.0.0-beta.15: une belle release ;)
SWR 1.2: support .mjs + optimistic UI auto error rollback
Gatsby v4.6
🎥 Nx ❤️ Remix
Atomic design and storybook

💸 Sponsors

My Little Team

Une plateforme pour t'aider à trouver un job React dans une équipe qui correspond à tes valeurs.

Les avantages de My Little Team :

Filtrer les équipes par mission, valeurs, stack, style de management, télétravail, pour trouver celle qui te correspond.
Être le plus transparent possible sur les équipes et leurs valeurs.
Candidat•e first : après chaque entretien et dans ton nouveau job, on s'assure avec toi que tout se passe bien.

My Little Team est une plateforme indépendante, créée par un psychologue du travail et un développeur qui n'ont qu'un but : t'aider à être heureux dans ton travail. Retrouve plus de 40 équipes avec des missions inspirantes qui recrutent activement des déloppeur•ses React : Vendredi, Lalilo, Shotgun, Ponicode...

React-Native

React-Native Versions: je découvre cet outil d'analyse pour connaitre l'usage de chaque version React-Native
Deep dive into React Native’s New Architecture: présentation des différentes briques de la nouvelle architecture: JSI, Fabric, Turbomodules, Codegen
🐦 "We will be focusing a lot on Expo web this year"
🐦 Demo React-Native-Skia: shaders, path interpolations
🐦 React-Native-Performance 0.4
🎙️ RNR 225 - Behind Our Decision to Cancel Chain React 2022

💸 Jobs

Sponsorise React Hebdo pour publier ton offre d'emploi

Cajoo: Dev & Architecte Fullstack - Remote - 40-90k€ (+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)

Divers

Porting tsc to Go (not Rust)

Avec l'arrivée des nouveaux bundlers, le type-checking devient le bottleneck dans les grosse codebases. Donny (Vercel) est l'auteur de SWC (Rust). Il a tenté une ré-écriture complête en Rust (POC qui compile 62x plus vite que tsc), mais c'est beaucoup de travail par rapport à un portage qui s'inspirerait du code existant tsc. Problème: la codebase tsc est difficile à porter en Rust (shared mutability, GC...), et Go convient mieux.

Le plan de SWC et Vercel est annoncé: ils vont nous construire tout un écosystème d'outils ultra-rapide pour la transpilation, le typechecking, la minification et le bundling.

Une autre alternative en Rust existe - tyty - pour l'instant à l'état de side-project, pas encore open-sourcé.

Deno in 2021

Deno partage sa rétrospective 2021, avec les améliorations sur le core (opcalls, perf, FFI), leur service Deno Deploy (isolats V8, comparable à Cloudflare, bonne cible pour Remix)...

Je suis excité par la compatibilité avec les APIs web et le mode compatible avec Node.js. Avec Node.js qui implémente progressivement les APIs web, on pourrait peut être passer de l'un à l'autre plus facilement par le biais des meta-frameworks comme Remix.

Extras: