Google Drive reduce code and improvement time in half with Jetpack Compose and new structure

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 providers, 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 secure and safe offline use.

Lately, Drive’s builders revamped the appliance’s residence display screen to supply 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 staff from finishing the updates in a well timed method.

As an alternative of fighting the app’s earlier tech stack to implement the replace, the Drive staff 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 staff experimented with Kotlin — which the Compose toolkit is constructed with — for a number of months earlier than planning the app’s residence display screen rebuild. Drive’s builders appreciated 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,” mentioned Dale Hawkins, the options staff 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 simple it was to construct the UI utilizing Compose. So I continued the experiment after that week,” mentioned Dale. “I finally rewrote the function utilizing Compose.”

Utilizing Compose

Shortly after experimenting with Jetpack Compose, the Drive staff determined to make use of it to fully rebuild the app’s residence display screen UI.

“We needed to make some main adjustments to match those being achieved for the net model, however that mission had a several-month head begin. We needed to launch the Android model shortly after the net adjustments went dwell to make sure our customers have a seamless Google Drive expertise throughout units,” mentioned Dale.

The Drive staff’s experimentation and testing with Jetpack Compose confirmed that the brand new toolkit was highly effective and dependable and that it could allow them to maneuver sooner. With this in thoughts, the Drive staff determined to step away from their outdated codebase and embrace Jetpack Compose for the app’s residence display screen replace. Not solely would it not be faster and simpler, however it could additionally higher put together the staff 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 appliance 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 helpful structure reinforces good separation between layers,” mentioned Quintin Knudsen, an Android engineer for Google Drive. “We work in a extremely dynamic atmosphere and want to have the ability to alter to any app adjustments. Utilizing well-defined and impartial layers helps isolate any adjustments or UI necessities. The suggestions from Android supplied 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. In addition they uncovered flows from their ViewModels to make the UI reply instantly to any information adjustments, making it a lot easier to implement and perceive UI updates.

Much less code, sooner improvement

With the app’s newly improved structure and Jetpack Compose, the Drive staff was capable of develop the app’s new residence display screen in lower than half the time that they anticipated. In addition they carried out the brand new code and completed high quality assurance testing practically seven weeks forward of schedule.

“Because of Compose, we had the groundwork achieved 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 screen required over 12,000 traces of code. The brand new Compose-based residence display screen has many new options and solely required 5,100 traces 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 traces of code to check about 62% of the UI. With Compose, it took solely 2,200 traces 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 screen UI sooner and simpler than they may’ve imagined. The Drive staff 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 initiatives, we’re taking the chance to replace older UI code to utilize our new structure and Compose. The brand new code can be objectively higher and options can be simpler to put in writing, take a look at, and keep,” mentioned Dale.