This Week In React #159: Bun, Static Hermes, Next.js, Redwood, Marz, React Aria Components, Next Nav, visionOS, Reanimated, Flame, Skia Fonts, Stagger

This Week In React #159: Bun, Static Hermes, Next.js, Redwood, Marz, React Aria Components, Next Nav, visionOS, Reanimated, Flame, Skia Fonts, Stagger


6 min read

Hi everyone!

This week, the runtimes are in the spotlight. Of course, we'll be talking about Bun and Static Hermes.

I'll spare you the heated debates on Twitter this week ๐Ÿ˜… let's stick to positive vibes.

For React experts, check out the React Advanced conf in London from 20 to 23 October (-10% - code "REACT10").

๐Ÿ’ก Subscribe to the official newsletter to receive an email every week!


๐Ÿ’ธ Sponsor

Enterprise Grade APIs for Feeds, Chat, & Video!

Enterprise Grade APIs for Feeds, Chat, & Video!

Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.

With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

Stream provides robust client-side SDKs for popular frameworks such as React, React-Native, Expo, Flutter, Android, Angular, Compose, Unreal, and iOS. Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.

Try the new React Video tutorial!

โš›๏ธ React

Bun 1.0

Bun 1.0

It's impossible to miss it this week: Bun has just been released as stable v1.0. This news isn't directly related to React, but it will undoubtedly affect all React developers out there at some point.

Bun is a complete toolchain for JavaScript and TypeScript based on Webkit and written in Zig. It is a new ultra-fast alternative to a whole host of front-end tools we use today: Node.js, npx, Babel, esbuild, swc, webpack, Jest, Vitest, npm, Yarn, pnpm... The benchmarks are super impressive and definitively real.

Its compatibility with the existing tools and its mixed ESM/CJS support make it quite easy to adopt as a drop-in replacement. Bun is generally able to run your code as is, without any changes (otherwise it's ๐Ÿฆ considered a bug). React frameworks like Next.js, Remix and Astro are already supported. Using it as a replacement for npm/Yarn/pnpm or Jest/Vitest is probably a good entry point and not too risky.

Other useful links:

๐Ÿ’ธ Sponsor - The open-source, full-stack Monitoring Platform - The open-source, full-stack Monitoring Platform is a truly open-source Session Replay, Error Monitoring, and Logging platform for your next project.

Don't waste time trying to guess why a bug occurs. Instead, use highlight and get a clear picture of whatever happens in the browser and on your server-side application.

It is super easy to install in your favorite framework: React.js, Next.js, Remix, or anything else!

๐Ÿ“ฑ React-Native

Static Hermes

Static Hermes

Static Hermes was announced at React-Native EU last week. I wasn't there, so I'm trying to explain what I understood by reading the slides, as the video isn't on YouTube yet.

Static Hermes is an experimental project that allows you to optionally compile some of your TypeScript (or Flow) code into native code. This offers significant performance gains (x10-20) compared to Hermes usual mode based in bytecode interpretation. It also enables easy integration with native APIs directly from your TypeScript code (zero-cost FFI, x15-80 faster than a JSI wrapper).

To enable this, TypeScript must first become a "sound" language. Static Hermes will modify the semantics of JavaScript to ensure that the declared types matches the runtime types. This slide explains the concept well:

Static Hermes makes TypeScript sound

A very interesting idea that could maybe one day have an impact outside the React-Native ecosystem?

Other useful links:

๐Ÿ”€ Other

๐Ÿคญ Fun


See ya! ๐Ÿ‘‹

Did you find this article valuable?

Support Sรฉbastien Lorber by becoming a sponsor. Any amount is appreciated!