Play Time with Jetpack Compose

0/5 No votes

Report this app

Description

[ad_1]


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 large determination to revamp its total storefront tech stack. The prevailing code was 10+ years previous and had incurred super tech debt over numerous Android platform releases and have updates. We would have liked new frameworks that may scale to the tons of 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 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 needed to undertake a contemporary, declarative UI framework that may 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 method to migration in addition to the challenges and advantages we discovered alongside the best way, to share some perception into what adopting Compose will be like for an app with many contributors.

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

Issues

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

  1. Developer Productiveness: Play Retailer group has tons of of engineers contributing to this code, so it ought to be simple (and enjoyable) to develop towards.
  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 ensure it carried out effectively throughout all gadgets, particularly low-memory {hardware} and Android (Go Version) gadgets.

Developer Productiveness

We’ve got been writing UI code utilizing Jetpack Compose for over a yr now and luxuriate 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 doable 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 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 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 characteristic of Compose for his or her simplicity and expressiveness. Our group 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 group 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 likely to be pondering: 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 widespread libraries like ExoPlayer and YouTube’s Participant on this trend.

Headshot of Andrew

Efficiency

The Play Retailer and Jetpack Compose groups labored intently collectively to ensure Compose might run as quick and be as jank-free because the View framework. As a result of how Compose is bundled inside 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 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 out there for a while now, they’re solely out there 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 together with your app, are totally suitable with cloud profiles and will be outlined each on the app-level of specificity and library-level (Compose adopters will get this at no 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 large!

Re-using UI parts 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 will be skipped (e.g. they’re immutable), however builders may also drive 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 features from being skippable. Whereas creating closely re-used UI parts 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 effectively. By making use of these methods to our UI parts, we had been capable of cut 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 all the app. Throughout preliminary integration experiments, we bumped into the Two Stack Drawback: working each Compose and View rendering inside a single person 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 totally different pages (for instance, the Play Retailer house web page and the search outcomes web page) had been every on a special 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 decreased the overhead in our group instantly 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 group and launch options like LazyList merchandise sort caching in addition to transfer rapidly on light-weight fixes like further object allocations.

Headshot of Jon


Trying Forward

The Play Retailer’s adoption of Compose has been a boon for our group’s developer happiness, and an enormous 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 adjustments or construct pace as intently, however all indicators that we are able to 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!

[ad_2]

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.