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 information on-line. With Drive, customers can synchronize, share, search, edit, and even pin specified information and content material for protected and safe offline use.
Lately, Drive’s builders revamped the applying’s residence display to offer a extra seamless expertise throughout units, matching updates made to Google Drive’s net 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 scuffling with 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 useful structure and Jetpack Compose, Android’s fashionable 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 residence display rebuild. Drive’s builders preferred Kotlin’s improved syntax and null enforcement, making it simpler to provide code.
“We had been utilizing RxJava, however began trying into changing that with coroutines,” mentioned 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,” mentioned Dale. “I ultimately rewrote the characteristic utilizing Compose.”
Utilizing Compose
Shortly after experimenting with Jetpack Compose, the Drive crew determined to make use of it to utterly rebuild the app’s residence display UI.
“We needed to make some main adjustments to match those being executed for the net model, however that undertaking had a several-month head begin. We needed to launch the Android model shortly after the net adjustments went stay to make sure our customers have a seamless Google Drive expertise throughout units,” mentioned 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 residence display replace. Not solely would it not 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 needed to restructure the applying by implementing a totally new app structure. Drive builders adopted Android’s official structure steerage to use structural adjustments, paving the way in which for the brand new Kotlin codebase.
“The really useful structure reinforces good separation between layers,” mentioned Quintin Knudsen, an Android engineer for Google Drive. “We work in a extremely dynamic setting and want to have the ability to regulate to any app adjustments. Utilizing well-defined and unbiased 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 knowledge and UI layers, builders may work in parallel to considerably velocity 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 knowledge 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 residence display 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 executed inside a few weeks. We delivered a terrific implementation over a month forward of schedule, and it’s been praised by product, UX, and even different engineering groups,” mentioned Dale.
Regardless of having fewer options, the unique residence display required over 12,000 strains of code. The brand new Compose-based residence display 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 take care of 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 residence display UI sooner and simpler than they might’ve imagined. The Drive crew plans to increase its use of Compose throughout the software for issues like supporting massive dynamic shows and textual content resizing.
“As we work on new initiatives, 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 jot down, check, and keep,” mentioned Dale.
Get began
Enhance app structure utilizing Android’s official structure steerage and optimize your UI improvement with Jetpack Compose.