React Native At Traveloka: Boosting Agility in Product Development with React Native
This is part 4 of React Native At Traveloka in which we outline React Native impact to our product development.
End of 2016, a small group of engineers at Traveloka started investigating the possibility of adopting React Native at Traveloka. We decided to take a serious look at the benefit and drawbacks by adopting React Native at Traveloka. We will tell you the benefits and the drawbacks we found for Traveloka.
Benefits React Native
1. Cross Platform Native Apps
One of the key selling points of React Native is build native mobile apps with only one codebase. The concept of cross-platform framework wasn’t new. We had already seen JavaScript frameworks do similar things (PhoneGap, Cordova, etc), but React Native is different.
React native renders with native UI views, which means you are using the native components provided by the operating systems. While your general app logic is run by a JavaScript runtime on the mobile device, the UI definitions are mapped to native components. This has the potential to give your app a more native look and feel throughout.
React Native relying on the embedded JavaScriptCore in apps, which get platform-specific UI elements:
- In iOS, JavaScriptCore provided by the iOS platform, it was introduced in iOS 7 along with OS X Mavericks.
- In Android, React Native bundles the JavaScriptCore along with the application, hence the app size will increased around 3 to 4 megabytes.
2. One Codebase multiple apps
From our implementation, it’s possible to share up to 80% of code across all platforms. Instead of developing multiple separate apps you only have to develop one. The benefit for shared codebase is consistency. Code sharing is particularly useful when your code requires constant tweaking. These iteration cycles typically involve translating code from one language to another, and can be proven to be time-consuming.
We even invest significant amount of efforts on utilizing React Native Web, so one codebase JavaScript can be shared into 3 platforms (iOS, Android, and Web) and making platform-specific adjustments as necessary (we’ll write another article about React Native Web after the we gain more expertise on it).
3. Live and Hot reloading
Anyone who has ever worked in XCode or Android Studio knows how long and tedious build time can be. React Native have ‘live reload’ and ‘hot reload’ feature, enabling you to immediately see the result of the latest change that you have made to the code. One of the biggest advantages of hot reload is the ability to make changes in the source code so they can be seen without the need to recompile the app.
4. Simplified testing process
When you develop an Android App using Java / Kotlin, and iOS App using Objective C / Swift, it’s often the common business logic to be rewritten for each language. So our team would have two API with same scenario for different consumer even the business logic is same. To ensure the code have high quality, we need to create each unit test for each language.
In React Native, we only need to create one API, since the business logic is shared for each platform.
5. Save Time — Smaller Team — Save Money
With the above pros and current state of tooling, React Native will save time if utilized correctly. Develop mobile apps using React Native mostly only using JavaScript Language, so you don’t need to hire separate teams with iOS and Android specific knowledge. On smaller teams, each player can make an outstanding impact.
6. B2B Apps. Fast to spawn rather than native apps
In the first place, every Internal Tools in Traveloka only built-in Web Platform. Internal tools in web is essential, it could do complex feature, since the interface much bigger and the UX could be more complicated. But more complex the UI, it means needs more training for the staff to be able using the tool.
Since Traveloka have lot of partners, e.g: merchant, hotel vendors, we could easily distribute internal tool apps for each partner with simplified UI and functions in mobile apps.
7. Over-the-Air (OTA) update using CodePush
Over-the-Air (OTA) is a flow when you send an update out, the user downloads it, and the app updates — much like the web. Typically this happens behind the scenes. OTA updates are a strong point of React Native. Since we, the developers, usually write our logic in JavaScript (which doesn’t have to be compiled and installed) we can just send out a new JavaScript bundle, and once the user downloads it they have the updated logic.
But we still do this carefully. In Traveloka, we commit to a workflow if it’s a patch version (critical bug fix) it can go out with OTA. If it’s a major or minor version change (new feature, major changes), we send it via the regular app store approval process. We haven’t found it necessary to alter the functionality of our app by changing how things work or by adding new features with OTA.
8. Distribute Design Documentation using Expo
Traveloka consists of multiple teams to be able delivery a high quality product. We have Design Team to standardize our visual language and in another hand, there are engineers that prefer to build similar components from a scratch instead of looking up to find that same component for reuse. When collaborate of different team, it’s nice to have a guideline that you both can refer to.
Storybook is one tool that we use in Traveloka, as a design documentation that accessible by stakeholders, including engineers and fellow designers.
But how can we distribute easily the design documentation to all stakeholders? The UI component still needs to be rendered in native operating system, so it cannot be distributed via browser. To distribute easily, we are using Expo 🎉.
Expo is a free and open source toolchain build around React Native to help build native iOS and Android projects using Javascript and React. In every pull request our engineers made, a bot will create a comment consists with barcode and a link in the pull request, so the UI Dev could easily test the feature of the UI that engineers made using Expo App with their own mobile devices.
Shoutout to https://github.com/FormidableLabs/appr. We put zero effort to configure deploying storybook in every pull request.
Drawbacks Adopting React Native at Traveloka
However there are also drawbacks we consider after adopting React Native at Traveloka.
- Increasing of the Traveloka App Size.
Adding React Native library in Traveloka App (v2.18 — a year ago) increases the app size by ~15MB. This is caused by an issue in Realm JS that we fixed in the next release. After the fix, there's still significant ~8MB increase in app size for Android. - Keeping up Constant updates to the React Native environment.
React Native released a new version in every month. This means the platform is actively developed and always getting better, but we need to update the platform which brings dependency checking for existing code base every upgrade. - Loosely-typed language.
While Java / Kotlin and Swift / Objective-C are strongly-typed, compiled languages, Javascript is loosely-typed. This means that your variables can be anything at any time and will only be checked at runtime. While native SDK offers strong typing and compile checking, JavaScript mostly relies on the programmer’s experience, Lint tools and IDE plugins. Does this mean that JavaScript code will have more errors than native code? No. But it does mean that you might spend a lot more time searching for that app-breaking error which your compiler would have caught for you in Java or Swift. - New Role — New Expectation.
We need to create a new React Native engineering role, with its own expectations, growth path and job description. We need to adjust on how they work, how they should maintain design consistency across multiple platforms, how they test for every platform, and how much native platform knowledge that they should acquire over time. Their team leader also needs to appreciate breadth in tech competency, not only depth. - Bigger Responsibility.
The team still need to ship a consistently high-quality app experience on each platform. Engineers need to debug across platforms, there are times when building or debugging something requires digging into native. These situations can lead to engineers getting stuck way out of their expertise trying to debug an issue on a platform they have never used. - Require basic knowledge for each platform.
The native foundation of React Native still rears its head at times. For example, when integrating native libraries such as Push Notification in foreground or background, each platform is handled differently and cannot be handled in JavaScript alone. Having infrastructure team that focuses on solving these issues works quite well for us.
Showcases React Native at Traveloka
Bill Payment Products: Faster way to spawn new subproduct
At November 2017, Traveloka launch Bill Payment Products covered from PLN electricity tokens and bills, BPJS Kesehatan and Telkom (v2.18) to PDAM (v2.19) (available on Google Play Store and App Store).
At first, only PDAM water bills is developed using React Native. Fast forward, months after PDAM water bills was launched, many new Bill Payment Products at Traveloka are also developed using React Native. The products are Mobile Postpaid, Multifinance and Game Voucher.
Bill Payment Products with RN #1: PDAM (Water Bill)
State-owned water utility company PDAM (Perusahaan Daerah Air Minum) provides clean tap water supplies across Indonesia. As a state-owned operator, PDAM runs its own branches in each province, municipality and city in Indonesia. PDAM’s operations are fully monitored by local officials. With React Native, now users can pay their monthly water bill using Traveloka app!
Bill Payment Products with RN #2:Game Voucher
For online gamers, game vouchers are essentially currencies, which enable you to buy games, items, characters, and even increase levels or obtain new locations in the game. Typically, game vouchers are obtained through the purchase of digital or an actual, physical voucher from certain outlets. The hassle of having to trek to these outlets has now been removed. Just by using the internet on your mobile device, game vouchers can be easily purchased through Traveloka!
Bill Payment Products with RN #3:Mobile Postpaid
As the need for communication increases, so does the need for internet data. This is where a postpaid system can help you to use telecommunication service without having to worry about running out of internet data. Not to mention that you now can pay the bills very easily using the Traveloka App, running on React Native!
Bill Payment Products with RN #4: Multifinance
Multifinance is a finance service for purchase transactions. This service provider company help pay off customer purchases at the beginning, and afterwards, customer can do installment to the provider company, within a mutually agreed time period. This practice generally applies to the purchase of automotive products, devices, electronic devices, and household furniture. These payments can now be done using Traveloka app, powered by React Native.
Trip Reminder
🎉 It’s worth to mention that Trip Reminder development has exceeded our expectation in form of development time with support of the building blocks that have been created by District Team 🎉
Trip Reminder via Push Notification is a product to remind customers about their Flight and Hotel bookings, and provide inspirations for their travel plans. Next time you receive one of these in your Traveloka app, remember that this screen is built with React Native. I bet you didn’t notice 😉.
Vacation
👉 See how Vacation become our first content-rich product in Building Content-Rich Pages on React Native.
Vacation product is an overarching storefront that enables showcase of all Traveloka products, including transportation, accommodation, and Local & Destination (L&D) products. The storefront is a content-rich platform that provides users with inspirational contents for endless exploration and discovery of relevant products for their needs. Through Vacation, we aim to be present for users at relevant times — be it during their travel planning stage, impromptu planning for their nights or weekends, or turning their free time into exciting discovery of new places. Almost all of the screens in Vacation is made using React Native.
Traveloka TERA
TERA App is TERA’s mobile interface for our partners. They can configure their inventories that they sell in Traveloka. The implementation of TERA App was iterative. TERA App has a vision is to enable a “simplified-but-complete” extranet that’s powerful enough yet still much easier to use for our partners. React Native allowed us to build this app with minimal resources, so that the rest of our app developers can focus on improving our main app.
Traveloka AXES
AXES is abbreviation from Attraction & eXperience Extranet System. AXES provides experience product variants, covering all regions in Indonesia (from Medan to Papua). Since AXES is internal Traveloka product, therefore relation with partner is direct partnership and Traveloka communicate directly with them. Like TERA, React Native allows us to build and maintain this B2B app with minimal resources.
Conclusion
Based on the cost/benefit of React Native, we are satisfied adding React Native as an additional tool in our engineering alongside existing native Android and iOS. Even so, still not all use cases from product teams would have same drawbacks and benefits by using React Native.
We found React Native is the suitable tool for us to reuse most of our work — components, layout, and business logic — saving a lot of time and effort. Moving forward, we’ll be exploring more surfaces to use React Native as well as evolving and scaling our React Native foundation here at Traveloka.
This is the Part 4 in a series of articles about React Native Adoption at Traveloka.
