This Week In React #83: Remix 1.0, React Test Selector, Tamagui, R3f, Next.js, PopperJS, Bun, TypeScript, Lighthouse, Cloudflare...

React

This is the official launch for Remix, the React meta-framework by Michael Jackson and Ryan Florence focusing on user experience and progressive enhancement.

The landing page is very well done and explains some of the innovations offered: Form component which can work without JavaScript, nested routes, prefetching, parallelized data loading (without waterfall or spinners), mainly based on existing web APIs, management of error boundaries ...

It does not offer a static export, which seems to become less attractive in the React ecosystem nowadays?

We'll have to read the doc to get a more concrete idea, but the first impression is good. There are a lot of points that differentiate it from its competitor Next.js. In the intro video, Ryan Florence explains that Remix is ​​more comparable to Rails and takes care of the user experience as a whole. The project's monetization strategy is oriented around a service offering.

Various links:

• Site

• Twitter

• Trailer

• Video introduction

• StackBlitz & CodeSandbox playgrounds

Brian Vaughn presented a new experimental RFC API for end-to-end testing whose primary motivation seems to be to make Jest tests more robust and portable, with the ability to support any renderer (React-Native, React-Three- Fiber ...).

The API would allow the use of nested selectors, and there would be a selector to target text, a data-testname or even a React component.

It all sounds like a good idea to me, but let's see how it fits into the ecosystem with Testing Library and Detox.

Varun breaks down different React-Three-Fiber techniques that he used to create a 3D scene. Using React brings a plus with its modular and declarative approach, the ability to use Storybook ...

React-Three-Fiber is also cross-platform, and React-Native support is coming in v8, as seen in this Paul Henschel's demo.

Extras:

• The React team clarifies: Server Components won't be in v18.0 but will be released later, in a minor version.

• How To Prevent Unnecessary React State Update Re-renders: highlights 2 interesting techniques to avoid useless re-renders: using functional setState and avoiding un-necessary state object/array shallow copies.

• Next.js: proposal to offload third-party scripts in a Web Worker to improve page load time, possibly using the existingPartytown lib

• 🎥 What's Next.js #1: first video of a new series of online meetups about the cutting edge things in the Next.js ecosystem. This one discuss in particular the usage of Bun, the new bundler in Zig and compatible with Next.js.

• 🎥 "Should you learn JavaScript before React?" by Lee Robinson

• Gatsby 4.2

• How to Create and Publish a React Component Library

Partners

• 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

• Start React Native: learn everything about gestures and animations with William Candillon

• 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

React-Native

A new abstraction on top of React-Native-Web to facilitate the creation of design systems and cross-platform apps, in particular to solve certain problems such as media-queries, design tokens, theming ...

I like the idea of having a compiler to extract inline styles in atomic CSS-in-JS, and optimize the rendering.

This lib is compatible with Server-Side-Rendering, and its website is built with Next.js.

We'll have to figure out how this new solution differs from Dripsy, trying to solve a similar problem.

Extras:

• react-native-performance: new Flipper plugin to monitor React-Native FPS, inspired by Lighthouse (Android only for now).

• Don’t use the wrong JDK for React Native if you’re using an M1 Mac: Jamon advise to use Azul JDK to compile your Android apps 2x faster.

• PopperJS v3 is platform-agnostic and will support React-Native

• New Skia demo: using a 2d physics engine

• An Expo app under 5mb: this is now achievable thanks to Expo Application Services

• "we now have 1200+ React Native screens in the Facebook app"

• How to Manage Environment Variables in React Native

• React Native: Two Important Lessons I Learned The Hard Way

Other

Anthony does a great job as a journalist to tell us about partial or progressive rehydration, progressive enhancement, islands architecture... He mentions how these issues are addressed in many frameworks through time.

This article gives a good overview of the current trends aiming to improve the performance of our Single-Page-Applications (and avoid the "uncanny valley") and leading to the arrival of innovations in the React ecosystem (server components, SSR streaming, progressive hydration ...).

Extras:

• Lighthouse 9.0: with user flows support, allowing to get insights on interactions: a convenient feature for SPAs.

• Cloudflare Pages Goes Full Stack: Cloudflare catches up on DX: it's now possible to deploy serverless Cloudflare Workers alongside your static deployment with a simple git push

• TypeScript 4.5: as planned, ES modules support is delayed. But this release still has a few interesting features such as Awaited and tail-recursion on conditional types

• Astro 0.21: using Vite, new Go compiler, and a MDX-inspired system to mix Markdown + interactive components

• Svelte Cubed: Rich Harris open-sourced an experimental lib to use Three.JS with Svelte

• Introducing “Shadow Palette Generator”: new tool by Josh Comeau to help you create realistic shadows

• GitHub’s commitment to npm ecosystem security: 2FA becomes mandatory for widely used packages

• Proposals.es: convenient to navigate TC39 ES proposals

• The 2021 State of the Octoverse

• Some notes on using esbuild

• How do arrays work?

• Electron 16.0

• Chrome 96 DevTools

• "I will pay you cash to delete your npm module"

Dan @dan_abramov

Recruiter: Do you have a CS background? Me: Yes, absolutely My CS background: https://t.co/eDnPsr0CDN