A Deeper Dive on How Hermes Works in React Native
As software engineers, it is essential to not only understand the frameworks we are working with but also the underlying mechanisms of those technologies. By getting to know these mechanics, it aids in understanding how our applications will operate and how to fix them as we experience bugs or breaking changes in development. In this article, we will focus on Hermes, the JavaScript engine used in React Native and its advantages. React Native is a JavaScript framework developed by Facebook for building native mobile applications on both iOS and Android devices. It was released in 2015 and has been going through various upgrades since then. The JavaScript engine in this framework is the component that compiles the JavaScript source code to bytecode.
Hermes was introduced in 2019 and has since replaced JavaScriptCore and Chakra (used in RN for windows) as the default javascript engine for React Native starting from version 0.70. Hermes provides a number of benefits to React Native compared to the aforementioned engines such as smaller app size, reduced memory usage and improved start-up times. It achieves these performance advantages by using a compiler ahead of time, this converts the source code into bytecode at build time rather than at run time.
This process is further enhanced with several components of Hermes. The Hermes Intermediate Representation (IR) is used to represent the JavaScript source code, while the Hermes optimizer transforms the IR into a more efficient representation that preserves the original semantics of the program. This more efficient representation is then provided to the Hermes Virtual Machine (VM), which then deserializes the bytecode from the file and interprets it at runtime. Finally, the Hermes VM plays host to the Hades garbage collector (GC), which monitors memory allocation and reclaims any blocks of memory no longer needed. Hades was created to improve the pause times observed with GenGC, and it does so by running its GC work on a separate thread concurrently with the interpreter managing the Javascript code — in comparison, GenGC runs on a single thread shared with the interpreter. This has resulted in pause times up to thirty times shorter on 64 bit devices. By combining the IR, optimizer, HadesGC, and VM, Hermes enables shorter build times, improved startup speed, smaller app size, and decreased memory usage during development of React Native applications.
In conclusion, Hermes is a JavaScript engine that was included in React Native in 2019 and has been implemented as the default engine since version 0.70. Hermes provides a number of advantages such as improved start up time, decreased memory usage, smaller app size, and a reduced build time due to its IR, optimizer, and Hades garbage collector. These elements combine to make Hermes a powerful and efficient tool that software engineers use everyday to effectively build applications for React Native. Knowing these tools that make up the framework come in handy not only for a full understanding of the operation of the framework, but also in development, debugging and issues such as breaking changes in version upgrades of dependencies. As such, finer knowledge of our frameworks are an invaluable resource for software engineers today and their development will continue to make React Native quicker, easier, and more effective to use in upcoming years.
Further Research
Design Overview | Hermes (hermesengine.dev)
Andrews Coates (Microsoft SWE) study from Hackernews. Bytes #109 — what exactly are the differences between JSC and V8?
Andrew study We have done some internal tests of Hermes on a RN experience within Microsoft O… | Hacker News (ycombinator.com)
RN site runtime engine studies Toward Hermes being the Default · React Native
Bytes #109 — what exactly are the differences between JSC and V8?
