Carousell Siaw Young Feb 26, 2019

Building a Dynamic UI System at Carousell (Part 2)

Article Summary

Siaw Young from Carousell reveals how they built a server-driven UI system that lets them ship features without app releases. Think HTML for mobile apps—but way more powerful.

Carousell's engineering team developed a dynamic UI system called Fieldsets to solve a critical problem: how to support hundreds of product categories with unique attributes without hardcoding each one. This deep dive explains the architecture of their JSON-based schema that powers everything from sell forms to listing details.

Key Takeaways

Critical Insight

Carousell's Fieldset system decouples UI from business logic, enabling server-driven updates that eliminate the need for app releases while creating multiplicative development velocity through component reuse.

Part 3 reveals the surprising history behind this system and the technical challenges they haven't discussed yet.

About This Article

Problem

Carousell needed to build listing details pages by pulling data from multiple backend services. The Listing service provided the content while the Fieldset service handled UI rules. The tricky part was the server-side logic required to insert attribute values into the right field positions within the JSON schema.

Solution

Siaw Young's team built a gateway that makes sequential API calls to fetch listing data and the matching fieldset. It then merges them by matching field_name identifiers and populates the value property in each field's meta object. The complete fieldset gets returned to the client.

Impact

This approach lets teams render dynamic UIs across different parts of the product. Sell forms, listing details, search filters, and search results all use the same JSON-based fieldset architecture. Components like picker and radio can be reused across different features without rewriting UI logic for each new category or product type.