- If you are new to React Native and want to get started, here is a good resource you will find helpful.
- For Windows users, make sure you have Microsoft Visual C++ 2015 Redistributable installed, you can check if it is installed by searching for “Microsoft Visual C++ 2015 Redistributable” after pressing the Windows key.
designed to improve app performance, focusing on our
React Native apps, even on mass-market devices with
limited memory, slow storage, and reduced computing
- Facebook Team
- Adapting garbage collection to mobile OSes constraints.
- Ditching the JIT (just-in-time) compiler.
Hermes adapting garbage collection aids to reduce the overall virtual memory consumption by implementing on-demand allocation in non-contiguous chunks that can be moved around and returned to the OS when no longer needed, Operating systems aggressively kill applications that use too much memory. When apps are killed, slow restarts are required and background functionality suffers.
The following are the features of the garbage collector :
- On-demand allocation: Allocates VA (virtual address) space in chunks only as needed.
- Noncontiguous: VA (virtual address) space need not be in a single memory range, which avoids resource limits on 32-bit devices.
- Moving: Being able to move objects means the memory can be defragmented and chunks that are no longer needed are returned to the operating system.
- A JIT compiler warm-up when an application starts, they have issues improving TTI and may even hurt TTI more by increasing it.
- A JIT compiler adds to native code size and memory consumption, which negatively affects primary metrics.
- A JIT compiler is likely to hurt the metrics we care about most, so Facebook chose not to implement it. Instead of focusing on interpreter performance as the right trade-off for Hermes.
- Parsing and compilation directly reduce the time spent on any tasks at launch time.
- Since the precompilation phase has more relaxed time constraints, bytecode generated is usually smaller and more efficient, this aids the compiler to apply whole-program optimizations such as function deduplication and string table packing.
- Hermes bytecode can be mapped into memory without requiring to read the whole file in advance, which brings a huge improvement with slow flash memories and reduces the chances of an app being killed by the OS due to excessive memory usage which was an issue before now in React Native.
WebKit is a browser engine used in the Safari web browser and every other iOS browser, it was built by Apple in C++ and runs on macOS, iOS, and Linux.
Fun-Fact: This engine was used by BlackBerry.
Setting up Hermes is seamless and easy.
According to React Native’s awesome documentation, we will first start by editing our android/app/build.gradle file and setting enableHermes to true like so :
If we use ProGuard in our application, we will have to add rules in android/app/proguard-rules.pro like so :
For these changes to take effect we will need to clean build, so in our terminal, we will do like so :
$ cd android && ./gradlew clean
Finally, we are ready to build and test our app and we will do like so :
$ npx react-native run-android
If we created a new app with
$ npx react-native init AppName before setting up Hermes we will see that Hermes is enabled at the top-right corner of our app screen.
But if we had an existing project we can still test by making use of the global HermesInternal variable like so :
To see full benefits why we use Hermes, you can build a release version of your app to compare the differences and see improvements in app startup time and bundle size like so :
$ npx react-native run-android --variant release
In this article we have an understanding of the following things :
- Why we should use Hermes in our projects.
- Difference between Interpretation with React Native conventional engine and Bytecode precompilation with Hermes.
- What Hermes does under the hood.
- Why iOS does not support Hermes because of their guidelines.
I will like to thank Tzvetan Mikov, Will Holen, and the rest of the Hermes team on their work to making Hermes a success.
I hope this was helpful, don’t forget to like and share this article, you can tweet at @Godswillokokon if you have any questions or drop a comment below.