Posted by Chris Arriola, Developer Relations Engineer and Nick Butcher, Product Supervisor for Jetpack Compose
As one of many largest audio streaming platforms on the planet, SoundCloud helps a community of creators who use its service to add and promote their music. SoundCloud’s builders are all the time exploring methods to enhance its consumer expertise, which implies going past merely constructing the perfect cell app. The staff additionally desires to make SoundCloud obtainable on as many kind elements as potential so customers can simply entry and hearken to SoundCloud in any scenario and on the units that work finest for them.
That’s why the SoundCloud staff adopted Jetpack Compose, Android’s trendy declarative toolkit for constructing native UI. Compose enabled SoundCloud engineers to not solely increase the app to extra kind elements, but additionally streamline new function improvement—in some circumstances decreasing practically half the code.
Simplified UI improvement with Compose
Earlier than migrating to Compose, constructing UI was a lot slower for SoundCloud builders as a result of they needed to continually change context between Kotlin and XML. This additionally made managing and sustaining its design system way more tough. The staff’s engineers wished to discover a easier approach to write code, they usually knew Compose would assist them get there.
“We began adopting Compose to rapidly construct dynamic layouts utilizing Kotlin, the language we love,” mentioned Vitus Ortner, an Android engineer at SoundCloud. “We wished to empower our engineers to successfully create wealthy UIs by way of Compose.”
SoundCloud engineers overhauled the app’s design system with Compose and may now construct new options utilizing 45% much less code on common. Compose’s concise Kotlin syntax and its capacity to create reusable UI made design and upkeep a lot simpler for the staff. Prototyping new options was additionally easier due to Compose’s declarative strategy, in addition to its stay edit and UI preview options.
“We applied a brand new content material discovery function with an interactive vertical feed format. We used Compose to prototype, and it enabled us to iterate quick even after we modified our design concepts day by day,” mentioned Vitus. “That wouldn’t have been potential with Views.”
Compose’s interoperability with Views made it simpler for builders emigrate SoundCloud’s design system to the brand new toolkit as a result of they may do it step by step. As a result of SoundCloud makes use of a mannequin–view–viewModel structure, builders may reuse the app’s outdated view fashions within the new Compose framework. This meant they solely wanted emigrate the app’s View-based layouts to Compose, moderately than rewrite all the UI layer.
Optimizing for extra kind elements with Compose
Switching to Compose enabled builders to do greater than streamline the app’s codebase. It additionally made supporting a number of kind elements simpler. With Compose, SoundCloud engineers have been in a position to extra simply convey the app to tablets, TVs, vehicles, and wearables.
“We’re utilizing Compose throughout all kind elements within the Android ecosystem,” mentioned Vitus. “We applied our Put on OS and TV apps from the bottom up with Compose, which allowed us to quickly iterate and ship new merchandise in a fraction of the time it will have taken earlier than.”
To adapt the cell expertise to a wide range of display screen sizes whereas sustaining interoperability with current code, SoundCloud builders present completely different XML layouts to mix current View code with newer Compose parts. Straightforward-to-implement options like this helped the staff rapidly construct experiences throughout completely different units, together with optimizing SoundCloud for vehicles and tablets.
With these enhancements, SoundCloud engineers constructed their Put on OS app and TV app from the bottom up in simply 4 months utilizing Compose. In keeping with Vitus, this “would’ve been unthinkable” utilizing their earlier system.
“Our cell Compose expertise transferred on to Compose for different kind elements,” mentioned Vitus. “The ideas and most APIs are the identical throughout kind elements. We nonetheless wanted to be taught some kind factor-specific APIs, like ScalingLazyColumn for Put on OS and TvLazyColumn for TVs.”
Future funding in Compose
By migrating its Android app to Compose, SoundCloud builders improved productiveness, simplified the app’s code, and established smoother improvement processes for brand spanking new options and experiences. Switching to Compose additionally helped SoundCloud increase to extra kind elements, creating new methods for customers to entry the platform.
“Compose helped us attain new customers and markets, in the end growing our international attain,” mentioned Vitus. “We’re totally dedicated to Compose and plan to make use of it for all tasks sooner or later.”
Get began
Optimize your UI improvement with Jetpack Compose.
