DEV Community

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

Posted on • Updated on

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

Hi everyone!

4 big news this week:

  • React 18 RC2 with official blog post
  • The rollout of the new React-Native architecture is accelerating
  • The Microsoft proposal to add type annotations in JavaScript!
  • The arrival of many APIs in Safari 15.4

On the React side, 2 pretty cool interactive articles.

On the React-Native side, Solito offers a cross-platform abstraction common to React-Navigation and Next.js. Nice comparisons with Flutter.

The future newsletter landing page is almost ready. I'm not really good at design so don't hesitate to give me advice 😅

🙏 Support the newsletter:

If you like this newsletter, subscribe in priority there:

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:

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:

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:

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 enumsnamespaces 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:

image

Image description

Discussion (0)