This Week In React

Share this post

This Week In React #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...

substack.thisweekinreact.com

This Week In React #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...

Sébastien Lorber
Mar 16, 2022
Share this post

This Week In React #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...

substack.thisweekinreact.com

React

How to Upgrade to the React 18 Release Candidate

React 18.0.0-rc.2 has just been released (under npm tag @rc). The React team published a blog post (+ 🧵 thread) to prepare us for the arrival of this new version. It includes the new concurrent features, which we can adopt incrementally.

They encourage us to test the release-candidate to detect the latest potential bugs, and offer a fairly complete upgrade guide by documenting the main api and behavioral changes. There is also a brief presentation of various new APIs.

Read this post directly, it contains many interesting details. Personally I discovered the concept of Strict Effects and that composants are now allowed to render undefined.

Delightful React File/Directory Structure

Interactive article by Josh Comeau on his file-system structure choices to organize a React app. Strong opinion: he explains in particular why he prefers to group files by type rather than by feature. I don't necessarily agree with everything, but it's still an interesting read and has some good arguments.

Everything about Framer Motion layout animations

Interactive article that presents layout animations with Framer Motion. Very well presented, with many examples. I really liked the example of Tabs with a shared layout animation: the API is quite intuitive, I didn't know it was that easy.

Extras:

  • 📜 How to Use Three.js And React to Render a 3D Model of Your Self: original article that proposes to create your own personal 3D avatar, display it with React-Three-Fiber and make it do some breakdance 😄 I really want to test that.

  • 📜 Profiling Next.js apps with Parca: first time I hear about Parca. This seems to be an interesting continuous profiling tool for those who self-host their Node.js apps (with Kubernetes for example) but might also be handy to profile performance problems locally. In this example, the tool detects a performance problem related to the unnecessary use of immutability.

  • 📜 Why Did And Don’t You Need To Import React

  • 📜 Automatic batching support in React 18

  • 📜 What it's like to migrate a high-traffic website from Gatsby to Next.js

  • 🧑‍🎓 Learn Next.js foundations: new resource offered by Vercel for beginners who want to build strong foundations before diving in Next.js: assume you may not know React

  • 👥 Xuan Huang: new React core team member, notably working on React-Forget

  • 👥 Remix Conf Speakers have been announced

  • 🎙️ Remix Podcast - Season 1: 12 episodes released

  • 🐦 Malte Ubi: "JSX should be part of JavaScript" & Nicole Sullivan: "YES! But JSX is not enough on its own. Let me explain…"

  • 🐦 form attribute, formAction: web APIs that we (I) discover using Remix 🤯

  • 🐦 SolidJS signals in React + Preact/reactive addon: several experiments around reactivity

  • 🎥 Basic React To Svelte Conversion

  • 🎥 React Query in 100 Seconds

💸 Sponsors

💡 How to sponsor this newsletter

React Bricks: CMS with visual editing for Next.js, Gatsby and Remix, based on React components

Content creators don’t like the grey forms of a headless CMS.

Visual tools like Wix or Webflow are either not flexible, complex to use or too flexible: a content creator should not decide on a margin, right?

React Bricks has the best of the 2 worlds: all the advantages of a Headless CMS and best in class Visual editing experience with no way to break the design system.

You create visually editable content blocks as React components using the react-bricks library. Content creators use these blocks to compose content with all the freedom they want and no more than they need.

Learn it in about 2 hours with the Step-by-step tutorial or the full Documentation.

Create your free account and start building now

React-Native

An update on the New Architecture Rollout

Nicola reminds that the new architecture is coming, and presents the different initiatives to prepare the community:

  • The working group

  • The migration guide

  • The new architecture doc

  • The ability to easily enable the new architecture in React-Native 0.68 - coming soon

  • Conversion of third-party libs

  • The Hermes engine enabled by default

Solito

Fernando Rojo regularly pushes innovation in the field of cross-platform (see also Moti and Dripsy). Solito makes it possible to share even more code between web and mobile by offering navigation primitives shared between React-Navigation and Next.js. He's been working on this for a while, it's not the first iteration. It also offers a monorepo example to get you started fast.

Flutter is better than React Native*

*…in all the ways that don’t matter 😄

Jamon recognizes that Flutter is good on many aspects (DX, CLI, e2e tests, upgrades, performance...). He presents the tradeoffs of both frameworks quite fairly. There is no clear winner. Some important points on which Flutter can hardly compete: web support, sharing code and knowledge, and the ability to hire.

Flutter Web vs HTML, CSS & JS: Performance Comparison

Interesting for a React-Native dev (and also related to the article above) because it highlights the limits of its competitor Flutter to support the web (where React-Native-Web works wellà). Flutter web is not a good choice for content sites, but can remain a good solution for heavier web apps. Note that React-Native-Skia on the web will have similar tradeoffs.

Extras:

  • 📜 Avoid Keyboard in React Native Like a Pro: exhaustive resource that documents with gifs the iOS and Android behavior of several ecosystem libs to manage the virtual keyboard: this is clearly not the easiest part of React-Native 😅

  • 🧑‍🎨 React-Native-Skia: inner shadows, animations

  • 🎥 React-Native-Skia with Christian Falch & Jamon Holmgren

  • 📦 React-Native-Performance: now supports iOS

  • 📦 React-Native TVOS 0.66.3-2: Fabric support for Apple TV

  • 📦 React-Native-Gesture-Handler 2.3: Fabric support

  • 🧵 What's next in React Native?

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

A Proposal For Type Syntax in JavaScript

😱 Microsoft is working on a TC39 proposal (stage-0) to bring type annotations to the JavaScript language syntax, inspired by TypeScript (without enums, namespaces etc...).

The browser would simply ignore those type annotations and not do any type-checking, so TypeScript (or other type-checkers) remains relevant.

This is interesting in development: we can directly execute TypeScript code without any transformation in the browser. In production, we would continue to bundle the code, because minifying and removing types remains useful (see Ryan Cavanaugh's analogy with minification).

See also the dedicated proposal website.

Extras:

  • New WebKit Features in Safari 15.4: a bunch of new features! Many are now available in all major browsers and will therefore gradually become usable in production (like CSS Container queries 🙌).

  • Tao of Node - Design, Architecture & Best Practices: after his popular Tao of React, Alex shared an exhaustive list of principes he follows when developing Node.js apps.

  • A Complete Guide To TypeScript’s Never Type: complete article on the TypeScript bottom-type never

  • twitter-api-typescript-sdk: finally an officiel SDK

  • CSS: @when or @if

  • SWC v1.2.154: minifier perf improvements

  • Vite 2.9 beta: much faster cold starts

  • pnpm-7.0.0-beta.0

  • TypeScript PR - Optional variance annotations

  • TypeScript: optional vs. undefined

  • StackBlitz February 2022 Update

  • StackBlitz has joined the Bytecode Alliance

  • Front-end Testing Strategy

  • What's New In DevTools (Chrome 100)

  • What Is Vitest?

  • Turborepo Demo (Remote Caching & Deploying to Vercel)

  • How Storybook helps designers & developers stay in sync

  • A look at the dialog element's super powers

  • Aligning Content In Different Wrappers

  • GraphQL error handling to the max with Typescript, codegen and fp-ts

  • Typescript Tuples, and how they work

  • How to use Google Analytics in Deno Deploy

  • Partytown 0.5

Twitter avatar for @TheEhsanSarshar
Ehsan sarshar 👋 @TheEhsanSarshar
@Ksound22 https://t.co/krXbgqtHHg
Image
8:49 PM ∙ Jan 18, 2023
Share this post

This Week In React #98: React 18 RC2, Framer Motion, 3D Avatar, Parca, React-Native, Solito, Flutter, TypeScript, Safari...

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