JavaScript Engines and Hermes

React Native runs on JavaScript and, as mentioned in Chapter 2, Understanding the Essentials of JavaScript and TypeScript, JavaScript needs a JavaScript engine to interpret and/or transform the code into executable machine code. There is no exception to this for React Native.

While there are quite a lot of different JS engines out there, only a few are used in React Native projects. This is due to the quite complex process to change the JS engine as well as the new Hermes engine, which is an engine developed for React Native and is going to be the default soon. Nevertheless, it is important and helpful to understand the different possible engines with their strengths and weaknesses.

In this theoretical chapter, we will cover the following topics:

• Understanding JavaScript engines
• Getting to know the Hermes engine
• Comparing key metrics

Technical requirements

Since this is a theoretical chapter, you don’t need to have anything set up.

Understanding JavaScript engines

As mentioned in the introduction to this chapter, a JavaScript engine is responsible for interpreting JavaScript and/or transforming it into machine code, so that the device can execute it.

The first JavaScript engines were simple interpreters that simply processed the statements and ensured the execution. The code was just executed like it was written. This has changed a lot.

Modern JS engines provide a lot of optimization features. The most discussed is just-in-time (JIT) compilation, which is implemented by all modern JS engines.

Compiled languages such as C are compiled before the execution of the code. In this compile step, the transformation to machine language is done as well as a lot of optimization steps. This creates an output that is extremely performant.

Just-in-time compilation means that the code is compiled while it runs. This means the just-in-time compiler does not know all the code while it compiles. This makes code optimization...

Getting to know the Hermes engine

Hermes was brought to the React Native community at the React Native EU conference in 2019. Back then, it was already in production in Facebook’s apps for more than a year. It is completely built with mobile in mind, which changes the architectural approach completely. The following figure shows how a modern JS engine works.

Figure 8.1 – Modern JS engine pipeline (inspired by Tsvetan Mikov)

When creating and building JavaScript code, usually there is some transcompiling done to backward-compatible JS code and some JS code minification. This minified JS bundle is then sent to a device and gets executed. JS engines such as JavaScriptCore or V8 try to optimize the execution using just-in-time compilation, which, as described before, is a quite complex process and may store and optimize the wrong code statements. Hermes changes the way this is done completely.

The following figure shows how optimization and compilation...

Comparing key metrics

When it comes to mobile apps, there are a few metrics you should have a look at when optimizing your application.

Understanding important metrics

The most important key metrics on mobile are the following:

• Time to interaction (TTI): This is the time between the user clicking on your app icon and when the user can use your app. It is important to reduce the TTI as much as possible because mobile app users are very impatient. The longer the TTI is, the more users will leave your app without even using it.
• Application size: This is the size the user has to download from the store to install your application. The larger the application size is, the more users won’t download your app. This can have many reasons such as high transfer costs in some countries or disk space left on the user’s device. The fact is, the smaller your app is, the more users will download it.
• Memory utilization: This metric describes how much memory your...

Summary

In this chapter, we had a look at JavaScript engines in general, learned about the special requirements React Native has for a JavaScript engine, the different engines we can use in React Native, and how to change the JS engine of our React Native project. We then had a look at Hermes, a JavaScript engine developed with mobile in general and React Native especially in mind.

After understanding the approach of Hermes and its benefits, we compared mobile app key metrics on apps running on JavaScriptCore, V8, and Hermes. While there is no big difference in using JSC or V8, Hermes brings a huge boost in terms of TTI and memory utilization to React Native.

After mastering JavaScript engines, we’ll have a look at useful tools when working with React Native in the next chapter.