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 individuals 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 dwelling display to offer a extra seamless expertise throughout units, matching updates made to Google Drive’s internet model. Nevertheless, 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 battling 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 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 dwelling display rebuild. Drive’s builders appreciated Kotlin’s improved syntax and null enforcement, making it simpler to supply code.
“We had been utilizing RxJava, however began wanting 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 strategy.”
Following the Kotlin exploration, Dale experimented with Jetpack Compose. “I used to be happy with how straightforward it was to construct the UI utilizing Compose. So I continued the experiment after that week,” mentioned 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 dwelling display UI.
“We needed to make some main modifications to match those being completed for the online model, however that venture had a several-month head begin. We needed to launch the Android model shortly after the online modifications went reside 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 quicker. With this in thoughts, the Drive crew determined to step away from their previous codebase and embrace Jetpack Compose for the app’s dwelling 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 modifications.
Utilizing Android’s steering for structure
Earlier than going all-in with Jetpack Compose, Drive builders needed to restructure the appliance by implementing a very new app structure. Drive builders adopted Android’s official structure steering to use structural modifications, paving the way in which for the brand new Kotlin codebase.
“The really helpful structure reinforces good separation between layers,” mentioned 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 modifications. Utilizing well-defined and impartial layers helps isolate any modifications 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 growth.
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. In addition they uncovered flows from their ViewModels to make the UI reply instantly to any information modifications, making it a lot less complicated to implement and perceive UI updates.
Much less code, quicker growth
With the app’s newly improved structure and Jetpack Compose, the Drive crew was capable of develop the app’s new dwelling display in lower than half the time that they anticipated. In addition they applied the brand new code and completed high quality assurance testing almost seven weeks forward of schedule.
“Because of Compose, we had the groundwork completed inside a few weeks. We delivered an excellent 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 dwelling display required over 12,000 strains of code. The brand new Compose-based dwelling 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 dwelling display UI quicker and simpler than they might’ve imagined. The Drive crew plans to increase 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 shall be objectively higher and options shall be simpler to put in writing, check, and preserve,” mentioned Dale.
Get began
Enhance app structure utilizing Android’s official structure steering and optimize your UI growth with Jetpack Compose.
