On September 16th, 2020, we spoke with Facebook React Native and Oculus team members about the Hermes JavaScript engine. Hermes is an alternative for JavaScriptCore on Android. The design of the Hermes engine produces applications with a smaller disk footprint and less memory consumption. The use of Hermes is optional. You can switch your React Native Android application to the Hermes engine by updating a line in the Gradle configuration.
Improvements with Hermes – Metrics
Neil Dhar walked us through an example application loading on both the default JavaScript engine and Hermes. The Hermes application was noticeably faster on startup. Additionally, Neil shared that compared with stock React Native, Hermes delivers the following improvements:
Time to Interaction:
- Stock React Native: 4.30s
- Hermes React Native: 2.01s
APK Application Size
- Stock React Native: 41mb
- Hermes React Native: 22mb
Memory Utilization
- Stock React Native: 185mb
- Hermes React Native: 136mb
Will Hermes be the Default Engine in React Native?
At 6:26, TJ asked if there was a plan to make Hermes the default JavaScript engine in React Native. Ram said there were still a few features used by community resources that hadn’t yet made it into Hermes. Thus, switching over to Hermes would affect backward compatibility. The React Native team decided to leave JavaScriptCore as the default engine and let application developers choose if and when to switch to Hermes. Hermes may become the default engine for React Native at some point.
How do I know if I can switch to Hermes?
I asked Ram to elaborate on how to know if Hermes would work for a particular application. He said the items that were not Hermes compatible would result in hard errors. Thus, an application developer can swap the engines in their Gradle file, then run through the tests, and if all passes, congratulations, your app is Hermes qualified.
Can I use Hermes on the server?
TJ asked if Hermes could be used in non-mobile contexts. Neil shared that Hermes is optimized to be fast in resource-constrained contexts like mobile. If you used Hermes in a resource-rich context, like found in a modern server, Hermes would be a less optimal choice due to the architectural tradeoffs. It would not hurt my feelings if the Chrome Browser team adopted Hermes, just for the memory footprint improvements alone. It does get annoying having 2GB consumed by Chrome on a typical day.
Hermes architecture vs. other JS Engines
At 10:41, we delved into Hermes architecture and how the team achieved the stated performance gains. JavaScript engines follow a similar set of steps when executing JavaScript code. Many of the actions happen at the run-time stage.
React Native apps go through a defined build process. The power and resources available on a typical build machine are an order of magnitude greater than the resources available on a mobile device. Hermes moves many steps into build-time, freeing up run-time processing for other actions.
We went into a more in-depth discussion of some of these steps and how they relate to application performance. Make sure to listen to this section if you are interested in Hermes architecture and what it means for live apps.
MLH Fellowship Program participants build profiling tool.
Due to complications from COVID, most university internships this year have been canceled. The Major League Hacking group worked with Facebook and Github to match participants with open-source projects. Jessie Nguyen and Saphal Patro participated in the React Native open-source project through the Major League Hacking Fellowship program. Together, they worked on the profiling integration for Hermes and React Native. At 19:59, we discuss the MLH Program and also the work performed by Jessie and Saphal on the profiler. Their work is already in the main React Native CLI repository. It must be quite a sense of accomplishment for Jessie and Saphal to have contributed directly and visibly to one of the most popular mobile open-source projects.
Software developers can analyze their application source code’s performance at run-time by using the profiler built by Jessie and Saphal. The profiler runs inside of Chrome DevTools, a familiar place for all things debugging/profiling. The tool graphically shows the run-time behavior of discrete functions, so software developers can analyze the performance and diagnose trouble spots.
Does Hermes work better with different code styles?
Christian Pillsbury from the Digital Primates team asked if Hermes was optimized to work better with certain styles of JavaScript coding. Neil discussed that Hermes’ would likely do better with idiomatic JavaScript. Ram shared Hermes’ goal to work with any JavaScript styles, not to prefer any particular way or style. Given there are so many ways to write JavaScript, we can agree this is a lofty goal but worthwhile.
Who else uses Hermes?
At 45:42, we started a discussion about who else would be using the Hermes engine. There are no shortages of resource-constrained environments that need a JavaScript engine. Set-top boxes, smart TVs, Game consoles, and automotive environments come to mind as needing modern capabilities with fixed resources and limited hardware upgradeability.
Ram mentioned without much follow-up detail that Oculus uses Hermes. Another user is the React Native for Desktop project by Microsoft. Hermes’ architecture choices of moving steps into the build process unlock many technical possibilities that wouldn’t be great fits for standard JavaScript engines.
Important Links
- Recording of Interview
- Hermes Engine Website
- Hermes GitHub
- Hermes Engine Twitter
- Hermes Profile Transformer
- Major League Hacking
- Ram – Twitter
- Jessie Nguyen – Twitter
- Saphal Patro – Twitter
