React Native at Traveloka : An Introduction
Why we decided to use React Native alongside with native iOS/Android, and how we did it
Since October 2016, we did a comprehensive research about the possibilities of adopting React Native. At that time, Traveloka already had iOS and Android apps for approximately 2 years. After working on several proof of concepts, we decided to adopt React Native alongside with our current native iOS/Android development pipeline.
Why React Native?
Even though there are a lot of good reasons, there are three main reasons why:
Code Reusability
One of the key selling points of React Native is one codebase targeted for iOS and Android. We even invest significant amount of efforts on utilizing React Native Web, so one codebase can be reused for 3 platforms (iOS, Android, and Mobile Web). Without this approach, 3 engineers need to create the same business logic in 3 different languages, with extra efforts to ensure that each codebase exhibits the same expected behaviour! This can potentially reduce redundant works in our daily development and ensure consistency across 3 platforms. The way our internal system works even allows us to reuse the same codebase between multiple apps!
However, keep in mind that code reusability does not always translate into faster feature development, but simply supports more than one platform using the same codebase. Moreover, each platform has its own coding standards and design guidelines. To accommodate these differences, we have to spend some time in order to find a consensus.
Fast Iteration
React Native supports Hot Reloading, which is essentially a feature to directly view changes as you save a file. This enables faster iteration and a better developer experience, extremely convenient for UI Development. Compared to native iOS/Android development which requires you to rebuild the app for few minutes at every change, React Native enables you to view changes in seconds.
In this series, we have one article dedicated to demonstrate how React Native can boost agility in product development.
Collaboration Between Web Engineers and Mobile Engineers
Since React Native is based on React and JavaScript, web engineers can help to build new features at iOS/Android apps. They don’t need to learn a new language, but simply gather some context in mobile development. Mobile engineers can also contribute to build new features in Mobile Web, since they already have context in mobile development. They only need to learn JavaScript and React Native concepts.
Building a Solid Foundation
As many people said, you can’t build a great building on a weak foundation. With this principle in mind, the first action that we did in order to adopt React Native in our development pipeline was to form a small team which acts as an infrastructure team. This team is responsible for all React Native-related research, development, and product support.
Since existing React Native features/libraries do not solve all of our use cases, one of our primary tasks is developing an internal system and various tools to support React Native development in Traveloka. We called it District System, and further details about it will be available at our next article.
Proper Guideline for Product Adoption
To ensure that all product teams are well-informed about React Native as one of the tools to develop products, we wrote a comprehensive and unopinionated guideline for React Native adoption. Throughout this guideline, we want to ensure that React Native is the right solution for product team’s specific use cases, so they can build a successful product. Also, we would like to maintain the pace of React Native adoption inside the organization. If we let all product teams to suddenly adopts React Native at the same time, the infrastructure team won’t be able to support all of them.
The guideline explains React Native’s pros and cons based on our research and experiences, and how React Native development is different from native iOS/Android development. It also contains the adoption process for the corresponding product team. Essentially, the process consists of several main steps:
- Properly onboard product engineers to React Native, so they have working knowledge to start development. Based on our experience, it is not as fast as people expected.
- Enforce product team(s) to follow current best practices and processes, which were gathered collectively by infrastructure team. This includes coding standards, design guidelines, testing methodology, and some other Dos & Don’ts.
- Gradually build React Native expertise inside every product team(s), so they have less dependencies to infrastructure team. To prevent a single point of failure, we insist all product teams to have more than one React Native engineer.
- Encourage product team(s) to contribute and improve React Native ecosystem at Traveloka, so the ecosystem will only gets better!
Current Product Adoption
By the time this article is published, there are some features inside Traveloka app that already use React Native (with upcoming features under development!). Some of them are:
- Trip Reminder via Push Notification : Remind customers about their Flight and Hotel bookings, and provide inspirations for their travel plans
- Destination : A content-rich platform that provides users with inspirational contents for endless exploration and discovery of relevant products for their needs
- Bills & Top-up : Pay for Water & Electricity, Game Voucher, Mobile Postpaid, etc.
Other than that, we also develop all of our B2B standalone apps using 100% React Native. Currently, we have 2 published apps:
- AXES : Easy voucher redemption system for Traveloka’s Partners and Merchants
- TERA : Management System for Traveloka’s Accommodation Partners
Will React Native replace native iOS/Android development in Traveloka?
No! We are not trying to rewrite existing native iOS/Android codebase, nor eliminating their usage in the future development. In fact, most of our current products are built using native iOS/Android. Converting native code to React Native just to satisfy the React Native hype won’t provide additional benefit to users. Instead of substituting Traveloka’s current mobile development pipeline, React Native acts as an addition to the pipeline, providing a solid alternative for all product teams to build great products.
At the end of the day, we believe that each development platforms are simply a means to an end to build great products. There is no silver bullet in technology and we should use the best tools/solutions for each specific use cases, by objectively considering their respective pros and cons.
This is the Part 1 in a series of articles about React Native Adoption at Traveloka.
