Migrating rebuy Android App to Jetpack Compose for Enhanced Development
Boosting Stability and Development Speed by migrating to Redux Architecture, Kotlin Coroutines and Jetpack Compose as the key technologies
Introduction
Operating in Germany and Austria the rebuy Android app is widely used as a platform for buying and selling used electronics as well as media products for a fixed price with over 1 million downloads on Google Play Store. We have a strong dedication to enhancing productivity and streamlining our workflows, with constantly striving to improve the tech stack by staying up to date with the latest industry developments.
As part of this ongoing effort, me and my app development team have chosen Jetpack Compose as our tool for future development. Jetpack Compose is a declarative toolkit for developing native UIs on Android, and we were hoping to create even better experiences for our users.
Achieving more with less effort
At the end of 2021, our rebuy Android app utilized a custom MVVM architecture, relying heavily on Android XML-based views, custom adapters, Fragment navigation component and rxJava2 as a backbone for asynchronous workloads. However, this approach resulted in boilerplate code, chains of dependencies, inefficiencies, and also complex error handling. Fortunately, with the release of Jetpack Compose 1.0, we saw potential in addressing some of these issues through its declarative nature and powerful composition capabilities.
Upon initial validations, it became evident that adopting Jetpack Compose would require us to rethink our app architecture to ensure compatibility with the current code base. Consequently, we proposed a step-by-step migration plan that involved replacing MVVM with Redux architecture and rxJava2 with Kotlin Coroutines for asynchronous workloads. This approach aimed to help us migrate from Android Views to Jetpack Compose as our preferred UI toolkit while also addressing the other mentioned issues with our current app.
Establishing a connection between the past and future
A step-by-step migration of our rebuy app was made possible by the seamless compatibility between Jetpack Compose and traditional Android XML-based views. This compatibility allowed us to transition smoothly while keeping the app’s Fragment navigation logic intact. During the migration process, the existing XML-based Fragment views were modified to include a view container, enabling the display of user interfaces using Jetpack Compose. This approach ensured flawless integration between Android views and Jetpack Compose’s declarative user interfaces.
Throughout each step of Fragment migration, we replaced rxJava2 and MVVM view model logic with a combination of Kotlin Coroutines and Redux. Temporary wrapper code was added where necessary to facilitate this transition between the two architectures. This refactoring not only improved the overall code structure and testability but also introduced the powerful state management capabilities offered by the Redux construct. The app continued running in the production system for a year, adopting an MVVM/Redux hybrid approach while progressively incorporating more pure Jetpack Compose views into its interface.
What we learned
Thanks to Jetpack Compose, our team was able to build and customize app user interfaces more efficiently, leading to faster development speeds. The reduction in boilerplate code and improved component reusability contributed to this acceleration. Integrating the Redux architecture with Jetpack Compose ensured a clear data flow and a single source of truth through the Redux State management system.
Through the step-by-step migration of approximately 40 screens, my team and I could harness the advantages of Jetpack Compose without disrupting the app’s existing functionalities. We noticed a significant reduction in code written, with around 50% fewer lines and approximately 33% fewer files required for each screen. This reduction not only improved code readability but also facilitated faster development iterations.
Furthermore, Jetpack Compose enhanced code reuse capabilities. The app could easily extract and reuse UI elements across screens, modules, and projects, leading to a more efficient and maintainable code base.
The Compose UI toolkit facilitated development benefits and helped us establish a solid foundation for a Material 3 based design system within the rebuy Android app. By leveraging its modular approach and reusable components, we successfully implemented a consistent and scalable design language.
Although there were some initial performance issues when dealing with long lists of content and complex views. One source for these issues was our need to understand the impact of Compose recompositions, but luckily the Android Studio Layout Inspector helped us to spot these recomposition problems. Furthermore, the Jetpack Compose library received regular updates with performance improvements. We also implemented other optimizations to bridge the performance gap between traditional Android views and Jetpack Compose, effectively mitigating these concerns.
Advancements continue
After a year of utilizing Jetpack Compose as a UI toolkit, Kotlin Coroutines for asynchronous workloads, and Redux as a base architecture, it is evident that this technology stack offers advantages in Android app development. The step-by-step transition approach, while preserving essential app logic, demonstrates the flexibility of all these libraries.
In particular, Jetpack Compose and its ease of use, customization capabilities, and composable nature make it an excellent choice for our Android app.
We experienced significant code savings and higher code reusability. The ability to create a reusable design system further enhanced the benefits of using this toolkit. Furthermore, the transition to Redux and Kotlin Coroutines improved the overall software architecture and stability of our rebuy app, resulting in a high crash-free session rate of 99.9% for currently around 20,000 daily active rebuy Android app customers.
Looking towards the future, my team and I aim to replace the old Fragment navigation logic with Compose navigation completely. The goal is to have a pure Jetpack Compose app in place, further leveraging the advantages and capabilities offered by this innovative technology.
