apk.fm / News / Play Time with Jetpack Compose

Play Time with Jetpack Compose

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 determination to revamp its total 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 might scale to the a whole lot 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 the whole lot 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 might fulfill our product objectives round interactivity and person delight. After analyzing the panorama of choices, we made the daring (on the time) determination 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 intently collectively to launch and polish a model of Jetpack Compose that meets our particular wants. On this article we’ll cowl our strategy to migration in addition to the challenges and advantages we discovered alongside the way in which, to share some perception into what adopting Compose might be like for an app with many contributors.

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


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

  1. Developer Productiveness: Play Retailer workforce has a whole lot 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 can be very delicate to latency and jank, so we wanted to verify it carried out effectively throughout all units, particularly low-memory {hardware} and Android (Go Version) units.

Developer Productiveness

We’ve got been writing UI code utilizing Jetpack Compose for over a 12 months now and luxuriate 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 are actually easy operate calls as an alternative of View subclasses with N methodology overrides.

Utilizing the Scores Desk for instance:

ratings table

With Views, this desk consists of:

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

With Compose, this desk consists of:

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

buffering GIF

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

Now you may be considering: this all sounds nice, however what about library dependencies that present Views? It is true, not all library house owners have carried out Compose-based APIs, particularly once we first migrated. Nonetheless, Compose supplies simple 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 intently collectively to verify Compose may run as quick and be as jank-free because the View framework. On account of how Compose is bundled throughout the app (relatively than being included as a part of the Android framework), this was a tall order. Rendering particular person UI parts on the display was quick, however finish to finish instances of loading the complete 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 are usually not 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 might 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 big!

Re-using UI parts is a core mechanic of what makes Compose performant for rendering, significantly in scrolling conditions. Compose does its greatest to skip recomposition for composables that it is aware of might be skipped (e.g. they’re immutable), however builders also can drive composables to be handled as skippable if all parameters meet the @Secure annotation necessities. The Compose compiler additionally supplies a useful information on what’s stopping particular features from being skippable. Whereas creating closely re-used UI parts in Play Retailer that had been used often 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 effectively. By making use of these strategies to our UI parts, we had been capable of 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 part to optimizing Compose for the Play Retailer app was having an in depth, end-to-end migration technique for the complete 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 additionally when two totally different pages (for instance, the Play Retailer dwelling web page and the search outcomes web page) had been every on a special stack. As a way to ameliorate this startup latency, it was vital 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 lessons as stop-gaps till the app is totally migrated over.

Compose unbundling from the Android framework has lowered the overhead in our workforce immediately contributing to Jetpack Compose, leading to quick turnaround instances for enhancements that profit all builders. We had been capable of collaborate with the Jetpack Compose workforce 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 workforce’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. As a result of nature of our Compose migration technique, we haven’t been capable of measure issues like APK measurement modifications or construct velocity as intently, 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!

Source hyperlink

Take a comment