Introducing Trio | Part I
Article Summary
Airbnb just open-sourced the architecture powering a significant portion of their Android app. After 2+ years of development, Trio is their answer to Fragment-based pain points.
Airbnb's engineering team built Trio, a Jetpack Compose framework that combines their battle-tested Mavericks state management library with modern Android development. This is Part 1 of a three-part deep dive into how they architected it.
Key Takeaways
- Trio enforces type-safe navigation and communication between screens at compile time
- Each Trio bundles ViewModel, State, and UI into self-contained, testable blocks
- Navigation state lives in the ViewModel, eliminating Fragment Manager sync issues
- Built on Mavericks' proven pattern: UI as a pure function of immutable state
- Solves Fragment scoping problems with explicit dependency creation and injection
Airbnb created a Compose-first architecture that maintains Mavericks' state management benefits while adding compile-time safety and eliminating Fragment complexity.
About This Article
Airbnb's Fragment-based architecture had a synchronization problem. When the ViewModel state changed, it didn't always coordinate well with Fragment Manager navigation. This made conditional navigation scenarios tricky, especially when you needed to push a screen only after updating state.
Trio puts navigation state directly into the ViewModel using Mavericks reducers. This removes the need for separate Fragment Manager calls. Navigation and state updates happen at the same time through setState, so they stay in sync.
Airbnb has used Trio to power a significant portion of production screens in their Android app for over a year and a half. Engineers can now build features in 100% Compose UI with better testability and rendering that's more predictable.