Posted by the Android staff
In 2020, the Mercari staff 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 staff’s capability 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 purpose 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. Throughout the analysis, the staff realized 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 staff 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 take a look at and implement new options. Utilizing this new design system, the Mercari staff rewrote greater than 130 UI screens for its market and modernized the feel and appear of lots of their elements.
With the assistance of the Jetpack Libraries, Mercari’s staff eradicated all legacy code through the rewrite, drastically decreasing its codebase and making it extra manageable for builders. “Nearly, it’s the identical app with method much less code,” stated Allan Conda, Android know-how 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 staff first started its GroundUP initiative, Jetpack Compose was solely obtainable in developer preview. They needed the app written utterly in Jetpack Compose as a result of its new declarative strategy to creating UI. Nonetheless, as a result of it was nonetheless so new, they discovered themselves having to unravel for distinctive edge circumstances 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 record. Customers have been then supposed to have the ability to choose photographs from their system gallery and rearrange them on this display screen utilizing a drag gesture. Gesture APIs weren’t obtainable in Jetpack Compose on the time, so the staff took benefit of Compose’s AndroidView to seamlessly combine Views that dealt with gestures on the itemizing kind display screen. This offered a secure but non permanent resolution to implementing drag gestures till the function grew to become obtainable with Jetpack Compose.
The Mercari staff was impressed by how straightforward 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 circumstances like this. Compose now helps gesture APIs, and Mercari builders have since utterly written and built-in the drag gesture element solely utilizing Compose.
Jetpack Compose has matured lots since Mercari’s preliminary adoption, and most Android builders now not want to fret about having to interoperate with each toolkits as Android apps can now be written utterly in Compose.
Enhancing and monitoring efficiency with Compose
Utilizing Compose, the Mercari staff 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 sooner with the default Compose baseline profile in comparison with with out a baseline profile. By offering a customized profile, there’s an extra enchancment of as much as 20% sooner when Mercari customers are scrolling in comparison with simply having the default baseline profile.
The staff additionally wrote automated efficiency assessments primarily based on the app’s core situations with Android Macrobenchmark. “Utilizing Android Macrobenchmark, we will routinely take a look at start-up, scroll, and display screen load instances efficiency,” stated Allan. “At the moment, we’ve got six core situations coated by these assessments, like search outcomes and looking gadgets.”
Moreover, Mercari builders built-in Firebase Efficiency Monitoring, a real-time app efficiency monitoring instrument, with customized code to calculate scrolling efficiency on Compose screens. With Firebase Efficiency Monitoring, the Mercari staff detected a efficiency subject on its search end result 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 sluggish rendering cases being decreased by round 23.6%.
The Mercari staff solved this body price subject with steering from Google’s Compose efficiency greatest practices and Compose stability. Mercari builders had the app skip its Composables and hoist the unused states on the search outcomes display screen, considerably bettering the body charges.
 |
Extra alternatives with Jetpack Compose
With much less code to take care of, it’s a lot simpler for Mercari builders to check and implement options. “Now we have a ton of experiments we will lastly conduct utilizing our refreshed platforms. Our customers can anticipate new options coming to the Mercari app at a sooner price,” stated Allan.
Mercari’s builders are excited to additional develop the app utilizing Animation APIs. With Compose, it’s a lot simpler to animate elements, which can lead to big enhancements for Android UXs.
Get began
Optimize your UI improvement with Jetpack Compose.
