Hermes and React Native:

Hermes is an open-source JavaScript engine that was introduced in 2019. At a Chain React convention in Portland (Oregon), Marc Horowitz, software engineer, revealed the features of this engine. The idea is that it will serve, precisely, to improve the efficiency of large applications.

Regardless of the device they use to access, the idea is that users can experience good performance. In this way, if this audience has a low-end smartphone, they can still access the new features of mobile applications. Therefore, it ensures accessibility for all users.

This development comes from Facebook and is designed for use with the React Native framework. This means that it is helpful for creating JavaScript applications on mobile operating systems. 

Hermes differs from other JavaScript code engines that translate bytes on the fly. This is mainly because the Greek god’s engine works with code that is already compiled when the package is created. Therefore, Hermes uses compact bytecode. This optimization occurs on the developer’s computer, whether on Linux, macOS, or Windows. 

The idea is that Hermes can refine the user experience on performance in React Native. Mainly, this engine works on a few metrics. The two main ones are:

• Time of interaction (TTI). This resource measures the time from when the web starts loading until all secondary resources finish loading. That is until the application can respond entirely and in good condition to the user’s needs.
  
• Download size. Hermes works on a compact code. This makes it easy to reduce the APK file’s size if it is an Android app. This way, the app can be downloaded on older devices that do not have much storage space. 

It’s important to mention that Hermes was created with a mobile focus. This allows React Native apps to be constantly optimized. Therefore, it is intended for mobile applications, but they did not create it for browsers or server infrastructure. 

The idea is that developers will also have a much more efficient job when using Hermes with React. The first thing to note is that they will have to make changes to the build.gradle. That is, it’s useful to compile the application, something that can be done with this information:

project.ext.react = [

  entryFile: "index.js",

  enableHermes: true

]

The benefits of working with it are obvious. The first thing that stands out is the speed of iteration, which allows bytecode to be compiled in a deferred manner. The idea is that the developer works more quickly, more comfortably, and in a more structured way. Maybe that’s why the name of this engine was chosen since Hermes was a swift god. 

With this AOT (ahead-of-time) compiler, the whole package is compiled to bytecode in advance. This is a substantial difference compared to engines that use JIT (just-in-time) systems. Therefore, Hermes focuses on CPU metrics, enabling more reliable work. 

Performance optimization in React Native doesn’t stop at improving load times or reducing bundle size. In many real-world scenarios, apps also need to handle processes outside the UI lifecycle, such as background tasks. If you’re looking to extend your app’s capabilities even further, this guide on running background tasks with Headless JavaScript in React Native explores how to manage these processes efficiently without impacting user experience.

On the other hand, we must also highlight the enormous debugging work present in this engine. Facebook has incorporated support for remote debugging of Chrome through the DevTools protocol. In addition, developers can connect remotely to the Hermes engine running on their device, debugging applications natively. 

• A command-line JavaScript debugger.
• A Hermes bytecode disassembler, known as hbcdump.
• A Hermes compiler that compiles JavaScrpt into Hermes bytecode, known as Hermesc. 
• A virtual machine running Hermes bytecode, but without compiler functions, known as hvm. 
• A valuable program to enter and execute JS code interactively, named Hermes-repl. 

The importance of using Hermes in React Native

Hermes is currently available on Github, and all developers can use it for their projects.

Just as it happened to the god of Olympus, you must be able to adapt to all requests and demands to be recognized. You must always guarantee results because your reputation depends on them.

Now you know what Hermes is for in React Native. If you want to know more about similar topics, we invite you to read content from our blog.