Macramé: Untangling the Knot on the Etsy Android Listing Screen

The Etsy Android app's listing screen, crucial for showcasing products, had become complex and difficult to maintain due to rapid code changes. To address this, the team implemented "Macramé," a new architecture based on immutable data and reactive UI. The core of the architecture is an immutable State object representing the data model, passed to the UI via StateFlow. Data updates are handled by Events, dispatched to Handlers for processing and State or SideEffects updates. A ListAdapter and RecyclerView handle asynchronous UI changes. Unit test coverage increased significantly, validating the use of simple Handlers for business logic. Despite some boilerplate and complexity for simple screens, the architecture improves code maintainability and performance. Time to First Content decreased by 18%, leading to increased user engagement. The Android team has expanded Macramé's usage to other app screens, such as Cart and Shop, written in Jetpack Compose.