This is post #2 a series of posts about our journey of rewriting an app from the ground up with React Native, how we pulled it off, and how it changed the trajectory of the business.
Hi, I am Naoya, a Senior Engineering Manager at Mercari. In a series of posts, we want to update you on the journey of rewriting an app from the ground up with React Native, how we pulled it off, and how it changed the trajectory of the business.
At the beginning of 2021, I published a post about why we decided to rewrite our iOS and Android apps from scratch in React Native. I encourage you to read the article, but in short, here are some of the challenges we encountered while making the decision. While we had our apps built-in native iOS and Android frameworks, we also had some screens in React Native. The cost of maintaining three codebases was higher than the cost for maintaining one. Any application-level update, such as the design system, and accessibility, was complex and time-consuming because we always needed to work on the three codebases. This resulted in a communication burden between the three platforms. There can also be inconsistencies between iOS and Android apps due to differences in the platforms. Hiring native app developers was challenging and could have resulted in an unbalanced availability of iOS and Android engineers.
With a technical assessment to evaluate the feasibility, followed by company-wide discussions, we’ve signed up for the eighteen-month journey to rewrite the entire app in React Native, with a promise of dramatically simplifying the complexity of managing the iOS and Android apps and boosting up the mobile team performance to out-grow the business needs.
Rewriting an app can be risky. It can end up in a never-ending tunnel, burnt-out team members, and an unstable buggy app. There is a lot of planning for a rewrite. Planning and estimations are iterative processes. It requires updating regularly and setting an expectation that estimation is never fixed.
We started by breaking down the app by screens, coming up with an initial estimate in weeks of complexity, multiplying the total weeks with a buffer of an additional 50%, and using this total complexity estimate to set an initial projection of the project and come up with potential headcount needs.
For a project over a year-long, it is crucial to maintain the company buy-in and strong communication loops. With the help of a Technical Program Manager, we organized the regular company update about the state of the project, highlighting major deliveries and providing visibility. To help understand the long project journey, we broke down the entire project into milestones, highlighting key deliverables and expected app completion progress in each stage. This not only helped communicate about the state of the project but also gave project members a sense of accomplishment with each milestone that was complete.
Each milestone was broken down into Epics and Stories in Jira. We maintained the total story estimations to see the milestone completion accurately at any given moment while running in two-week sprints. Sprint cycles ended with a demo day where engineers demonstrated their work. Demo day is highly effective in communicating about each story's progress, Ad Hoc feedback from the audiences (designers, copy-writers, engineers, PMs, and QAs were regular attendees), and importantly, it gives engineers opportunities to show their work and celebrate wins which helps build up the team momentum.
To communicate about the app completion progress and help find issues, we introduced the internal dogfooding program over ten months before the public release. Aligned with the project milestone, we published three phases of dogfooding apps.
Alpha (about 50% completion rate) introduced minimum, critical functionality where you can complete some functionality of the Mercari App and may need to access the existing app to complete the missing functionality. Beta (about 80% completion) app enables employees to solely use the new app for the everyday needs of the Mercari App. Followed by the release candidates a few months before the production to achieve the production app quality.
In this React Native app launch, it is essential to note that the scope is not to release a new app with feature improvements. There are no new feature additions that are not currently available in the existing production app. We did not introduce any architectural change in the data flow and continued to consume the same APIs to consume the same backend APIs (we did consolidate some API requests to improve performance).
One of the concerns from native app engineers was the onboarding to React Native. We brought a team of React Native experts, Infinite Red. They not only contributed to the application but also paired up with existing developers to pair-program and onboard them to React Native. We offered a six months ramp-up period where engineers spend time learning React Native while working on the rewrite project. We continue to hold a weekly React Native Class where we share knowledge and updates on the React Native rewrite project.
We focus on the three points as we get closer to the release:
After fifteen months of development and three months of phased rollout with extensive monitoring, we’ve now completed the 100% rollout of the React Native apps serving iOS and Android. With this transition, we now have sixteen mobile engineers contributing to both iOS and Android apps, increasing from five Android engineers when we started back in 2021. This alone in a dramatic increase in the engineering throughput is game-changing. Another remarkable finding from the release is that Item View Conversion Rate, Home View Rate, and Keyword Search Count Per User performed significantly better than the Native App. Moreover, we’ve seen notable performance improvements like App start on Android speed up by 52%.
This transition would not have been possible without the tremendous work of every project member. It is the true exercise of All for One, Mercari Values.
January 2021: the project started with four engineers.
October 2021: Started an internal dogfooding Android app and increased the developers to eleven.
January 2022: Android app is in maintenance mode.
March 2022: Start Android React Native app rollout, started iOS-specific development of React Native app.
April 2022: iOS app is in maintenance mode.
May 2022: Completed 100% Android React Native app rollout and started iOS React Native app rollout.
June 2022: Completed iOS React Native app 100% rollout.
As we understand more about React Native, we will update you on the specifics of some of our engineering initiatives, including app performance and a path toward a more seamless deployment of the apps. Please subscribe to the blog for updates.
