Part three on how we built a Compose based architecture with Mavericks in the Airbnb Android app
Overview
This article discusses the implementation of Trio, Airbnb's framework for Jetpack Compose screen architecture in Android, focusing on the use of Props for type-safe communication between ViewModels. It highlights the development history, adoption success, and tooling improvements that have enhanced the developer experience at Airbnb.
What You'll Learn
1
How to implement Props for communication between Trios in Jetpack Compose
2
Why using a standardized Props system improves type safety in Android development
3
When to apply the ScreenFlow Trio for managing multiple screens
Prerequisites & Requirements
- Understanding of Jetpack Compose and state management concepts
- Familiarity with Android Studio and Kotlin programming(optional)
Key Questions Answered
How does Trio facilitate communication between ViewModels in Android?
Trio uses Props, which are Kotlin properties held in a data class, to enable type-safe communication between parent and child Trios. Props can change over time, allowing the parent to provide updated data to children, ensuring that each child has access to the latest state and can communicate back to the parent through callbacks.
What is the significance of Props in the Trio framework?
Props are crucial in the Trio framework as they allow for simplified, type-safe communication between ViewModels. They enable a parent Trio to pass data and callbacks to child Trios, ensuring that the child screens can react to changes in state and communicate events back to the parent, enhancing modularity and maintainability.
What are the benefits of using ScreenFlow in Trio?
ScreenFlow in Trio simplifies the management of multiple screens by automatically handling child transactions and rendering the top child in the UI. It also provides a shared Props class to its children, which allows for coordinated navigation and shared data, streamlining the development process for complex screen flows.
What has been the adoption success of Trio at Airbnb?
As of March 2024, Airbnb has over 230 Trio screens in production, reflecting significant adoption and positive feedback from developers. Many engineers appreciate the clear patterns and the improved development experience that Trio provides, leading to faster development cycles and cleaner code.
Key Statistics & Figures
Number of Trio screens in production
230
As of March 2024, indicating significant adoption of the Trio framework at Airbnb.
Technologies & Tools
Frontend
Jetpack Compose
Used for building the UI components in the Trio framework.
Backend
Mavericks
Airbnb's open-source state management library that Trio is built upon.
Key Actionable Insights
1Implementing Props in your Jetpack Compose applications can significantly enhance type safety and communication between components.By using Props, developers can ensure that data flows correctly between parent and child screens, reducing the likelihood of runtime errors and improving maintainability.
2Utilizing the ScreenFlow infrastructure can simplify complex navigation patterns in your applications.ScreenFlow manages child transactions automatically, allowing developers to focus on building features rather than managing navigation state manually.
3Investing in developer tooling, such as IDE plugins, can greatly enhance productivity and streamline workflows.Airbnb's in-house Android Studio Plugin automates repetitive tasks and helps enforce best practices, making it easier for developers to adopt the Trio framework.
Common Pitfalls
1
Failing to properly manage the lifecycle of Trios can lead to memory leaks or unexpected behavior.
Developers should ensure that Props are correctly passed and that child Trios are properly initialized and destroyed to maintain application stability.
Related Concepts
Jetpack Compose
State Management In Android
Modular Architecture Patterns