Posted by the Android crew
In 2020, the Mercari crew took on a giant initiative to replace its app’s technical infrastructure. On the time, its codebase was seven years outdated and hadn’t undergone any main architectural updates. This affected the crew’s skill to develop new options and launch well timed app updates. To resolve this technical debt, Mercari launched what it known as the GroundUP initiative—an entire rewrite of its utility throughout platforms, together with Android.
The aim was to create a totally modernized utility with a scalable design. Whereas retooling the app, Mercari builders turned to Jetpack Compose, Android’s trendy declarative toolkit for creating native UI. In the course of the analysis, the crew discovered rewriting in Jetpack Compose would assist clear up their codebase and have extra management over how the app appears to be like.
A rewrite with much less code
The Mercari crew utterly rewrote the structure and tech stack for its Android app utilizing Jetpack Compose. Mercari builders created a brand new design system and utterly built-in it utilizing Compose, enabling them to simply check and implement new options. Utilizing this new design system, the Mercari crew rewrote greater than 130 UI screens for its market and modernized the feel and appear of lots of their parts.
With the assistance of the Jetpack Libraries, Mercari’s crew eradicated all legacy code through the rewrite, drastically lowering its codebase and making it extra manageable for builders. “Nearly, it’s the identical app with method much less code,” mentioned Allan Conda, Android expertise lead at Mercari. “The rewritten app has about 355,000 fewer traces of code, which is about 69% lower than what it had earlier than.”
 |
Interoperability with Views as an early adopter
When the Mercari crew first started its GroundUP initiative, Jetpack Compose was solely accessible in developer preview. They wished the app written utterly in Jetpack Compose on account of its new declarative strategy to creating UI. Nevertheless, as a result of it was nonetheless so new, they discovered themselves having to resolve for distinctive edge instances utilizing each toolkits.
For instance, on Mercari’s itemizing kind screens, customers are prompted to enter particulars in regards to the merchandise they need to listing. Customers have been then supposed to have the ability to choose images from their system gallery and rearrange them on this display screen utilizing a drag gesture. Gesture APIs weren’t accessible in Jetpack Compose on the time, so the crew took benefit of Compose’s AndroidView to seamlessly combine Views that dealt with gestures on the itemizing kind display screen. This supplied a secure but momentary answer to implementing drag gestures till the function grew to become accessible with Jetpack Compose.
The Mercari crew was impressed by how simple it was to modify between the 2 toolkits, and having the choice to make use of Views alongside Compose gave them higher management of edge instances like this. Compose now helps gesture APIs, and Mercari builders have since utterly written and built-in the drag gesture part solely utilizing Compose.
Jetpack Compose has matured lots since Mercari’s preliminary adoption, and most Android builders not want to fret about having to interoperate with each toolkits as Android apps can now be written utterly in Compose.
Bettering and monitoring efficiency with Compose
Utilizing Compose, the Mercari crew automated baseline profile technology for each secure launch of the app and located it to be actually useful. The house display screen renders frames as much as 2x quicker with the default Compose baseline profile in comparison with with out a baseline profile. By offering a customized profile, there’s a further enchancment of as much as 20% quicker when Mercari customers are scrolling in comparison with simply having the default baseline profile.
The crew additionally wrote automated efficiency exams based mostly on the app’s core situations with Android Macrobenchmark. “Utilizing Android Macrobenchmark, we are able to routinely check start-up, scroll, and display screen load instances efficiency,” mentioned Allan. “At present, we’ve six core situations coated by these exams, like search outcomes and looking gadgets.”
Moreover, Mercari builders built-in Firebase Performance Monitoring, a real-time app efficiency monitoring device, with customized code to calculate scrolling efficiency on Compose screens. With Firebase Efficiency Monitoring, the Mercari crew detected a efficiency concern on its search outcome display screen. Utilizing the Android Profiler to pinpoint the issue, Mercari builders found there have been poor body charges when scrolling search outcomes. This resulted within the gradual rendering situations being diminished by round 23.6%.
The Mercari crew solved this body price concern with steerage from Google’s Compose performance best practices and Compose stability. Mercari builders had the app skip its Composables and hoist the unused states on the search outcomes display screen, considerably enhancing the body charges.
 |
Extra alternatives with Jetpack Compose
With much less code to keep up, it’s a lot simpler for Mercari builders to check and implement options. “We’ve got a ton of experiments we are able to lastly conduct utilizing our refreshed platforms. Our customers can anticipate new options coming to the Mercari app at a quicker price,” mentioned Allan.
Mercari’s builders are excited to additional develop the app utilizing Animation APIs. With Compose, it’s a lot simpler to animate parts, which may end up in large enhancements for Android UXs.
Get began
Optimize your UI improvement with Jetpack Compose.
