This Week In React

Share this post

This Week In React #86: Special React Conf, React-Forget, Web-Components, Framer Motion 3D, Expo, Turborepo, Tailwind, Vitest...

substack.thisweekinreact.com

This Week In React #86: Special React Conf, React-Forget, Web-Components, Framer Motion 3D, Expo, Turborepo, Tailwind, Vitest...

Sébastien Lorber
Dec 14, 2021
Share this post

This Week In React #86: Special React Conf, React-Forget, Web-Components, Framer Motion 3D, Expo, Turborepo, Tailwind, Vitest...

substack.thisweekinreact.com

React

The React Conf 2021 playlist is fully available online. I haven't looked at everything yet, but here are some talks I can summarize:

  • Andrew Clark about the React 18 vision: "Our north start: to make it easier to build great user experiences". With React, designers and developers speak the same language. Recalls the close relationship between UX and DX.

  • Juan Tejada about Suspense: the problems solved, like race conditions or annoying friction during the design of app loading experiences ... Suspense on the server side (React.lazy) will be released in React 18.0, but for data fetching we will have to wait a little longer.

  • Lauren Tan about React 18: there is no concurrent mode anymore, only concurrent features that you can opt-in gradually. Adopting React 18 looks easy and should be pretty backward compatible if you don't use new APIs. A Release Candidate is available!

  • Andrew Clark about Server Components: feature enabled thanks to Suspense. Awesome DX, allows to reduce bundle size significantly. In preview, can only be tested in Next.js and Hydrogen. Will be released in a React 18 minor version (after 18.0). A new dedicated working group has been created.

  • Ricky Hanlon about React-Native: in reality, React === React-Native. The work on one platform permits to improve all the others (various examples given). React-Native is not building for the lowest common denominator of all platforms, but want to allow building the best UX on each platform without any compromise. This is exactly why I'll stick with React!

  • Xuan Huang about React without Memo: that was the unexpected surprise of the conference. Facebook/Meta is working on React Forget, that smart compiler that they spoke about a few years ago. This should allow to write performant React code without using useMemo, useCallback and even React.memo! There are a lot of complex problems to solve, and this project might even fail (remember Prepack?). But it's very encouraging to know that this is being worked on by a smart guy (Xuan is also working on Hermes, the React-Native AOT runtime).

  • Brian Vaughn about React DevTools: details how DevTools work, mention useful improvements (named hooks...), and the integration with various new React 18 features (scheduler, useDeferred, Suspense...). Great bonus insight: React-Native is well-equipped to handle 2D/3D VR needs (hmm, is this related to the Metaverse? 🤔). There also seems to be a need for React-Native/VR Server-Driven UI (I hear React-Native Server Components? 🤔)

There were a lot of other great talks that I couldn't summarize here unfortunately 😅

Extras:

  • 😱 Sebastian Markbåge hired by Vercel

  • React & Custom Elements: Web Components support has been merged (experimental tag) and may be included in React 18.x

  • React Server Components & Remix: Remix does not use yet Server Components. This post presents many demos where Remix outperforms official Server Components demos from the core team and Vercel. Dan Abramov comments. Existing demos may not be very optimized yet, but it's still nice to see Remix having great performances. It's not clear if Remix will benefit from React Server Components yet.

  • What is Remix? TL.DR: "a compiler for React Router"

  • 🧵 Dan Abramov: "a hundred things i learned working on the react team"

  • Framer Motion 3D: Framer Motion meets React-Three-Fiber. Demos are super cool!

  • Introducing the new Relay compiler: explains why there's a compiler and why it was rewritten in Rust (perf x5)

  • Ariakit: v2 of Reakit

  • Docusaurus 2 beta.10: includes a much-awaited feature: link a sidebar category to a doc

  • Redux Toolkit 1.7: SSR support for RTK Query

  • React-Query v4 alpha

  • Hydrogen 0.8

  • Sandpack: supports React DevTools

  • Next.js Performance: Making a Fast Framework Even Faster

  • Redwood: What the 1.0 Release Candidate phase means

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

React-Native

Le SDK 44 in beta for a week. TL.DR:

  • still on React-Native 0.64.3.

  • new modules to customize navbar/background colors at runtime (see this demo).

  • Reanimated v2.3, with layout animations

  • Gesture Handler v2.0, with new gestures API

  • React-Native-Screens v3.1, with React-Freeze

Software Mansion wrote a nice overview of problems solved by Expo Application Services: boostrap your app, build a custom dev client, distribute for internal testing, code signing, upload on app stores, CI automations...

This nicely reflects the vision of Expo co-founder Charlie Cheever: There’s no reason that building mobile apps has to be harder than building websites. They slowly build the best mobile DX, the counterpart of Netlify or Vercel, and they seem not so far anymore to reach DX parity!

Extras:

  • The New Architecture Playbook: new doc to adopt the new React-Native architecture, work in progress (PR)

  • Doc React-Native-Skia, work in progress previewe

  • React-Native-Radio #220 - We React to News

Other

Jared Palmer is well-known in the React ecosystem (Formik, Razzle, tsdx...). His project Turborepo (initially closed-source and not free) has just been acquired and open-sourced by Vercel, that he also joined. This video is a nice 30min overview + a Q&A

Turborepo is a build system for JS/TS monorepos. It should significantly improve build time performance compared to existing alternatives such as Lerna. The idea is to never execute twice the same task. It achieves that by using a caching system (monorepo packages are fingerprinted/hashed and dist artifacts are cached in node_modules/.cache/turbo). This cache can even be uploaded to a remote storage and shared between co-workers and CI/CD pipelines: it seems way faster to download that to re-execute. Jared comments: "Turborepo is Dropbox for dist directories". There are many other interesting features, like the ability to declare dependencies between build steps (pipeline), analyzing the graph of dependencies, profiling build performances in Chrome DevTools...

This new tooling is already well-integrated in Vercel: you get some remote caching storage for free. You can also self-host: Vercel does not lock you in and just improves DX, but it looks to me the plan is to provide more useful cloud-related services on Vercel in the future, to make their platform even more attractive. This also reminds Nx, an existing tool that also has a cloud offering.

Extras:

  • Tailwind CSS v3: new version released with a great trailing and a bunch of new useful features. I like the JIT compiler, and most importantly the ability to use any arbitrary CSS property: this looks as convenient as inline styles, but much faster

  • Vitest: new test runner in private beta, based on Vite. Looks like a serious Jest competitor, using modern features (Vite, ESM, top-level await, TypeScript...), and aiming to make it easy to transition to (snapshots, matchers, compatible expect() api...)

  • Defensive CSS

  • 🎥 The Future of Svelte: Vercel Interview with Rich Harris

  • Get the best of TypeScript Control Flow Analysis

  • TypeScript user-defined type guards to the rescue

  • Flutter 2.8: and a look back on a year of growth

  • ts-belt: FP in TypeScript

  • Learn Responsive Design: 5 new modules

  • Deno joins TC39

  • Node.js Memory Limits - What You Should Know

  • Why you should check-in your node dependencies

  • Reasons to avoid Javascript CDNs

  • Professional maintainers: a wake-up call

  • WCAG 3 is not ready yet

  • Improving GitHub code search

Twitter avatar for @gf_256
cts @gf_256
log4j https://t.co/EWnw8Gpt0p
Image
8:49 PM ∙ Jan 18, 2023
Share this post

This Week In React #86: Special React Conf, React-Forget, Web-Components, Framer Motion 3D, Expo, Turborepo, Tailwind, Vitest...

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