blogs

Revolutionizing React Native: Impact of Hermes Engine Explained

Revolutionizing React Native: Impact of Hermes Engine Explained

In the realm of mobile app development, React Native has been a game-changer, offering a cross-platform solution for building native-like applications. However, its performance, particularly in comparison to Swift or Kotlin-powered apps, has long been a challenge. 

The introduction of Hermes, a JavaScript engine optimized for React Native, has reshaped the landscape by addressing critical issues and significantly enhancing performance. In this newsletter, we delve into the evolution of React Native, the design decisions behind Hermes, and the long-term impact it could have on React Native development.

Understanding JavaScriptCore (JSC):

To appreciate Hermes, it’s crucial to recognize the shortcomings of its predecessor, JavaScriptCore (JSC). A case in point is Meta’s experience with the Facebook Marketplace app, built entirely with React Native. The app faced challenges like slow loading times and lag due to inefficient garbage collection, impacting user experience. JSC’s runtime compilation added to the issues, prompting the need for a more efficient solution.

Eliminating the Inherent Challenges of React Native:

Hermes addresses the mismatch between React Native’s native design and JSC’s generic engine by introducing an ahead-of-time (AOT) compilation strategy. Unlike JSC, which compiled at runtime (JIT compilation), Hermes performs the heavy lifting at build time, significantly improving application performance.

Understanding the New Hermes Flow:

Hermes restructures the JavaScript pipeline, emphasizing a shift from runtime to build time. The compilation process involves transpilation, minification, parsing, bytecode generation, and execution. By moving these processes to build time, Hermes optimizes performance and minimizes runtime delays.

  1. Transpilation: JavaScript source must be transpiled into a standardized syntax (such as ECMAScript 2015). Because JavaScript has various experimental features with some syntactical differences, transpilation transforms any arbitrary specification into the target specification. Often developers will use new JavaScript features and then transpile code to an older specification, using products like Babel.
  2. Minification: Minification shrinks the JavaScript bundle by renaming variables into shorthand names of single or double letters. This dramatically condenses the bundle size by removing any excess code.
  3. Parsing: Now the JavaScript engine kicks in. It must parse the functions from the JavaScript bundle. Parsing involves several sub-steps, such as (i) finding the function calls, (ii) locating the function definitions, and (iii) optimizing the function structure.
  4. Bytecode: Then the JavaScript engine must compile the JavaScript into bytecode, an intermediary representation that looks like assembly. Bytecode is a semi-readable format by humans that gets compiled into binary instructions for the physical or virtual hardware to run.
  5. Execution: Finally, the JavaScript engine executes that bytecode. The remaining work is handled by the operating system and hardware.

How Hermes Accomplishes AOT Compilation:

Hermes achieves AOT compilation through a multi-step process, compiling transpiled JavaScript into Static Single Assignment Intermediate Representation (SSA IR) and further optimizing it into device-specific bytecode. This meticulous approach results in smaller bundle sizes on Android devices, contributing to improved performance.

The Hermes Garbage Collector, Hades:

Hermes introduces a new garbage collector, Hades, which overhauls the original GenGC used by JSC. Hades runs concurrently with the main interpreter thread, avoiding the “stop the world” effect. Although it frees up memory more slowly, its accuracy and reduced impact on user experience make it a substantial improvement.

How Successful is Hermes?:

Benchmarks from Meta showcase impressive results, with significant decreases in Time To Interact (TTI), build size, and memory utilization on both Android and iOS. Hermes has gained widespread adoption, including frameworks like Expo, and compatibility with popular state management libraries like MobX and Immer.

Does Hermes Have Any Limitations?:

While Hermes initially had limitations, updates have addressed many concerns. Features like async/await, BigInt, WeakRef, Proxy, and Reflect have been added or improved. Although some elements remain unsupported, they often have minimal impact on React Native development.

Hermes represents a pivotal moment for React Native, marking a commitment to prioritize native advantages over JavaScript’s browser-centric semantics. The engine’s success in significantly improving performance metrics positions React Native as a formidable contender for building complex applications. As the React Native community embraces Hermes, the future holds exciting possibilities for high-performance, cross-platform mobile development.