This Week In React

Share this post

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

substack.thisweekinreact.com

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

Sébastien Lorber
Feb 1, 2022
Share this post

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

substack.thisweekinreact.com

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:

  • Node.js: v18 va supporter fetch nativement 🙌! JSON modules unflagged et peut-être une nouvelle API Response.json()?

  • Node.js debugging and error handling with Error Cause: belle présentation de cette nouvelle feature ES 2022

  • Trailing Slashes on URLs: Contentious or Settled?: mon analyse sur les trailing slashs (réalisé pour Docusaurus) semble utile à la communauté. Zach Leatherman (Eleventy/Netlify) présente mes résultats de manière plus digeste 🤗 Ca devrait aussi aider Gatsby 😏.

  • V8 v9.9: améliorations Intl

  • prettier-plugin-tailwindcss: pour ordonner les classes

  • Updates from the 88th meeting of TC39: pas grand chose à se mettre sous la dent 😅 il y a une proposal enum en stage 0 🤔

  • Turborepo v1.1: permet notamment de créer des dépendances sur les variables d'env

  • The TypeScript converging point: est-ce qu'on peut exprimer n'importe quel programme JS avec des types TS? Stefan réponds "Not yet" et illustre avec le typage de l'API CLI commander.

  • Créateur de NAPI-RS recruté par Vercel qui renforce son positionnement sur Rust

  • Vue 3 as the New Default

  • Caching Header Best Practices

  • Writing build scripts using TypeScript

  • How TypeScript Won Over Developers and JavaScript Frameworks

  • Demystifying TypeScript Discriminated Unions

  • openapi-graphql

  • The Return of Server Side Routing

  • State of the Web: Bundlers & Build Tools, Static Site Generators, Serverless Functions, Deno, WebAssembly

  • Publishing and consuming ECMAScript modules via packages

  • A pipe operator for JavaScript: introduction and use cases

  • Storybook + Figma

  • The Web in 2036: Predictions on a Whim

  • Building a Vaporwave scene with Three.js

  • Speeding up VSCode (extensions) in 2022

  • Getting Started With CSS Cascade Layers

  • 🎥 How does !important actually work?

Twitter avatar for @fireship_dev
Fireship @fireship_dev
Who is going to win? #ReactJS #javascript https://t.co/jcBEDceJub
Image
8:42 PM ∙ Jan 18, 2023
Share this post

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

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing