Posted by Nick Butcher – Product Supervisor for Jetpack Compose, and Florina Muntenescu – Developer Relations Engineer
As one of many world’s hottest cloud-based storage companies, Google Drive lets folks do extra than simply retailer their recordsdata on-line. With Drive, customers can synchronize, share, search, edit, and even pin specified recordsdata and content material for protected and safe offline use.
Not too long ago, Drive’s builders revamped the appliance’s house display screen to offer a extra seamless expertise throughout gadgets, matching updates made to Google Drive’s internet model. Nonetheless, the app’s earlier structure and codebase would’ve prevented the crew from finishing the updates in a well timed method.
As an alternative of combating the app’s earlier tech stack to implement the replace, the Drive crew rebuilt the house web page from the bottom up utilizing Android’s really helpful structure and Jetpack Compose, Android’s trendy declarative toolkit for creating native UI.
Experimenting with Kotlin and Compose
The Drive crew experimented with Kotlin — which the Compose toolkit is constructed with — for a number of months earlier than planning the app’s house display screen rebuild. Drive’s builders favored Kotlin’s improved syntax and null enforcement, making it simpler to provide code.
“We had been utilizing RxJava, however began wanting into changing that with coroutines,” stated Dale Hawkins, the options crew lead for Google Drive. “This led to a extra pure alignment between coroutines and Jetpack Compose. After a deep dive into Compose, we got here away with a transparent understanding of how Compose has quite a few advantages over the Views-based method.”
Following the Kotlin exploration, Dale experimented with Jetpack Compose. “I used to be happy with how simple it was to construct the UI utilizing Compose. So I continued the experiment after that week,” stated Dale. “I ultimately rewrote the function utilizing Compose.”
Utilizing Compose
Shortly after experimenting with Jetpack Compose, the Drive crew determined to make use of it to fully rebuild the app’s house display screen UI.
“We wished to make some main adjustments to match those being accomplished for the online model, however that undertaking had a several-month head begin. We wished to launch the Android model shortly after the online adjustments went stay to make sure our customers have a seamless Google Drive expertise throughout gadgets,” stated Dale.
The Drive crew’s experimentation and testing with Jetpack Compose confirmed that the brand new toolkit was highly effective and dependable and that it might allow them to maneuver sooner. With this in thoughts, the Drive crew determined to step away from their previous codebase and embrace Jetpack Compose for the app’s house display screen replace. Not solely wouldn’t it be faster and simpler, however it might additionally higher put together the crew to simply make future UI adjustments.
Utilizing Android’s steerage for structure
Earlier than going all-in with Jetpack Compose, Drive builders wished to restructure the appliance by implementing a totally new app structure. Drive builders adopted Android’s official structure steerage to use structural adjustments, paving the best way for the brand new Kotlin codebase.
“The really helpful structure reinforces good separation between layers,” stated Quintin Knudsen, an Android engineer for Google Drive. “We work in a extremely dynamic surroundings and wish to have the ability to modify to any app adjustments. Utilizing well-defined and impartial layers helps isolate any adjustments or UI necessities. The suggestions from Android provided sound methods to construction the layers.” With a transparent separation between the app’s information and UI layers, builders might work in parallel to considerably pace up testing and improvement.
Drive builders additionally relied on Mappers and UseCases when creating the brand new structure. These patterns allowed them to create versatile code that’s simpler to handle. Additionally they uncovered flows from their ViewModels to make the UI reply instantly to any information adjustments, making it a lot less complicated to implement and perceive UI updates.
Much less code, sooner improvement
With the app’s newly improved structure and Jetpack Compose, the Drive crew was in a position to develop the app’s new house display screen in lower than half the time that they anticipated. Additionally they applied the brand new code and completed high quality assurance testing almost seven weeks forward of schedule.
“Due to Compose, we had the groundwork accomplished inside a few weeks. We delivered an amazing implementation over a month forward of schedule, and it’s been praised by product, UX, and even different engineering groups,” stated Dale.
Regardless of having fewer options, the unique house display screen required over 12,000 strains of code. The brand new Compose-based house display screen has many new options and solely required 5,100 strains of code—a 57% discount. Having much less code makes it a lot simpler for builders to keep up the app and implement any updates.
Testing the brand new UI in Jetpack Compose additionally required considerably much less code. Earlier than Compose, Drive builders used roughly 9,000 strains of code to check about 62% of the UI. With Compose, it took solely 2,200 strains to check over 80% of the brand new UI.
Wanting ahead
A brand new and improved app structure paired with Jetpack Compose allowed Drive builders to rebuild the app’s house display screen UI sooner and simpler than they may’ve imagined. The Drive crew plans to develop its use of Compose inside the software for issues like supporting massive dynamic shows and textual content resizing.
“As we work on new tasks, we’re taking the chance to replace older UI code to utilize our new structure and Compose. The brand new code will probably be objectively higher and options will probably be simpler to write down, check, and keep,” stated Dale.
Get began
Enhance app structure utilizing Android’s official structure steerage and optimize your UI improvement with Jetpack Compose.