Server Driven UI (SDUI) Server Driven UI (SDUI) — архитектурный… — Системный Аналитик

Системный Аналитик@sys_sa · 19.1K subscribers Open in TelegramOpen

Server Driven UI (SDUI)

Server Driven UI (SDUI) — архитектурный подход, при котором сервер определяет не только данные, но и структуру пользовательского интерфейса (какие компоненты, в каком порядке и с какими параметрами отрисовать на клиенте)

В обычном приложении клиент «знает», как показать экран

В SDUI клиент превращается в «движок рендеринга» — он просто отрисовывает то, что пришло с сервера в виде декларативного описания (обычно JSON)

Подход также называют BDUI (Backend-Driven UI)

В традиционной (client-driven) модели сервер отдаёт только данные, а клиент решает, как их показать:

Сервер

отправляет данные ({"price": 1990, "currency": "RUB"})
Клиент

знает, как отобразить эти данные на конкретной платформе

В SDUI сервер отдаёт описание интерфейса:

Сервер

отправляет компоненты и их свойства ({"type": "price_label", "props": {"text": "1 990 ₽"}})
Клиент

по описанию собирает экран из готовых нативных компонентов

Ключевое отличие: логика «что и где показать» переезжает с клиента на сервер

Как работает

Система состоит из трёх частей:

UI-кит (компонентная база) — набор реализованных на каждой платформе нативных компонентов (кнопка, карточка, баннер, список). Это «общий язык» между сервером и клиентом.

Движок рендеринга — клиентский механизм, который по описанию из JSON собирает экран: находит нужный компонент в UI-ките и передаёт ему свойства.

Контракт (директивы) — описание экрана, которое сервер отдаёт клиенту.

Типовой поток

1. На сервере формируется описание экрана (какие компоненты, порядок, свойства, действия).

2. Клиент запрашивает конфигурацию и получает JSON

3. Движок рендеринга разбирает JSON, по type находит компоненты в реестре и отрисовывает их

4. Пользователь взаимодействует (например, нажимает кнопку) — клиент выполняет действие (action), пришедшее вместе с компонентом

5. Нужно поменять экран — правка конфигурации на сервере, при следующем открытии приложения пользователи видят новый UI без обновления из стора

Принципы SDUI

Начинать с экрана, а не с данных. API проектируется под то, что нужно показать, а не под структуру БД (demand-driven подход).

Минимум логики на клиенте. Любой if/else про «что показать» — кандидат на переезд на сервер. Иначе логика дублируется на каждой платформе.

Отдавать продуктную информацию, а не доменные данные. Вместо price: 1990 + currency сервер сразу отдаёт готовую строку "1 990 ₽". Форматирование, локализация, скругления — на сервере.

Единая дизайн-система. Все клиенты используют общий UI-кит, тогда серверная инструкция «отрисуй primary-кнопку» даст одинаковый результат везде.

Внедрять инкрементально. Не переписывать всё приложение сразу, а начать с одного экрана или компонента (например, баннера на главной).

Плюсы и минусы

мгновенные обновления UI — без релизов в сторах и ожидания обновления у пользователей

кроссплатформенность из коробки — один JSON рендерится на iOS, Android, Web

простой A/B-тестинг и персонализация — разный UI разным сегментам одним изменением на сервере

единообразие платформ — все клиенты синхронны, расхождений почти нет

снижение нагрузки на мобильную разработку — фронт не верстает каждый экран с нуля

без интернета UI не загрузится; нужны кэширование и фолбэки, иначе пустые экраны

сложность старта — нужен UI-кит, движок рендеринга и серверная часть под это

двойная поддержка компонентов — компоненты живут и на клиенте (реализация), и на сервере (описание)

сложнее отладка — труднее понять, почему экран выглядит именно так (собрался динамически)

риск «зашить» бизнес-логику в UI — границы между слоями легко размыть

Где используется

Когда много платформ, а интерфейс меняется часто и под разные сегменты пользователей:

Travel- и маркетплейс-платформы — быстрые итерации UI в разделах с динамическим контентом

соцсети и стриминговые сервисы — мгновенный rollout изменений и экспериментов

e-commerce и маркетплейсы — разные раскладки витрин для разных продавцов (например, блок «Бестселлеры» только для крупных магазинов)

когда нужно обновлять интерфейс с сервера, не зависеть от сторов