The State of Mobile Development
In our previous article, we discussed the state of mobile development. JetBrains survey proved the growth of React-Native and Kotlin against its competitors. We learned that most of the mobile developers prefer to use native tools to build their mobile apps, as the performance of native apps is greater. Likewise, React-Native is the most used cross-platform technology for mobile development.
We ended our article explaining how wonderful the combination of React and Kotlin can be. In particular, one of our speakers explained the advantages of combining React-Native and Kotlin and the possible ways to integrate them.
In this new article, we come up with more great news for mobile developers, in particular, for React-Native developers.
Facebook’s announcement of open-sourcing Hermes
We were so happy when Facebook announced a few days ago that they had open-sourced their JavaScript engine for React-Native, Hermes. The news was presented by Facebook software engineer Marc Horowitz during their Chain React Conference, held on July 12, 2019, in Portland, Oregon.
During the announcement, Marc explained why they needed Hermes in the first place, how developers can use it in their apps, how it improves the apps built with React-Native and, of course, its features.
Most likely, you are dying to try it out yourselves. Luckily Hermes is open-source and is available on Github under MIT license. Check out their Twitter account and their homepage too for more details and new updates. In this article, we‘ll try to briefly describe the key points of his speech.
Compatibility starts with React Native
Hermes has everything to do with React-Native. Obviously, that’s why Facebook announced its availability and made it in public, at the React-Native conference. It’s very important to know that Hermes works only with apps built using React-Native. So, what does exactly Hermes adds to React-Native?
We have all appreciated the success of React-Native in Mobile app development. But it doesn’t mean it is always welcomed by developers, and the reason is that there are some downsides to it. A classic example is that we must still use native code for specific functionalities such as integrating cameras in mobile and sensors. On top of that, it requires to create bridges between native code and React-Native code.
Consider that this issue alone has kept many tech giants away from using React-Native for their apps so far.
Facebook created Hermes to address this problem – and many others. By open-sourcing Hermes, Facebook is trying to encourage us to use it in their apps, of course. And the response so far has been quite positive and Hermes is likely to become a new trending topics very soon.
Considering the relevance of the social network, who wouldn’t want to follow suite?
So how do you integrate Hermes with React-Native? Hermes was released as an opt-in feature for React-Native. To integrate Hermes with React-Native, you have to use Version 0.60.2, which is the latest version at this very moment. You can enable Hermes for your app by adding just one line. All you have to do is edit the build.gradle file to enable the use of Hermes: enableHermes: true
What is Hermes and what are its features?
our bet is that, by now, you’ll want to know more about Hermes, just like us. We have delved into it and realized that the best way to understand what it offers is by starting from the beginning and see why Hermes was developed by Facebook.
As previously explained, React-Native did have a few issues. When mobile apps get larger, for instance, they start to suffer due to limited memory and processing power. This forced big tech firms such as Facebook, Uber and Spotify to build lite versions of their apps.
This led Facebook to realize how valuable an Optimized JavaScript engine really was to reduce download sizes and speed up startup time when apps are launched. In particular, Facebook has had to address performance trade-offs that introduced more complications for JavaScript-dependent apps. That is why they amplified a new engine to reduce Time to Interaction (TTI), which is an important metric when it comes to social apps.
Looking at the internal implementation of Hermes, it uses Bytecode Precompilation which is a more efficient method than loading JavaScript and then parsing it. Basically, it further optimizes bytecode through Ahead-of-Time compilation.
Another issue that Hermes tries to solve is the memory issues for mobile apps. Usually, mobile phones have limited memory. As a result, operating systems running on mobile phones aggressively kill applications that use too much memory. To fix this issue, Hermes introduced a garbage collector strategy that uses virtual address space with certain features such as on-demand allocation, non-contagious, generational.
Let’s summarize all of Hermes’ features:
- Build an app with small APK size
- Fast start-up due to leveraging compact bytecode
- Reduce memory usage as virtual memory is allocated in chunks as needed
- More complex optimizations thanks to ahead-of-time compilation.
But there’s more you should know: Hermes’ JavaScript engine is similar to Chromes V8! It is such a shame though, that Facebook made it immediately clear that they had no intention to take Hermes beyond mobile apps, at least for the time being. So, no Hermes integration with web browsers or server infrastructure such as Node.js.
Working on React Native? Someone did it!
Regardless of that, Hermes will increase the use of React-Native in Mobile development even more in the near future. We are sure of that. And along with Hermes, React-Native will be an unstoppable force!
If you want to know more about React-Native whether you are a beginner or an expert, we strongly recommend you to keep following us as some of our main speakers will be delving into the subject more and more often.
