A three part series on how we built a Compose based architecture with Mavericks in the Airbnb Android app
Overview
The article introduces Trio, a framework developed by Airbnb for building a Compose-based architecture in their Android app, leveraging the open-source Mavericks library for state management. It discusses the challenges faced with the previous Fragment-based architecture and outlines how Trio addresses these issues through type-safe navigation, state management, and improved communication between screens.
What You'll Learn
1
How to implement a Compose-based architecture using Trio
2
Why type-safe navigation is crucial in modular Android applications
3
How to manage state effectively in Jetpack Compose with Mavericks
Prerequisites & Requirements
- Familiarity with Jetpack Compose and state management concepts
- Basic understanding of the Mavericks library(optional)
Key Questions Answered
What is Trio and how does it improve Android app architecture?
Trio is a framework developed by Airbnb for building features in a Compose-based architecture, addressing challenges faced with Fragment-based architecture. It standardizes state management and navigation, ensuring type safety and improving communication between screens, ultimately enhancing the development experience.
What challenges did Airbnb face with Fragment-based architecture?
Airbnb encountered several challenges with Fragment-based architecture, including unclear ViewModel scoping, difficulties in communication between Fragments, synchronization issues with navigation and state changes, and challenges in testing UI components effectively. These issues motivated the development of Trio.
How does Trio ensure type-safe navigation between screens?
Trio employs a structured approach where each screen, called a Trio, has defined Args and Props, ensuring that navigation and communication between screens are type-safe. This design helps avoid runtime errors and enhances the modularity of the application.
What are the core components of the Trio architecture?
The Trio architecture consists of self-contained blocks called Trios, each containing its own ViewModel, State, and UI. This structure allows for nesting Trios, facilitating dynamic communication and type-safe navigation across different parts of the application.
Key Statistics & Figures
Duration of Trio development
More than two years
Trio has been in production for over a year and a half, powering a significant portion of Airbnb's Android app.
Technologies & Tools
State Management Library
Mavericks
Used for managing application state within the ViewModel in a Compose-based architecture.
UI Framework
Jetpack Compose
Utilized for building the user interface in a declarative manner.
Key Actionable Insights
1Adopting a Compose-based architecture can significantly streamline your Android development process by reducing boilerplate code and enhancing state management.As the industry moves towards more declarative UI frameworks like Jetpack Compose, transitioning to such architectures can help teams stay current and improve productivity.
2Implementing type-safe navigation using frameworks like Trio can prevent common runtime errors associated with navigation in Android applications.By defining clear interfaces for navigation and communication, developers can ensure that their applications are more robust and easier to maintain.
3Utilizing the Mavericks library for state management can simplify the handling of complex UI states in your applications.Mavericks allows developers to model UI as a function of state, making it easier to reason about and test UI components.
Common Pitfalls
1
A common mistake is relying too heavily on Fragment-based architecture, which can lead to unclear ViewModel scoping and synchronization issues.
This happens because Fragments manage their own lifecycle and navigation independently, making it difficult to coordinate state changes and navigation flows effectively.
Related Concepts
Jetpack Compose
Mavericks Library
Fragment-based Architecture
Type-safe Navigation