🚀 React Native is about to become even faster

Published 3 months ago

notJust.dev Newsletter 🚀

Stay up-to-date with the latest technologies and become a better developer

Hey notJust Developers,

React Universe Conf (formerly React Native EU), organized by Callstack, has recently concluded. The two-day event started on Sept 5th and was filled with exciting announcements.

So many announcements, that we had to cover them in 3 different issues.

In the previous issues, we covered:

The New Architecture as Default in 0.76 🚀
New React Native DevTools 💯
Expo Dom Components with SDK 52 🔥
Tree Shaking in Expo 🤟

Today, let’s dive into:

Hermes V2 soon 🎯
Server-Defined Rendering in React Native 🚀

Hermes V2 soon 🎯

It was a great pleasure to have Tzvetan Mikov (Tech lead at Hermes Team) on stage to announce the performance of the upcoming Hermes V2. It is still undergoing testing, but the performance improvements are amazing.

Intro to Hermes

Hermes is a JavaScript engine that generates bytecode from JS code at the app’s build time. Then, at runtime (app launch time), Hermes loads the bytecode to run on devices. It was officially announced at Chain React 2019 and first integrated with React Native in version 0.60. Starting from React Native V0.64, Hermes became the default JavaScript engine.

V2 Improvements Benchmark

Tzvetan and his team worked hard on some deep assembly code (low-level machine code) to improve the performance of Hermes over the last few months, and they finally achieved the first round of their goal. He presented on stage that the performance of un-typed JS code (e.g., raw JS code) in V2 improved by 50% 🔥.

He also presented a performance benchmark for a React Native app written in typed JavaScript (e.g., TypeScript, Flow), showing a 9x speed improvement 🔥.

Finally, he showed us an animation written in JS code. The left side displayed the current Hermes performance, while the right side showed the results with Hermes V2, with significant improvements in movements 💯.

When V2 will be Default?

Timkov mentioned that the team will release Hermes V2 soon, along with an upcoming React Native release 🚀.

Server-Defined Rendering in React Native 🚀

Another great piece of news is that during the conference, Mike (Founder at Xplat Labs, Callstack) and Eric Vicenti(CTO, Seed Hypermedia) presented Rise Tools which brings Server-Defined Rendering in React Native 🔥.

Server Defined Rendering (SDR) 🚀

Server-Defined Rendering (SDR) refers to a rendering approach in which your server provides instructions to your client app on how the application should display its user interface (UI). This approach is particularly useful for mobile apps.

Imagine you have an app installed on your phone, such as the React Universe Conference app that is already in production (Play & App Store). The server sends predefined instructions to the client app on how to render specific screens or components. As a result, when you need to add a new screen or update the UI in the production app, you simply update the code on your server. This automatically and immediately updates the client app UI on millions of devices. The client app listens to the server using the WebSocket facility, so users won’t be prompted for an app update anymore.

Rise Tools in action 🔥

Thanks to Mike and Eric for introducing this amazing Server-Defined Rendering concept in React Native by Rise Tools. During the conference, Szymon and Burak captured an incredible video showing how Rise Server can immediately update the production app on hundreds of devices in real time. You no longer need to wait for any production build or even for CodePush anymore 😃!

So, why not give Rise Tools a try today? Let’s jump in here 🚀.

NOTE: We also have explained Rise Tools in detail in one of the previous newsletters “🚀 Server-Defined Rendering for React Native”. You will also find it as a blog post on the notJust.dev/blog later. 💯

That’s it 🙌

There were lots of important announcements during the React Universe Conf 2024. Our goal is to pick what’s important, and help you stay up to date with what’s to come in React Native ecosystem.

So far, we have covered:

✅ The New Architecture as Default in 0.76 🚀

✅ New React Native DevTools 💯

✅ Expo Dom Components with SDK 52 🔥

✅ Tree Shaking in Expo 🤟

✅ Hermes V2 soon 🎯

✅ Server-Defined Rendering in React Native 🚀

🔴 Join me live

This Friday we will build an Amazon Price Tracker. It's going to be a tutorial packed with value, so set a reminder and don't miss it out 👇

🔁 In case you missed it

Building a Google Photos Clone in React Native

We'll build a Google Photos clone using React Native, Supabase and ImageKit, creating a full stack app for both web and mobile. You'll learn how to handle image and video optimization with ImageKit and you'll learn the basics of User Interface design.

Watch now

Building e-Scooter App with React Native and Mapbox

In this tutorial, we will build an e-scooter rental app similar to Lime and Bird using React Native and Mapbox. We'll cover everything from rendering scooters on the map to integrating directions and navigation features.