---
title: "Macramé: Untangling the Knot on the Etsy Android Listing Screen"
description: "The Etsy Android listing screen had accumulated nearly 200 experiments in three years, leaving a 4,000-plus-line Fragment, inconsistent patterns, low test coverage, and costly, brittle tests. Macramé replaced that legacy design with immutable state propagated through StateFlow to a reactive UI, transforming screen data into smaller ListingUiModels rendered by RecyclerView and ListAdapter. Sealed Events move through a single Dispatcher to focused Handlers, which update State, start asynchronous work, or emit SideEffects for operations such as navigation and logging. After a five-month rewrite, the new screen’s Time to First Content fell 18%, from 1,585 ms to 1,298 ms, while listings viewed rose 2.4% and business-logic test coverage reached 76%. The architecture still has wiring boilerplate, debugging challenges around Handler interactions, and possible overkill for simpler screens, but its use expanded to Cart and Shop."
---

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

[Etsy](https://yomu.fyi/company/etsy) · John Kalmi · Mar 18, 2024

**Type:** Problem & solution

## Summary

The Etsy Android listing screen had accumulated nearly 200 experiments in three years, leaving a 4,000-plus-line Fragment, inconsistent patterns, low test coverage, and costly, brittle tests. Macramé replaced that legacy design with immutable state propagated through StateFlow to a reactive UI, transforming screen data into smaller ListingUiModels rendered by RecyclerView and ListAdapter. Sealed Events move through a single Dispatcher to focused Handlers, which update State, start asynchronous work, or emit SideEffects for operations such as navigation and logging. After a five-month rewrite, the new screen’s Time to First Content fell 18%, from 1,585 ms to 1,298 ms, while listings viewed rose 2.4% and business-logic test coverage reached 76%. The architecture still has wiring boilerplate, debugging challenges around Handler interactions, and possible overkill for simpler screens, but its use expanded to Cart and Shop.

## Context

The listing screen had become difficult to maintain after nearly 200 experiments in three years. Its architecture accumulated incompatible patterns, the main Fragment exceeded 4,000 lines, and low test coverage was reinforced by complex, brittle tests that could cause unrelated continuous integration failures.

## Approach / What changed

Macramé uses an immutable State object delivered through StateFlow, transforms state into smaller ListingUiModels, and renders them with RecyclerView and ListAdapter. Sealed Events pass through a Dispatcher to focused Handlers that update State, perform asynchronous work, or emit UI-oriented SideEffects.

## Takeaways

- StateFlow delivers a single immutable listing-screen data model to the UI, while RecyclerView and ListAdapter asynchronously diff smaller vertical UI models and avoid rebinding unchanged portions.
- The rewrite reduced Time to First Content from 1,585 ms to 1,298 ms, an 18% decrease. Average listings viewed increased 2.4%, add to carts 0.43%, searches 2%, and buyer review photo views 3.3%.
- Business-logic unit-test coverage rose to 76%, but Macramé still has Event and Handler wiring boilerplate, can make complex Handler interactions harder to debug, and may be excessive for simpler screens.

**Tags:** [Android](https://yomu.fyi/topic/android), [Architecture](https://yomu.fyi/topic/architecture), [Kotlin](https://yomu.fyi/topic/kotlin), [Testing](https://yomu.fyi/topic/testing)

- Source: [Etsy](https://www.etsy.com/codeascraft/macrame-untangling-the-knot-on-the-android-listing-screen)
- Source URL: https://www.etsy.com/codeascraft/macrame-untangling-the-knot-on-the-android-listing-screen
- Ingested by Yomu: 2026-09-09T16:02:44.278Z

[Read original post](https://www.etsy.com/codeascraft/macrame-untangling-the-knot-on-the-android-listing-screen)