Mercari reduces 355K lines of code, a 69% difference, by rebuilding with Jetpack Compose

Posted by the Android team

In 2020, the Mercari team took on a big initiative to update its app’s technical infrastructure. At the time, its codebase was seven years old and hadn’t undergone any major architectural updates. This affected the team’s ability to develop new features and release timely app updates. To resolve this technical debt, Mercari launched what it called the GroundUP initiative—a complete rewrite of its application across platforms, including Android.

The goal was to create a completely modernized application with a scalable design. While retooling the app, Mercari developers turned to Jetpack Compose, Android’s modern declarative toolkit for creating native UI. During the evaluation, the team learned rewriting in Jetpack Compose would help clean up their codebase and have more control over how the app looks.

A rewrite with less code

The Mercari team completely rewrote the architecture and tech stack for its Android app using Jetpack Compose. Mercari developers created a new design system and completely integrated it using Compose, enabling them to easily test and implement new features. Using this new design system, the Mercari team rewrote more than 130 UI screens for its marketplace and modernized the look and feel of many of their components.

With the help of the Jetpack Libraries, Mercari’s team eliminated all legacy code during the rewrite, drastically reducing its codebase and making it more manageable for developers. “Virtually, it’s the same app with way less code,” said Allan Conda, Android technology lead at Mercari. “The rewritten app has about 355,000 fewer lines of code, which is about 69% less than what it had before.”

Interoperability with Views as an early adopter

When the Mercari team first began its GroundUP initiative, Jetpack Compose was only available in developer preview. They wanted the app written completely in Jetpack Compose due to its new declarative approach to creating UI. However, because it was still so new, they found themselves having to solve for unique edge cases using both toolkits.

For example, on Mercari’s listing form screens, users are prompted to input details about the merchandise they want to list. Users were then supposed to be able to select photos from their device gallery and rearrange them on this screen using a drag gesture. Gesture APIs weren’t available in Jetpack Compose at the time, so the team took advantage of Compose's AndroidView to seamlessly integrate Views that handled gestures on the listing form screen. This provided a stable yet temporary solution to implementing drag gestures until the feature became available with Jetpack Compose.

The Mercari team was impressed by how easy it was to switch between the two toolkits, and having the option to use Views alongside Compose gave them better control of edge cases like this. Compose now supports gesture APIs, and Mercari developers have since completely written and integrated the drag gesture component solely using Compose.

Jetpack Compose has matured a lot since Mercari’s initial adoption, and most Android developers no longer need to worry about having to interoperate with both toolkits as Android apps can now be written completely in Compose.

Improving and monitoring performance with Compose

Using Compose, the Mercari team automated baseline profile generation for every stable release of the app and found it to be really helpful. The home screen renders frames up to 2x faster with the default Compose baseline profile compared to without a baseline profile. By providing a custom profile, there’s an additional improvement of up to 20% faster when Mercari users are scrolling compared to just having the default baseline profile.

The team also wrote automated performance tests based on the app’s core scenarios with Android Macrobenchmark. “Using Android Macrobenchmark, we can automatically test start-up, scroll, and screen load times performance,” said Allan. “Currently, we have six core scenarios covered by these tests, like search results and browsing items.”

Additionally, Mercari developers integrated Firebase Performance Monitoring, a real-time app performance monitoring tool, with custom code to calculate scrolling performance on Compose screens. With Firebase Performance Monitoring, the Mercari team detected a performance issue on its search result screen. Using the Android Profiler to pinpoint the problem, Mercari developers discovered there were poor frame rates when scrolling search results. This resulted in the slow rendering instances being reduced by around 23.6%.

The Mercari team solved this frame rate issue with guidance from Google’s Compose performance best practices and Compose stability. Mercari developers had the app skip its Composables and hoist the unused states on the search results screen, significantly improving the frame rates.

More opportunities with Jetpack Compose

With less code to maintain, it’s much easier for Mercari developers to test and implement features. “We have a ton of experiments we can finally conduct using our refreshed platforms. Our users can expect new features coming to the Mercari app at a faster rate,” said Allan.

Mercari’s developers are excited to further develop the app using Animation APIs. With Compose, it’s much easier to animate components, which can result in huge improvements for Android UXs.

Get started

Optimize your UI development with Jetpack Compose.