Hermes and React Native: How do they complement each other?

Hermes was an essential character in Greek mythology. He was a son of Zeus, who was noted for his work as a guide and messenger. Moreover, he was recognized as a symbol of prosperity among merchants.

That’s why Facebook coined that name to launch an engine that can revolutionize the way developers generate mobile applications. Especially for those who believe that adding more features can generate performance problems.

Hermes didn’t! He could handle several tasks at the same time and always guaranteed results. Now, in mobile applications, the most successful ones incorporate different functionalities that are useful for users. Nevertheless, you always need to ensure optimal performance. 

However, larger apps, which use JavaScript frameworks, tend to have functionality issues as these features are added. Paradoxically, users not only want you to add these new features, but they also want them to work well, regardless of the device they access!

A clear example of a lousy development was the Twitter Fleets. Many users complained that these “stories” took a long time to load on their devices. Even the swiping mechanism was clunky. There was no good user experience work!

Performance and innovation are two concepts that should go hand in hand. If you create an app with many features, but they can’t be used, your efforts are useless. That’s why your code development team can benefit from Hermes, a new JavaScript engine especially useful in React. 

What is Hermes, and what is it for?

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 from which they 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 to be used in the React Native framework. This means that it is helpful for creating JavaScript applications on mobile operating systems. 

Hermes: how does it influence React?

Hermes differs from other JavaScript code engines that translate bytes just in time. This is mainly because the Greek god’s engine works with code that is already compiled when the package is created. Therefore, Hermes uses its bytecode, which is compact. This optimization happens on the developer’s computer, whether on Linux, Mac OS, or Windows devices. 

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 that elapses from when the web starts loading until the remaining 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 decrease the weight of the APK file in case it is an Android app. This way, the app can be downloaded on older devices, which do not have too 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 to work in mobile applications, but they did not create it for browsers or server infrastructures. 

How does Hermes help the developer’s work?

The idea is that developers will also have a much more efficient job using Hermes applied to 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 having a bytecode compiled in a deferred way. The idea is that the developer works in a faster, more comfortable, and structured way. Maybe that’s why the name of this engine was chosen since Hermes was a swift god. 

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

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. 

Thus, the Hermes project has:

• 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.