Scroll to top
© 2020, DigitalOnUs

Speeding up your React Native App with Hermes


DigitalOnUs - October 19, 2020 - 0 comments

We were so excited when the React team decided to release a platform to develop native apps using React.JS for the UI. People started to migrate apps from other cross-platform tools and the results were amazing. Users did not even notice that they had a non-native app in their pockets.

The use of React Native has grown during the past few years. Today, it is the most used framework for cross-platform development. However, this comes with a lot of problems during the production of huge apps. Bigger bundle size, excessive usage of phone memory, and increase in interaction time results in bad user experience. To solve this, Facebook engineers developed a lightweight solution to fix these problems. 

Hermes is a helper created by Facebook engineers that works specially for Android. The objective of this engine is to increase the startup time of an app developed with React Native and some other memory troubles that you’ll see below. It is challenging to improve the startup time without code splitting in React Native since it works differently than React Web. Although, there are some community approaches, it is not a solid way to reach it up, and more problems could come if we try it.

Let’s see how the build worked before Hermes.

In the picture above, you can see the regular cycle of an app created with React Native. We have 2 processes in order to run an app; build time and run time

At the build time stage, Babel does the trick and turns the JSX code into plain Javascript. After this, is the minification process or the code compression stage, where the app is installed in the physical or virtual device.

Furthermore we have the run time stage, which happens after the app is installed on the devices. Here the code is parsed, compiled and executed. As you can see, we have a lot of steps in the run time stage, which increases the startup time of apps. This is where an engine like Hermes can modify the process.

Now let’s see how the pre-compilation works with Hermes:

Hermes splits up the phases and reduces the startup time and the hard work is moved to the build time, and this enhancement reduces the startup time of an app. Additionally, Hermes takes memory usage into consideration. To avoid the app from unexpectedly quitting on the phone, it acts as a garbage collector to remove the chunks of memory that are not used anymore. These chunks of memory are given back to the operating system. This, essentially, prevents memory-related bugs on low-end devices and streamlines the process. 

How to enable it

To start with, you need to have your project on version 0.60.4 of React Native. After that, it is really simple to enable Hermes.

Just go to:

android/app/build.gradle

and set the enable Hermes flag to true.

Now we need to clean our project and run it again

$cd android && ./gradlew clean
$npx react-native run-android

Advantages of using Hermes in your project

Hermes can be enabled by default. Let us look at how the metrics change after Hermes is enabled:

Time To Interaction (TTI) 

This is the metric that helps us know how much time it takes our app to respond, i.e the time that the app takes to respond after pressing or requesting something on screen. After enabling Hermes it becomes 50% faster.

Application Size 

While using React Native, the size of our setup files are relatively large. This discourages users from downloading the app. With Hermes, the setup files reduce by at least 46% of the bundle size.

Memory

Lack of sufficient memory is always a challenge on low-end devices. However, with Hermes enabled, it showed a 26% reduction in the usage of device memory. That’s a significant enhancement, especially considering the fact any percentage of improvement is a great achievement on low-end devices.

You can also help in improving Hermes

Since Hermes is an open source source engine, we can help improve it. Feel free to open a Pull Request if you have any enhancement or contribution.

https://github.com/facebook/hermes/blob/master/CONTRIBUTING.md

By – Juan Ortiz, Senior Frontend Developer, DigitalOnUs

Related posts