For a long time Hermes was exclusive to Android – it was optimized for running React Native apps on Android only. Now it’s finally available on iOS as well.
In the last few months, we’ve worked really hard with teams at Facebook and Microsoft to bring Hermes to iOS. It’s part of the latest React Native 0.64 release which we contributed to.
Today we’d like to share with you the steps we took here, at Callstack, to make it all possible. We also have a series of benchmarks ready to better demonstrate Hermes performance compared to JSC in the context of React Native.
In order to outline the journey to Hermes iOS comprehensively, we are going to publish a series of articles:
- Bringing Hermes to iOS in React Native 0.64 (you are here)
- Hermes Performance on iOS: How it Compares with JSC
- Technical Guide, Part 1: Compiling Hermes for Apple Platforms
- Technical Guide, Part 2: Integrating Hermes with React Native
The technical pieces will focus on implementation details, guiding you through the internals of React Native and showing how we brought Hermes to iOS. You will also find out how you can use your own custom engine yourself!
But first things first – let’s start with talking about the beginnings of the Hermes engine.
All modern JS engines are designed and benchmarked to run with maximum efficiency under the browsers’ most popular use case (i.e. providing an interactive website or a web application that users can interact with).
User expectations for mobile and web
There’s also a difference in the way users expect mobile and web applications to work. On mobile, the user tends to be more demanding when it comes to overall app performance. Applications must launch in a blink of an eye and become interactive as quickly as possible. The web, on the other hand, is a different story. The conversion is less likely to drop if a website doesn’t load instantly.
Benefits of Hermes running on Android
Since its launch on Android, the results are remarkable! It not only offers a smooth transition for the majority of users, but also provides significant improvements to startup times together with CPU and memory consumption. For a more detailed description of Hermes on Android, check the Facebook Engineers blog.
Please keep in mind that the numbers shown in the graph are relevant for Android only and as such they do not guarantee the same improvements on iOS. In fact, as we learn in the next section, it is possible that things like an application size can actually increase a bit.
Bringing Hermes to iOS
Now that Android has Hermes support and that’s been getting more and more popular with every React Native release, it would be great to have it on iOS as well. Only when Hermes can be run on both iOS and Android, the React Native team can take advantage of its features and start embracing its full potential.
Since Hermes is an AOT engine, these restrictions do not apply. Theoretically, it is possible to build and ship apps with Hermes provided that the Hermes engine can compile on iOS.
However, choosing a different engine than the built-in one, has the risk of increasing the overall application size as now it has to ship its own engine rather than rely on the one available on iOS by default.
Try Hermes yourself
Hermes is now available under a flag on iOS, starting from React Native 0.64. Read my post on the official React Native blog to find out how to turn it on! I am really excited to see what you end up building on top of it!
In case you are still having doubts about using Hermes with React Native on iOS, worry not – we have run a series of benchmarks comparing Hermes and JSC on iOS together with metrics and videos. Here’s a little secret – it’s faster!
Also, we released a podcast fully dedicated to Hermes: React Native 0.64 with Hermes for iOS. Check it out to learn more about Hermes on iOS and MacOS from Microsoft and Facebook engineers.
A step-by-step guide to Hermes implementation
If you want to learn more about how we brought Hermes support to iOS, check our technical guide to Hermes compilation. We describe the entire process of compiling Hermes to work on Apple platforms, which ends up with a fully functional demo application.
Bonus point: you may use our guide as a reference when trying out your own custom engine with React Native, just in case you’re working on something tailor-made.
Looking to improve your React Native app performance? Download our Ultimate Guide to React Native Optimization. It describes best practices for optimizing app stability, resource usage, user experience or maintenance costs.