Etsy Engineering | Code as Craft

How We Built The Deals Tab in Swift UI

Follow
In July 2023, Etsy's App Updates team set out to revamp the Updates feed into Deals, a hub for coupons and sales. The team considered developing a new tab from scratch using modern technologies such as Swift UI and Tuist. Balancing ambition with realism, the team adopted a hybrid approach, using Swift UI for modular development and previewability, while integrating with existing UIKit codebase for navigation and other functionality. Swift UI's modularity allowed them to break down views into reusable components, enabling rapid development and efficient previewing with Tuist. They implemented Decodable models for clear and efficient API parsing, simplifying view construction and handling of optionals. Preview enums were introduced to streamline the creation of mock data for complex views, enabling them to build modules even before API support was complete. However, interfacing with the existing codebase posed challenges, particularly in areas like navigation and favoriting. To address this, they created a custom @Environment struct, DealsAction, which passed navigation responsibility back to the main target while maintaining Swift UI's callAsFunction() feature. Environment objects were utilized for other functionality, such as favoriting, following shops, and logging performance metrics. This hybrid approach allowed the team to leverage the benefits of modern technologies while respecting the constraints of the legacy codebase, resulting in a successful product launch before the Cyber Week deadline.
favicon
etsy.com
etsy.com
Create attached notes ...