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 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.
Unrelated: Kent C. Dodds had a serious car accident 🤕
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
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 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
fetchnatively 🙌! JSON modules unflagged and maybe a new APIResponse.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?
Top comments (0)