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 previous and hadn’t undergone any main architectural updates. This affected the staff’s potential to develop new options and launch well timed app updates. To resolve this technical debt, Mercari launched what it known as the GroundUP initiative—a whole rewrite of its software throughout platforms, together with Android.
The aim was to create a totally modernized software 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 staff realized rewriting in Jetpack Compose would assist clear up their codebase and have extra management over how the app appears.
A rewrite with much less code
The Mercari staff fully rewrote the structure and tech stack for its Android app utilizing Jetpack Compose. Mercari builders created a brand new design system and fully 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 a lot of their elements.
With the assistance of the Jetpack Libraries, Mercari’s staff eradicated all legacy code in the course of 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 strains 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 accessible in developer preview. They needed the app written fully in Jetpack Compose resulting from 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 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 checklist. Customers had been then supposed to have the ability to choose pictures from their gadget gallery and rearrange them on this display utilizing a drag gesture. Gesture APIs weren’t accessible 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. This supplied a steady but momentary answer to implementing drag gestures till the characteristic grew to become accessible 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 instances like this. Compose now helps gesture APIs, and Mercari builders have since fully 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 fully in Compose.
Bettering and monitoring efficiency with Compose
Utilizing Compose, the Mercari staff automated baseline profile era for each steady launch of the app and located it to be actually useful. The house display renders frames as much as 2x quicker with the default Compose baseline profile in comparison with and not using 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 staff additionally wrote automated efficiency checks based mostly on the app’s core situations with Android Macrobenchmark. “Utilizing Android Macrobenchmark, we are able to robotically take a look at start-up, scroll, and display load occasions efficiency,” stated Allan. “Presently, now we have six core situations coated by these checks, like search outcomes and searching gadgets.”
Moreover, Mercari builders built-in Firebase Efficiency Monitoring, a real-time app efficiency monitoring software, 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. 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 diminished by round 23.6%.
The Mercari staff solved this body price subject with steerage from Google’s Compose efficiency finest practices and Compose stability. Mercari builders had the app skip its Composables and hoist the unused states on the search outcomes display, considerably enhancing 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. “We now have 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,” 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 enormous enhancements for Android UXs.
Get began
Optimize your UI improvement with Jetpack Compose.
