Play Time with Jetpack Compose

Find out about 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 resolution to revamp its whole storefront tech stack. The prevailing code was 10+ years previous and had incurred great tech debt over numerous Android platform releases and have updates. We wanted new frameworks that will scale to the tons of of engineers engaged on the product whereas not negatively impacting developer productiveness, consumer expertise, or the efficiency of the shop itself.

We laid out a multi-year roadmap to replace all the things within the retailer from the community layer all the best way to the pixel rendering. As a part of this we additionally wished to undertake a contemporary, declarative UI framework that will fulfill our product targets round interactivity and consumer delight. After analyzing the panorama of choices, we made the daring (on the time) resolution 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 best way, to share some perception into what adopting Compose could be like for an app with many contributors.

Concerns

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

1. Developer Productiveness: Play Retailer crew has tons of of engineers contributing to this code, so it must be simple (and enjoyable) to develop towards.
2. Efficiency: Play Retailer renders numerous media-heavy content material with many enterprise metrics which are very delicate to latency and jank, so we would have liked to ensure it carried out nicely throughout all gadgets, particularly low-memory {hardware} and Android (Go Version) gadgets.

Developer Productiveness

We’ve been writing UI code utilizing Jetpack Compose for over a yr now and revel in how Jetpack Compose makes UI improvement extra easy.

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

Utilizing the Scores Desk for instance:

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 features contained in the identical file and language!
• ~210 strains of Kotlin

Animations are a hailed characteristic of Compose for his or her simplicity and expressiveness. Our crew 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 crew not fears all of the nook instances of animations round cancellation and name again chaining. Lottie, a preferred animation library, already gives Compose APIs which are easy to work with.

Now you could be considering: this all sounds nice, however what about library dependencies that present Views? It is true, not all library homeowners have carried out Compose-based APIs, particularly once we first migrated. Nevertheless, Compose gives simple View interoperability with its ComposeView and AndroidView APIs. We efficiently built-in with widespread libraries like ExoPlayer and YouTube’s Participant on this style.

Efficiency

The Play Retailer and Jetpack Compose groups labored carefully collectively to ensure Compose might run as quick and be as jank-free because the View framework. On account of 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 was quick, however finish to finish instances of loading the whole 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 out there for a while now, they’re solely out there 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 homeowners can specify. They ship together with your app, are absolutely suitable with cloud profiles and could be outlined each on the app-level of specificity and library-level (Compose adopters will get this free of charge!). 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 could be skipped (e.g. they’re immutable), however builders can even pressure composables to be handled as skippable if all parameters meet the @Secure annotation necessities. The Compose compiler additionally gives a helpful information on what’s stopping particular features from being skippable. Whereas creating closely re-used UI elements in Play Retailer that had been used steadily in scrolling conditions, we discovered that pointless recompositions had 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 nicely. By making use of these methods to our UI elements, we had been in a position to scale back jank by 10-15%.

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 the whole app. Throughout preliminary integration experiments, we bumped into the Two Stack Downside: operating each Compose and View rendering inside a single consumer session was very reminiscence intensive, particularly on lower-end gadgets. This cropped up each throughout rollouts of the code on the identical web page, but in addition when two completely different pages (for instance, the Play Retailer dwelling web page and the search outcomes web page) had been every on a special stack. In an effort to ameliorate this startup latency, it was necessary 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 frequent courses as stop-gaps till the app is absolutely migrated over.

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

Wanting Forward

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

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