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

Hi everyone!

Trending this week: the convergence of frameworks and tools, using standard web APIs: Remix, Deno, Node.js...

MDX v2 freshly released, exciting for interactive content authors!

Quite calm on the React-Native side.

A good amount of TypeScript content.

It's exciting to see Vercel continues its investment to bring us faster DX: porting tsc, and hiring NAPI-RS creator. The plan is indeed to cover all the build pipeline, including replacing Webpack.

🙏 Support the newsletter 🙏:

😘 Recommend it to your friends: it really helps!
💸 Sponsorise This Week In React
😍 Write testimonials on Twitter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

React

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:

Node.js: v18 will support fetch natively 🙌! JSON modules unflagged and maybe a new API Response.json()?
Node.js debugging and error handling with Error Cause: nice introduction to this ES 2022 feature
Trailing Slashes on URLs: Contentious or Settled?: my analysis on trailing slashe (done for Docusaurus) seems useful for the community. Zach Leatherman (Eleventy/Netlify) presented it in a more appealing way 🤗 This should also help Gatsby 😏
V8 v9.9: Intl improvements
prettier-plugin-tailwindcss: to sort classNames
Updates from the 88th meeting of TC39: not much 😅 Note there's an enum proposal (stage 0) 🤔
Turborepo v1.1: allows in particular to create dependencies on env variables
The TypeScript converging point: "Can we express every JavaScript program through TypeScript types?" Stefan answers "Not yet" and explains limitations by typing the CLI package commander
NAPI-RS creator hired by Vercel which strengthens its position on 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?

Image description

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

Comments