How Yelp Keeps Server-Driven UI Consistent Across Four Platforms

Yelp · 2026 · 3. Quy mô lớn · Độ khó: Trung bình — bài gốc

Bối cảnh

Yelp có hai app (Yelp, Yelp for Business) trên Web, iOS, Android: sáu biến thể. Design system Cookbook giữ component (nút, màu…) nhất quán giữa ba nền tảng, do đội Design Systems bảo trì.
CHAOS là framework server-driven UI (SDUI) của Yelp (bài 2024): backend Python trả về mô tả giao diện, client vẽ. Trước CHAOS, mỗi team tự làm SDUI riêng; cùng một cái nút mà hai giải pháp đặt tên thuộc tính, cách xử lý action, giá trị kích thước khác nhau. Backend thành nền tảng thứ tư cần Cookbook.

Konbini: mỗi component có một định nghĩa interface bằng JSON (tên, version, tham số và kiểu, chủ sở hữu). Push vào repo component_interfaces thì Jenkins sinh và phát hành bốn thư viện: Kotlin (Android), Swift (iOS), Python (backend, để serialize), TypeScript (Web). Vì sinh từ một nguồn, tên tham số giữa backend và client không thể lệch.
Token (màu, icon, gradient, shadow) serialize thành tên kèm raw_value, nằm ở repo riêng do designer quản lý.
Tương thích ngược theo spec: mỗi client có một spec file liệt kê mọi component nó hỗ trợ kèm version; spec có số version, đổi gì cũng phải tăng. Client gửi ngữ cảnh như android@23.0; backend tra spec đó để biết được gửi version nào của từng component.
Breaking change (ví dụ text từ String sang FormattedText) thì tăng major (0.8 → 1.0) và Konbini sinh sẵn hàm migrate rỗng để backport bản mới về bản cũ; mặc định hàm này báo lỗi "không hỗ trợ backport", Yelp khuyên viết logic thật để giữ view chạy được trên nhiều app cũ hơn. Backend gọi migrate khi spec của client thấp hơn.

App mobile phiên bản cũ sống rất lâu; SDUI đẩy giao diện từ server nên mọi thay đổi component phải còn đọc được bởi app đã phát hành. Gom định nghĩa về một nguồn sinh code thay cho quy ước giữa các team.

Hợp đồng giữa server và nhiều client nên là định nghĩa máy đọc được, sinh ra code cho mọi bên, không phải tài liệu.
Server biết client hỗ trợ gì (spec + version gửi kèm request) thì server chịu trách nhiệm hạ cấp dữ liệu, thay vì bắt client cũ hiểu cái mới.
Breaking change cần một đường chuyển đổi được viết ra (backport), không chỉ một số version.

Kiến trúc frontend
Yelp 2026 · Wix 2015 (client cũ gặp loại dữ liệu mới) · Tinder 2019 (manifest kiểu cho remote config)