Posted by Nick Butcher – Product Manager for Jetpack Compose, and Florina Muntenescu – Developer Relations Engineer
As one of the world's most popular cloud-based storage services, Google Drive lets people do more than just store their files online. Drive allows users to sync, share, search, edit, and even pin specific files and content for secure offline use.
Recently, Drive's developers revamped the application's home screen to provide a more seamless experience across all devices, matching updates made to the web version of Google Drive. However, the app's previous architecture and codebase would have prevented the team from completing the updates in a timely manner.
Instead of wrestling with the app's previous tech stack to implement the update, the Drive team rebuilt the homepage from the ground up using Android's recommended architecture And Jetpack ComposingAndroid's modern declarative toolkit for creating a native user interface.
Experimenting with Kotlin and Compose
The Drive team experimented with Kotlin, which built the Compose toolkit, for several months before making plans to rebuild the app's home screen. Drive developers liked Kotlin's improved syntax and zero enforcement, which made it easier to produce code.
“We were using RxJava, but started looking into replacing it with coroutines,” says Dale Hawkins, features team lead for Google Drive. “This led to a more natural alignment between coroutines and Jetpack Compose. After a deep dive into Compose, we gained a clear understanding of how Compose has numerous advantages over the Views-based approach.”
After the Kotlin exploration, Dale experimented with Jetpack Compose. “I was happy with how easy it was to build the user interface with Compose. So after that week I continued the experiment,” Dale said. “I ended up rewriting the function using Compose.”
Using composing
Shortly after experimenting with Jetpack Compose, the Drive team decided to use it to completely rebuild the app's home screen UI.
“We wanted to make some major changes to match the changes made for the web version, but that project was several months ahead. We wanted to release the Android version shortly after the web changes went live to ensure our users have a seamless Google Drive experience across all devices,” said Dale.
The Drive team's experiments and testing with Jetpack Compose showed that the new toolkit was powerful, reliable and would allow them to work faster. With this in mind, the Drive team decided to move away from their old codebase and embrace Jetpack Compose for the app's home screen update. Not only would it be faster and easier, but it would also better prepare the team to make future changes to the UI with ease.
Using Android's architectural guidelines
Before Drive developers went all-in with Jetpack Compose, they wanted to refactor the application by implementing a completely new app architecture. Drive developers followed Android's lead official architectural guideline to apply structural changes, paving the way for the new Kotlin codebase.
“The recommended architecture reinforces good separation between layers,” said Quintin Knudsen, an Android engineer for Google Drive. “We work in a very dynamic environment and need to be able to adapt to any app changes. By using well-defined and independent layers, any changes or UI requirements can be isolated. Android's recommendations provided good ways to structure the layers.” With clear separation between the app's data and UI layers, developers can work in parallel to significantly speed up testing and development.
Drive developers also relied on Mappers and UseCases when creating the new architecture. These patterns allowed them to create flexible code that is easier to manage. They have also uncovered streams from their land View models to make the UI respond immediately to any data changes, making it much easier to implement and understand UI updates.
Less code, faster development
With the newly improved architecture of the app and Jetpack Compose, the Drive team was able to develop the app's new home screen in less than half the time they expected. They also deployed the new code and completed quality assurance testing almost seven weeks ahead of schedule.
“Thanks to Compose, we had the groundwork completed within a few weeks. We delivered a great implementation over a month ahead of schedule and it is being praised by product, UX and even other engineering teams,” said Dale.
Despite having fewer features, the original home screen required more than 12,000 lines of code. The new Compose-based home screen has many new features and requires only 5,100 lines of code: a 57% reduction. Having less code makes it much easier for developers to maintain the app and implement any updates.
Testing the new user interface in Jetpack Compose also required significantly less code. Before Compose, Drive developers used about 9,000 lines of code to test about 62% of the user interface. With Composing, only 2,200 lines were needed to test more than 80% of the new user interface.
Look forward to something
A new and improved app architecture combined with Jetpack Compose allowed Drive developers to rebuild the app home screen UI faster and easier than they could have imagined. The Drive team plans to expand the use of Compose within the application for things like supporting large dynamic displays and resizing text.
“As we work on new projects, we take the opportunity to update older UI code to take advantage of our new architecture and Compose. The new code will be objectively better and the features will be easier to write, test and maintain,” said Dale.
Get started
Improve app architecture using Android official architectural guideline and optimize your UI development with Jetpack Composing.