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

Feb 01, 2022

Remix: Not Another Framework!

Remix builds on top of Web standard APIs. Ryan Florence can't predict if Remix will stick, but gives good reasons to learn it: the knowledge you acquire won't be lost. It's like React: no need to learn another templating language, and the JS knowledge you get by using JSX remains usable in many other places.

Remix is also designed to be framework-agnostic. On Twitter, Ryan Florence teases us on the next possible targets for Remix. I bet on Qwik and Solid.

I increasingly see Remix as a potential gateway to Deno (also based on web APIs), and possibly the next framework to outlive React.

MDX 2.0

Official launch for MDX 2.0. This technology permits to interleave Markdown and JSX quite easily, very convenient to create interactive content (ie Josh Comeau's website, Docusaurus...).

v2 improves on many things: fixes a few syntax problems, significantly improves performances , can support other frameworks...

Lifetime Analysis for React Component Architecture

Alan is inspired by the concepts of lifetime analysis and ownership of objects in Rust to deduce where to put his React state. I feel like I do exactly this, intuitively. Original reading, a little verbose initially, but this makes sense at the end. No need to understand Rust.

Creating a Schema-Based Form System

Tania explains how to drive the rendering of a React form with a JSON schema. The example is based on Formik and Yup, but it is above all the technique that matters, and can be useful for integration with a CMS or backend that sends you such schema.

Extras:

Dan Abramov rewrote the React Quick Start docs (beta site) and it looks great!
🎥 The Story of React: nice retrospective on the story of React, from JQuery/Backbone to Next.js/Remix
Pause Your React App with Breakpoints: for those still using console.log 😏
react-zorm: new React form lib (uncontrolled), typed and based on Zod, leveraging web APIs (FormData) to integrate nicely with Remix
The baseline for web development in 2022: those stats on the web got the ecosystem talking this week: React doesn't have such good scores, and in particular Next.js (beaten by Gatsby on Core Web Vitals).
🧵 "Over-fetching means three things to me": on the advantages of GraphQL with Relay, compared to modern alternatives (Remix loaders, Next.js getServerProps, tRPC...)
🧵 Next.js: avoid returning too much data in getStaticProps and getServerProps
Recoil 0.6: React 18, concurrent rendering, strict mode
Docusaurus 2.0.0-beta.15: nice release 😌
SWR 1.2: supports .mjs + optimistic UI auto error rollback
Gatsby v4.6
🎥 Nx ❤️ Remix
Atomic design and storybook

💸 Sponsors

Stream: powerful Chat & Feeds for React & React-Native

Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.

With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

Stream provides robust client-side SDKs for popular frameworks such as React, React-Native, Flutter, Android, Angular, Compose, Unreal and iOS. It also supports Expo managed workflow.

Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.

React-Native

React-Native Versions: TIL about this tool to know usage of each React-Native version (+ Expo SDK). Might be useful to convince your boss to upgrade.
Deep dive into React Native’s New Architecture: introduce pieces of the new architecture: JSI, Fabric, Turbomodules, Codegen
🐦 "We will be focusing a lot on Expo web this year": exciting!
🐦 Demo React-Native-Skia: shaders, path interpolations
🐦 React-Native-Performance 0.4
🎙️ RNR 225 - Behind Our Decision to Cancel Chain React 2022

Partners

Start React Native: learn everything about gestures and animations with William Candillon
React-Native Weekly: stay up-to-date React-Native core updates
TypeScript Weekly: the best TypeScript links every week, right in your inbox.
ES.next News: learn about the latest in JavaScript and cross-platform tools
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
Infinite Red: US React-Native experts making your idea a reality
Software Mansion: the co-creators of React Native and the technological core of many tech companies

Other

Porting tsc to Go (not Rust)

With the arrival of new bundlers, type-checking becomes the bottleneck in larger codebases. Donny (Vercel) is the author of SWC (Rust). He attempted a complete rewrite in Rust (POC compiles 62x faster than tsc), but it's a lot of work compared to a port that would draw on existing tsc code.

Problem: the tsc codebase is difficult to port to Rust (shared mutability, GC...), and Go is better suited for this specific task.

The plan of SWC and Vercel is clear: they will provide us fast tooling for the everything we need: transpilation, typechecking, minification and bundling.

About porting tsc, another alternative in Rust exists - tyty - but for the moment it's a side-project, not yet open-sourced.

Deno in 2021

Deno shares its 2021 retrospective, with improvements on the core (opcalls, perf, FFI), their Deno Deploy service (V8 isolates, comparable to Cloudflare, good target for Remix)...

I'm excited about the compatibility with web APIs and Node.js compat mode. With Node.js gradually implementing web APIs (see below), we might be able to switch from one to the other more easily through meta-frameworks like Remix.

Extras: