📨 #124: FLIP, Lifecycle, Next.js, TypeScript, Vanilla-Extract, LiveView, Remix, GitHub, Race Conditions, Fontpie, Remotion...

November 15, 2022 · 7 min read

Newsletter Editor - Docusaurus maintainer

Hi everyone!

After a few intense weeks, the React ecosystem slows down a bit in terms of major announcements.

We still have some very good articles coming out. The TypeScript plugin for Next.js looks awesome!

The GitHub Universe conference has ended. GitHub seems to be using React more and more, on some views, and also via GitHub Blocks based on MDX.

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread

Don't miss the next email!

My favorite resource for keeping up with the React community!

Evan BaconEngineering Manager - Expo

💸 Sponsor

FlyCode Makes React Apps Editable without coding, Git based

FlyCode (YC S22) makes React web apps editable in minutes so Product and UX teams can iterate and release products faster, so they don't have to wait on (or consume) developer time.

FlyCode reads your regular React code and finds Texts, Images, Design tokens and Analytics event, then it let's non-coders collaborate and edit them and send back a pull request (they don't need access to GitHub!)

Saves development time
No code integration, it just reads your code!
GitHub based, a bot is scanning the code and creates pull requests
Use your own stack and components
Retain codebase ownership

You can get started here: flycode.com/developers

⚛️ React

Inside Framer's Magic Motion

A great interactive article that explains what a layout animation is. It greatly deconstructs the FLIP technique which allows to make this kind of transition perform better via CSS transforms (position, scale). We recreate the layout animation system of Framer Motion step by step.

On the same subject, I recommend to read also Everything about Framer Motion layout animations.

Timeline of a React Component With Hooks

An interactive diagram that demonstrates the lifecycle of a React component, including hooks, refs, and DOM updates/paint (not available on mobile). Also includes a quiz to test your knowledge, and many quotes/references.

Next.js 13 TypeScript Plugin

Shu Ding is working on a TypeScript language service plugin (source) that significantly improves Next.js DX by bringing docs, new errors and autocompletion on top of Next.js and Server Components conventions. This compensates nicely the inability to type exports from an ES module in TypeScript, a feature much requested by framework authors.

Writing Performant CSS with vanilla-extract

An exhaustive article about vanilla-extract, the no-runtime CSS-in-JS library based on TypeScript by Mark Dalgleish (creator of CSS Modules). Mention also its atomic CSS overlay Sprinkles. Examples based on React: reproduction of a Tailwind UI component. Many comparisons with Tailwind and other CSS-in-JS solutions. Well, it looks powerful, but not so simple indeed 😅 We'll have to study this further.

📖 React beta docs: class component API ref (WIP)
🐙 GitHub UI using React (Hacker News thread): GitHub seems to use React more and more. They also have a React design system: Primer React. The upcoming feature GitHub Blocks which allows to make the README interactive is also implemented with MDX
📜 Fetching data in React: the case of lost Promises: well-illustrated interactive article on the race conditions that can occur when making requests. Gives several techniques to avoid them. I also wrote an article on the subject 😜 (both are worth reading, quite complementary)
📜 A Love Letter to React: the creator of Phoenix (Elixir framework) explains how he was inspired by React to create LiveView: a solution to add interactivity on server-side rendered HTML. LiveView reminds me a lot of Remix!
📜 Open Development for Remix: Remix wants the project to be community driven. Everything becomes public: roadmap/process, and planning meetings streamed on Youtube.
📜 Type-safe environment variables on both client and server with Remix: interesting solution parsing env variables with Zod and exposing some of them to the client, including type-safety and autocomplete.
📜 Chromatic - Interaction tests for user behavior: Storybook interaction tests are now integrated with Chromatic SaaS
📜 React Server vs Client components in Next.js 13
📜 What is a state manager
📜 A novel schema-first approach to building forms
📜 Creating fluffy trees with Three.js (part 1)
📊 I compared deploy speeds for Reflame, Vercel, Netlify, Cloudflare Pages on the same repo: the marketing around "instant deploy" is not always true.
💰 Remotion - We raised CHF 180k to simplify programmatic video!: I bring my modest contribution 🤭
🐦 Comparison between Next.js 12 and the Next.js 13 experimental app dir!
🗣 RemixConf 2023 CFP Open
📦 Fontpie: new CLI solution to avoid custom font layout shifts (see this demo to understand). It makes techniques used in next/font framework-agnostic.
📦 Remix-Vite: adds Hot Module Replacement support to Remix
📦 craco 7.0: allows to customize CRA - CRA v5 support
📦 Redwood 3.3
📦 Rockpack 3.0 - create-react-app on steroids + SSR

Don't miss the next email!

The one React newsletter/source of "what's new" that I follow

Sunil PaiEngineer - ex React core team

💸 Sponsor

refine - 100% open-source, headless React framework for building CRUD apps

refine seamlessly works with any custom design or UI framework you favor. For convenience, it ships with ready-made integrations for Ant Design, Material UI, Mantine, and Chakra UI. It eliminates the repetitive tasks demanded by CRUD operations and provides industry-standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n.

📱 React-Native

📜 Expo-router and remote code: shows how to use react-native-wormhole with Expo Router to consume React-Native components on a remote url. It's quite related to the idea of having React-Native Server Components.
🧵 Expo Modules API thread: Tomasz Sapeta shares some interesting info about the new Expo API for creating modern native modules in Swift/Kotlin, including some future developments like SwiftUI / Jetpack Compose support.
📦 React-Native 0.70.6
📦 Moti 0.21
📦 JestNative v5.2 matchers - toHaveAccessibilityState()
🎙️ The React Native Show 18 - Module Federation
🎙️ RNR 252 - Ionic's React Native Portals with Josh Thomas

🧑‍💻 Jobs

🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

🧑‍💼 G2i - 100% Remote React Native Jobs

We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

💡 How to publish an offer?