This is the story of why we chose React Native and how we overcame the technical challenges we encountered along the road.
BrainAcademy build with React Native running on our existing native app.
Since its initial release, React Native has come a long way. It is being used not only in Facebook and Instagram, but also in a wide range of other businesses, from Fortune 500 corporations to hot new startups.
We began investigating the use of React Native in early 2022 to allow product teams to release features faster through code sharing and faster iteration speeds, using techniques like Live Reload and Hot Reloading that remove compile-install cycles. As a result, the product engineering team is now able to deploy the same functionality on iOS and Android with a single codebase, and perhaps in the future, we will be able to ship the same React Native codebase to the web. So with React Native the App feature will be written only once.
Ruangguru universal frontend. A teaser for our single codebase multiplatform solution.
The feature created with React Native will be injected into the app at the same time working side by side with the existing native code. The cross-platform feature is developed and maintained by a single team. So there’s no longer a large panel of native engineer experts involved.
When you integrate React Native into an existing native project, you may experience obstacles and additional effort that you do not encounter when you start from scratch. With this in mind, we chose to begin investigating these challenges by porting the most appropriate part of Ruangguru apps: the Brain Academy module.
Slow Communications Between Native and React Native
If you look at the React Native layout, you’ll notice that it uses a Bridge to connect with native modules, which often results in a queue because these two sides are unaware of each other. Such a process may result in performance constraints that have a detrimental impact on the user experience.
Start Up Performance
Android Bundle Size
The first issue was adding React Native as a dependency into an existing App would significant impact the binary size. But this would not only increase the binary size, but would also have a significant impact on the number of methods count. We ended up pulling in only the React Native pieces we required at the time and building our own implementations for those that relied on libraries we didn’t want to use.
However, this solution still adds megabytes to the app binary size. As a result, we will include the React Native module with the Dynamic Features Module. Because we made React Native an on-demand module, users will only need to download the React Native module when they need to use the feature. This significantly reduces the app install size.
Utilizing The New React Native Architecture
This section will discuss how Ruangguru uses JSI, a component of the new React Native architecture, to make navigation events, sharing data, and resource synchronization considerably faster than before.
The Old Architecture
The New Architecture
Next Generation Native Module That Ruangguru Uses.
All Native Module that Ruangguru uses is using JSI the backbone of React Native’s new architecture.
Initializing a JSI module.
React Native enabled product teams to release features to both our iOS and Android apps more quickly.
React Native cold startup on Android.
After enabling Hermes and preloading on react native bundle, we can achieve desirable startup time when switching pages from Native to React Native. Users should not be able to distinguish the loading time between a Native and React Native screen.
BrainAcademy Navigation example.
Navigation between React Native to Native screen and vice versa is rapid and should not be noticeable to the users. As shown in the demo above, the navigation from BrainAcademy live teaching list (react-native) to the live teaching front page (native) is as fast as usual native navigation.
In the example above we demonstrated the capabilities of Ruangguru React Native navigation.
BrainAcademy Home (RN) -> Live Teaching Front Page (Native) -> Cek Ombak (RN).
Dynamic Feature Module (Android)
Dynamic Feature Module for BrainAcademy React Native.
Because BrainAcademy React Native is an on-demand module, users will only need to download it when they need to use the feature. With DFM enabled, we drastically minimize the cost of React Native on android.
Every decision always involves trade-offs, and we recognize that there are no silver bullets when selecting a technology, but we believe the benefits exceed the drawbacks. We are very optimistic about Ruangguru’s future with React Native.
We think that by implementing React Native, we will be on the most efficient and effective route to developing the Ruangguru family of apps that satisfy the demands of our customers.
Please visit our careers page if this blog article piqued your interest in what we’re doing.