Play Time with Jetpack Compose


Study Google Play Retailer’s technique for adopting Jetpack Compose, how they overcame particular efficiency challenges, and improved developer productiveness and happiness.

Posted by Andrew Flynn & Jon Boekenoogen, Tech leads on Google Play

In 2020, Google Play Retailer engineering management made the massive choice to revamp its whole storefront tech stack. The prevailing code was 10+ years outdated and had incurred large tech debt over numerous Android platform releases and have updates. We wanted new frameworks that will scale to the a whole bunch of engineers engaged on the product whereas not negatively impacting developer productiveness, person expertise, or the efficiency of the shop itself.

We laid out a multi-year roadmap to replace every little thing within the retailer from the community layer all the way in which to the pixel rendering. As a part of this we additionally needed to undertake a contemporary, declarative UI framework that will fulfill our product targets round interactivity and person delight. After analyzing the panorama of choices, we made the daring (on the time) choice to decide to Jetpack Compose, which was nonetheless in pre-Alpha.

Since that point, the Google Play Retailer and Jetpack Compose groups at Google have labored extraordinarily carefully collectively to launch and polish a model of Jetpack Compose that meets our particular wants. On this article we’ll cowl our method to migration in addition to the challenges and advantages we discovered alongside the way in which, to share some perception into what adopting Compose may be like for an app with many contributors.

Play Store rewrote their UI with 50% less code with Compose


After we have been contemplating Jetpack Compose for our new UI rendering layer, our high two priorities have been:

  1. Developer Productiveness: Play Retailer staff has a whole bunch of engineers contributing to this code, so it must be straightforward (and enjoyable) to develop in opposition to.
  2. Efficiency: Play Retailer renders a lot of media-heavy content material with many enterprise metrics which can be very delicate to latency and jank, so we would have liked to verify it carried out properly throughout all units, particularly low-memory {hardware} and Android (Go Version) units.

Developer Productiveness

Now we have been writing UI code utilizing Jetpack Compose for over a yr now and revel in how Jetpack Compose makes UI growth extra easy.

We love that writing UI requires a lot much less code, typically as much as 50%. That is made doable by Compose being a declarative UI framework and harnessing Kotlin’s conciseness. Customized drawing and layouts at the moment are easy perform calls as a substitute of View subclasses with N technique overrides.

Utilizing the Rankings Desk for example:

ratings table

With Views, this desk consists of:

  • 3 View courses whole, with 2 requiring customized drawing for the rounded rects, and stars
  • ~350 strains of Java, 55 strains of XML

With Compose, this desk consists of:

  • All @Composable capabilities contained in the identical file and language!
  • ~210 strains of Kotlin

buffering GIF

Animations are a hailed function of Compose for his or her simplicity and expressiveness. Our staff is constructing movement options that delight our Play Retailer customers greater than ever with Compose. With Compose’s declarative nature and animations APIs, writing sequential or parallel animations has by no means been simpler. Our staff now not fears all of the nook instances of animations round cancellation and name again chaining. Lottie, a preferred animation library, already supplies Compose APIs which can be easy to work with.

Now you is perhaps considering: this all sounds nice, however what about library dependencies that present Views? It is true, not all library house owners have applied Compose-based APIs, particularly after we first migrated. Nonetheless, Compose supplies straightforward View interoperability with its ComposeView and AndroidView APIs. We efficiently built-in with in style libraries like ExoPlayer and YouTube’s Participant on this vogue.

Headshot of Andrew


The Play Retailer and Jetpack Compose groups labored carefully collectively to verify Compose might run as quick and be as jank-free because the View framework. Attributable to how Compose is bundled throughout the app (reasonably than being included as a part of the Android framework), this was a tall order. Rendering particular person UI elements on the display screen was quick, however finish to finish instances of loading all the Compose framework into reminiscence for apps was costly.

One of many largest Compose adoption efficiency enhancements for the Play Retailer got here from the event of Baseline Profiles. Whereas cloud profiles assist enhance app startup time and have been accessible for a while now, they’re solely accessible for API 28+ and aren’t as efficient for apps with frequent (weekly) launch cadences. To fight this, the Play Retailer and Android groups labored collectively on Baseline Profiles: a developer-defined, bundled profile that app house owners can specify. They ship along with your app, are totally suitable with cloud profiles and may be outlined each on the app-level of specificity and library-level (Compose adopters will get this without cost!). By rolling out baseline profiles, Play Retailer noticed a lower in preliminary web page rendering time on its search outcomes web page of 40%. That’s enormous!

Re-using UI elements is a core mechanic of what makes Compose performant for rendering, notably in scrolling conditions. Compose does its greatest to skip recomposition for composables that it is aware of may be skipped (e.g. they’re immutable), however builders also can power composables to be handled as skippable if all parameters meet the @Steady annotation necessities. The Compose compiler additionally supplies a helpful information on what’s stopping particular capabilities from being skippable. Whereas creating closely re-used UI elements in Play Retailer that have been used often in scrolling conditions, we discovered that pointless recompositions have been including as much as missed body instances and thus jank. We constructed a Modifier to simply spot these recompositions in our debug settings as properly. By making use of these methods to our UI elements, we have been in a position to scale back jank by 10-15%.

Recomposition visualization Modifier in action

Recomposition visualization Modifier in motion. Blue (no recompositions), Inexperienced (1 recomposition).

One other key element to optimizing Compose for the Play Retailer app was having an in depth, end-to-end migration technique for all the app. Throughout preliminary integration experiments, we bumped into the Two Stack Drawback: operating each Compose and View rendering inside a single person session was very reminiscence intensive, particularly on lower-end units. This cropped up each throughout rollouts of the code on the identical web page, but in addition when two totally different pages (for instance, the Play Retailer residence web page and the search outcomes web page) have been every on a distinct stack. With a view to ameliorate this startup latency, it was essential for us to have a concrete plan for the order and timeline of pages migrating to Compose. Moreover, we discovered it useful so as to add short-term pre-warming of widespread courses as stop-gaps till the app is totally migrated over.

Compose unbundling from the Android framework has lowered the overhead in our staff straight contributing to Jetpack Compose, leading to quick turnaround instances for enhancements that profit all builders. We have been in a position to collaborate with the Jetpack Compose staff and launch options like LazyList merchandise kind caching in addition to transfer shortly on light-weight fixes like additional object allocations.

Headshot of Jon

Trying Forward

The Play Retailer’s adoption of Compose has been a boon for our staff’s developer happiness, and a giant step-up for code high quality and well being. All new Play Retailer options are constructed on high of this framework, and Compose has been instrumental in unlocking higher velocity and smoother landings for the app. As a result of nature of our Compose migration technique, we haven’t been in a position to measure issues like APK dimension modifications or construct pace as carefully, however all indicators that we are able to see look very constructive!

Compose is the way forward for Android UI growth, and from the Play Retailer’s standpoint, we couldn’t be happier about that!


Supply hyperlink

Related Articles


Latest Articles