React Native at Traveloka : An Introduction

Why we decided to use React Native alongside with native iOS/Android, and how we did it

Albert Darmawan
Dec 4, 2018 · 5 min read

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:

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:

Some pages at Traveloka App which used React Native

Other than that, we also develop all of our B2B standalone apps using 100% React Native. Currently, we have 2 published apps:

Yes, we have more than one app in the App Store (and Google Play Store)!

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.

Traveloka Engineering

Empowering Discovery Through Technology

Traveloka Engineering

Empowering Discovery Through Technology

Albert Darmawan

Written by

Software Engineer at Traveloka

Traveloka Engineering

Empowering Discovery Through Technology