React native applications are now turbocharged with hermes engine: find out how?

Meta (previously Facebook) has decided to make all React Native applications faster, and turbocharged with Hermes Engine, the new default JavaScript engine.

In this blog, we will share how React Native apps will become faster, and leaner, with Hermes Engine, and how mobile app developers specializing in React Native platform can leverage this powerful Javascript engine.

But before that, let’s find out more about Hermes Engine and the new updates in React Native 0.70 version.

What is hermes engine?

As the size and capabilities of mobile apps became complex, bigger, and more demanding, the performance of JavaScript frameworks started to deteriorate.

This prompted Facebook to develop Hermes Engine in 2019, which is an open-source JavaScript Engine, optimized for mobile apps.

For Facebook-centric apps, created using React Native, Facebook created Hermes Engine to make the apps faster, leaner, and performance-centric.

Hermes engine becomes default for all react native apps

Starting September 2022, Facebook has decided to make Hermes Engine the default JavaScript Engine. This new development has taken place with the launch of React Native 0.70.0 version.

Along with Hermes Engine, React Native 0.70.0 version also included several critical updates such as:

• New unified configuration for Codegen
• Full CMake support for Android
• Revamped documentation for New Architecture
• Android Auto-linking for New Architecture libraries
• And more

How does hermes engine make react native apps faster?

Traditionally, JavaScript Engines parse all JavaScript Codes using JIT or Just In Time compilation system. Now, this ensured quality and assurance of the application, but it slowed down the system because, with JIT, the application must wait for the entire compilation to complete, before firing the screens and functionalities.

With Hermes Engine, this changes, because it uses ahead-of-time compilation (AOT).

With the AOT concept, the heavy-duty JavaScript Engine tasks are carried out in the background, thereby not impacting the overall performance and usability of the application.

Hermes engine impacts these three factors

With Hermes Engine, Facebook has directly impacted three critical aspects related to mobile app performance:

Time to interactive or TTI

TTI or Time To Interactive is the time needed for any app to run user functionalities (typing etc) and interface by loading and supporting the backend processes and screens.

(TTI Video)

Since Hermes Engine doesn’t run a JIT Compiler, the overall TTI of React Native mobile applications is faster and swifter.

Binary size

While the Android ecosystem uses APK file format for bundling the mobile app files, Apple uses a format called IPA.

Hermes Engine can significantly reduce the overall application size since Hermes’s native code size is smaller, and it makes the application turbocharged for performance and download.

Memory size

Hermes Engine deployed a highly advanced process called the Garbage Collector system, which regulates the memory usage of the application. Due to this, the React Native mobile application for both Android and Apple platforms used only those memory chunks, which are actually needed for the smooth running of the app.

Thanks to Hermes System, the React Native applications now consume less memory, thereby giving a stellar user experience even with low-capacity smartphones.

(Android Benchmarking Data on a Samsung Galaxy S20)

(iOS Benchmarking Data on iPhone 12 Pro)

Garbage collector system explained

To understand why Hermes Engine can drastically improve memory usage, and make the React Native applications faster, we will need to understand the top features of the Garbage Collector System:

• On-demand Allocation of Memory: With Garbage Collector System, the mobile apps built on React Native only utilize memory that is needed, in run-time. Hence, low-configuration smartphones can also give a powerful user experience.
• Noncontiguous: With Hermes Engine, the Virtual Address space need not be in a single-memory range, which makes even 32-bit devices capable of running React Native applications super fast, and seamlessly.
• Movement: The ability to move objects in run-time translates to memory being defragmented, and this helps in memory management by returning the bigger chunks of memories back to the operating system in run-time.

How to update older react native apps with hermes system?

All mobile applications created with React Native 0.70.0 version will automatically have Hermes Engine as default. However, for older React Native versions (starting from version 0.60.4 for Android builds and version 0.64.0 for iOS), Hermes Engine was shipped, but it’s not the default engine.

A little bit of customizations and coding is required in such older versions of React Native apps to ensure that Hermes Engine is used and that there is no ‘​​dependency mismatch’.

For Android app, we need to edit the android/app/build.gradle file:

And for iOS apps, we need to edit ios/Podfile file:

For iOS apps, we need to install Hermes pods, after editing the settings, and then run this command:

Ongoing work related to hermes engine

As officially announced by Meta, their developers are right now working on these developments, related to Hermes Engine in React Native platform:

• Developers can now run sampling profiler directly from Chrome devtools UI, which will save their time and resources, and give instant outputs
• Suport for “BigInt” will be rolled out soon, as it was demanded by the developers, who were not able to use Hermes Engine, because it cannot be polyfilled.
• Support for “WeakRef”, which is also a long-standing demand by developers. With the support for WeakRef, developers can leverage new memory management controls via Hermes Engine, to make the application faster, and seamless.

If you wish to develop and launch React Native mobile applications, which can fully leverage the power of Hermes Engine, and provide a seamless and delightful user experience, then look no further!

Our experienced and seasoned team of React Native Engineers at TechAhead can understand your inherent requirements, and suggest the best possible solution which will ensure that your mobile application is powerful, fast, robust, and scalable.

Connect with our mobile app engineers and take the first step towards launching React Native mobile apps, that delight your users.