Hermes- A New JavaScript Engine for React Native(Android)

Facebook launched a new open-source JavaScript engine named ‘Hermes’ to improve the performance of React Native mobile apps on Android. It is specifically built to fasten the startup of applications using static optimization and compact bytecode. It improves the startup time, app size and memory utilization of the applications.

The Facebook team was continuously working on improving JavaScript codes and platforms to enhance the performance of Facebook Apps. After analyzing the performance data, they noticed that the JavaScript engine itself was a significant factor in startup performance and download size. So, they worked on optimizing JavaScript performance in the more constrained environments and designed ‘Hermes’. The team has not planned yet to expand the project to browsers or servers such as NodeJS.

In a blog, Facebook wrote,

Hermes improves React Native performance by decreasing memory utilization, reducing download size, and decreasing the time it takes for the app to become usable or “time to interactive>

How Does Hermes Improve React Native Performance?

Hermes improves some core attributes of an application that ensure its high-performance, that are-

• Time to Interact (TTI)- It launches the apps faster decreasing the start-up time by bytecode precompilation.
• Download Size (APK File Size)- Being smaller in size, it starts instantly without weighing down the app.
• Reduction in memory utilization
• Ahead-of-time Static Optimization
• No JIT (Just-In-Time) Compiler
• Compressed Bytecode
• Bytecode Precompilation
• Garbage Collector Strategy with noncontagious, defragmented and On-demand Virtual Address (VA) memory allocation features.
• Lazy Compilation
• Targets the ES6 Specification
• JSI, a lightweight API to embed a JavaScript engine to C ++ applications to ease migration to Hermes.

As you can see in the picture, the TTI has been reduced by 2.29 seconds, the APK file size has been decreased by 19 MB and the memory utilization has been lessened by 49 MB. As a result of this decrement, there has been a substantial improvement for the React Native applications.

Byte Precompilation

Usually, a JavaScript engine parses the JS source, once it gets loaded and generates bytecode further. This step delays the script execution. Hermes skips this step and uses an ahead-of-time compiler which runs along with the application build process and optimizes the bytecode and thus makes it smaller and more efficient. With Hermes, the bytecode is designed in such a way that it can be mapped and interpreted without reading the entire file which leads to improving TTI significantly.

Though this bytecode is a bit larger than the compressed JavaScript code, Hermes reduces the overall application size for React Native Apps.

How to Make Hermes Usable in React Native App?

To use Hermes in a React Native App includes three main steps-

1. Make a Hermes npm Package

2. Registering of this npm package with Yarn

3. Linking of Hermes with the React Native App.

Now, let’s discuss how to accomplish all these tasks-

#Make a Hermes npm Package

The Hermes npm package consists of CLI tools, to compile the JavaScript to bytecode, and debugged versions of native Hermes library for Android. However, in order to compile the native libraries for android, you need to set up an appropriate development environment.

• To build a debugged version of Hermes CLI tools, below-given steps should be followed on macOS/Linux-

mkdir hermes_workingdir
cd hermes_workingdir
git clone https://github.com/facebook/hermes.git
hermes/utils/build/build_llvm.py
hermes/utils/build/configure.py
cd build
ninja

• In the case of Windows, the following steps should be adhered to-

mkdir hermes_workingdir
cd hermes_workingdir
git -c core.autocrlf=false clone https://github.com/facebook/hermes.git
hermes/utils/build/build_llvm.py --build-system='Visual Studio 16 2019' --cmake-flags='-A x64' --distribute
hermes/utils/build/configure.py --build-system='Visual Studio 16 2019' --cmake-flags='-A x64 -DLLVM_ENABLE_LTO=OFF' --distribute
cd build

#Register the Package with Yarn

• At the very first step, you need to run the following command to build the cross-compiled LLVM-
  (cd $HERMES_WS_DIR && ./hermes/utils/crosscompile_llvm.sh

• Now, you can build Hermes libraries for Android platforms and package everything together-

(cd $HERMES_WS_DIR/build_release && ninja github-cli-release)
(cd $HERMES_WS_DIR/hermes/android && gradle githubRelease)
cp $HERMES_WS_DIR/build_android/distributions/hermes-runtime-android-v*.tar.gz $HERMES_WS_DIR/hermes/npm
cp $HERMES_WS_DIR/build_release/github/hermes-cli-*-v*.tar.gz $HERMES_WS_DIR/hermes/npm
cd $HERMES_WS_DIR/hermes/npm && yarn install && yarn run prepack-dev)
cd $HERMES_WS_DIR/hermes/npm && yarn link)

The final command of the yarn link will register the Hermes package to Yarn for inclusion to local projects.

#Link the Package with the React Native App
Now, the final step is to link the npm Hermes package with your app. Let’s suppose for instance that your project is in the directory $user_project, you would run the following command-
(cd $user_project/node_modules/react-native && yarn link hermes-engine)
Now, you can develop the app in the normal manner.

Bottom Line

You can download Hermes from Github. The detailed guide of instructions has been provided there as well. Facebook has been quite about using this specific word ‘Hermes’ but you would have heard that Hermes is the god of messenger according to Ancient Greek Mythology. However, you can make your own assumptions.