Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Why should we use Hermes?
2.1.
Optimizing for React Native
2.2.
Ditching the JIT (just-in-time) compiler
2.3.
Adapting garbage collector
3.
Enabling Hermes
3.1.
Android
3.2.
iOS
4.
Confirming if Hermes is enabled
5.
Debugging a React Native app in Chrome
6.
Frequently Asked Questions
6.1.
What is Hermes?
6.2.
What are the advantages of using Hermes?
6.3.
Explain how Hermes reduces the app's start-up time.
6.4.
Can Hermes run on iOS?
6.5.
Debugging a react native app on chrome, Is it possible?
7.
Conclusion
Last Updated: Mar 27, 2024

Using Hermes for React Native

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we'll look at Hermes, the advantages of utilizing Hermes as your React Native application's JavaScript engine, and how to enable Hermes in Android and iOS.

Hermes is an open-source JavaScript engine that improves performance by shortening app launch times, lowering memory utilization, and decreasing app sizes. Hermes can improve your app start-up time by precompiling JavaScript into efficient bytecode. Hermes' binary size is also less than other JavaScript engines like JavaScriptCore. It also consumes less memory during execution, which is especially beneficial on lower-end Android devices.

Click on the following link to read further: Hooks in React JS

Why should we use Hermes?

The critical features of Hermes which make it the best JavaScript engine for React Native are:

Optimizing for React Native

Hermes' defining trait is that it conducts compilation work ahead of time, which means that Hermes-enabled React Native apps deliver with precompiled optimized bytecode rather than raw JavaScript source. This reduces the time it takes to have the product up and running for users. According to data from Facebook and community apps, activating Hermes can reduce a product's TTI (Time-To-Interactive) statistic by nearly half.

Ditching the JIT (just-in-time) compiler

One of Hermes' important decisions was not to create a just-in-time (JIT) compiler because it is believed that the additional warm-up costs and increased binary and memory footprints would not be worth it for most React Native projects. For years, Hermes has worked hard to improve interpreter performance and compiler optimizations to compete with competing engines for React Native workloads.

Adapting garbage collector

The garbage collector has the following characteristics:

  • On-demand allocation: Allocates VA (virtual address) space in chunks when needed.
  • Noncontiguous: VA (virtual address) space does not have to be in a single memory region, which helps 32-bit devices avoid resource constraints.
  • Moving objects allows memory to be defragmented and chunks that are no longer required to be returned to the operating system.
  • Generational: Saving time by not scanning the whole JavaScript heap.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Enabling Hermes

Android

Open your newly created project with your preferred code editor to enable Hermes on Android. Make the following modification to your android/app/build.gradle file:

project.ext.react = [
      entryFile: "index.js",
      enableHermes: true 
  ]

Clean the build if you've already built your app at least once:

$ cd android && ./gradlew clean

That's it! You should now be able to continue working on your project and deploying it as usual:

$ npx react-native run-android

iOS

Hermes now runs on iOS thanks to React Native 0.64. Open your newly created project with your preferred code editor to enable Hermes on iOS. Make the following modification to your ios/Podfile file:

use_react_native!(
     :path => config[:reactNativePath],
     # to enable Hermes on iOS, change `false` to `true` and        then install pods
      # By default, Hermes is disabled on Old Architecture, and enabled on New Architecture.
     :hermes_enabled => true
   )

Once you've configured it, run pod install.

$ cd ios && pod install

That's it! You should now be able to continue working on your project and deploying it as usual:

$ npx react-native run-ios

Confirming if Hermes is enabled

If you've recently created a new app from scratch, this is how your app should look:


Hermes is identified as the app's engine in the top-right corner, which implies that Hermes is currently active.

In JavaScript, there will be a HermesInternal global variable that can be used to check if Hermes is running:

const isHermes = () => !!global.HermesInternal;

Debugging a React Native app in Chrome

Hermes implements the Chrome inspector protocol to support the Chrome debugger. This means Chrome's debugging tools can be used to debug JavaScript running on Hermes, on an emulator, or a real, physical device.

Chrome communicates with Metro via the port it is presently listening to; thus, you must know what port Metro is listening to. Metro listens on port 8181 by default, so you can use http://localhost:8081 to view your app in the browser.

Once you know where the Metro server is listening, follow these steps to connect with Chrome:

  1. In a Chrome browser window, go to chrome:/inspect.
  2. To add the Metro server address, click the Configure... button, typically localhost:8081

3. You should now see a "Hermes React Native" target with a "inspect" link to launch the debugger. Ensure the Metro server is up and running if you don't see the "inspect" link.

Frequently Asked Questions

What is Hermes?

Hermes is an open-source JavaScript engine that improves performance by shortening app launch times, lowering memory utilization, and decreasing app sizes. Hermes can improve your app start-up time by precompiling JavaScript into efficient bytecode.

What are the advantages of using Hermes?

Hermes improves your app start-up time by precompiling JavaScript into efficient bytecode. Hermes' binary size is also less than other JavaScript engines like JavaScriptCore. It also consumes less memory during execution, which is especially beneficial on lower-end Android devices.

Explain how Hermes reduces the app's start-up time.

React Native Optimization Hermes' distinguishing characteristic is how it conducts compilation work ahead of time, which means that Hermes-enabled React Native apps arrive with precompiled efficient bytecode rather than plain JavaScript source. This cuts down on time it takes to have your product up and running for users.

Can Hermes run on iOS?

Hermes now runs on iOS thanks to React Native 0.64. By default, Hermes is disabled on Old Architecture and enabled on New Architecture.

Debugging a react native app on chrome, Is it possible?

Hermes implements the Chrome inspector protocol to support the Chrome debugger. This means Chrome's debugging tools can be used to debug JavaScript running on Hermes, on an emulator, or a real, physical device.

Conclusion

This blog looked at Hermes and the advantages of utilizing Hermes as your React Native application's JavaScript engine. Hermes's lightweight JavaScript engine has made performance optimization for mobile apps much easier in React Native. For more details about using Hermes see Hermes and how Hermes is towards being the Default.

If you are preparing yourself for the top tech companies, don't worry. Coding Ninjas has your back. Visit this link for a well-defined and structured material that will help you provide access to knowledge in every domain.

I hope you enjoyed the blog, Happy reading!

Previous article
React Native Profiling
Next article
React Native New Architecture
Live masterclass