Adopting Jetpack Compose for Etsy’s Android App

Summary

Etsy adopted Jetpack Compose as its preferred way to build Android app UIs, after a staged program that culminated in rewriting the Shop screen. Because UI toolkits are central to development, engineers created a curriculum, rebuilt internal design-system components, and used Compose’s interoperability with XML Views to migrate gradually. They then tested a full internal screen with navigation, system UI, coroutines for API data fetching, and Kotlin Flows supporting unidirectional data flow alongside Macramé. After Compose bottom sheets reached real buyers and sellers, the Shop rewrite took about three months and entered an A/B experiment against the old implementation. The new screen improved initial rendering time by 5%, made interactions more fluid, and improved several user actions, while engineers reported fewer lines of code, easier testing, greater business-logic coverage, and higher satisfaction.

Takeaways

1. 1

   Compose interoperability with XML Views enabled Etsy to introduce the toolkit gradually, including Compose bottom sheets hosted inside Views-based screens.

2. 2

   The Shop screen rewrite improved initial rendering time by 5% and increased conversion rate, add-to-cart actions, checkout starts, shop favoriting, and listing views.

3. 3

   Macramé’s unidirectional data flow and Compose’s stateless components decoupled state from the UI, isolated business logic for testing, and helped increase test coverage.