Server-Driven UI (SDUI) — это система для динамичного и гибкого пользовательского интерфейса, когда сервер посредством API сообщает приложению, какие компоненты и с каким контентом отображать.

‍Зачем нам это понадобилось

В какой-то момент в Альфа Банке мы стали внедрять виджеты в наши мобильные приложения. Виджеты – это независимые микромодули с собственным жизненным циклом и собственным способом получения данных, которые конфигурируются извне. Созданный виджет можно добавлять в разные места приложения, проводить с его помощью A/B−тесты поведения пользователей и легко переконфигурировать его под задачи.

Вопрос с конфигурацией оказался камнем преткновения — в итоге мы получили огромную библиотеку виджетов, которые необходимо поддерживать и развивать. Так мы поняли, что нам нужен более гибкий Server Driven UI, максимально приближённый к дизайн-системе.

Процесс реализации

Мы собрали инициативную группу с обеих платформ (Android и iOS), чтобы сразу тиражировать подход на все команды разработки сервисов для мобильных приложений. Начали с разработки единой документации по всем платформам и для бэкенда, и для фронтенда — так мы минимизировали ситуации рассинхрона в действиях команд.

Дальше — отобрали все необходимые сущности UI компонентов типа цветов, типографики и спейсинга, атомов (способов описания повторяющихся элементов), DTO моделей и добавили их в систему SDUI. Server Driven UI в нашем случае — это подход, использующий JSON схему и позволяющий гибко и динамично сконфигурировать и отрисовать любой UI компонент прямо с сервера. 

Для добавления нового компонента в систему SDUI разработчику необходимо составить JSON схему совместно с разработчиками на других платформах, провести ревью схемы и написать код на фронте. Дизайнеры со своей стороны описывают возможные состояния интерфейса и изменяемые параметры. Такой процесс позволил держать компоненты всегда в актуальном состоянии и использовать как единую точку правок для разных платформ. 

Для того чтобы использовать SDUI в виджетах мы разработали специальный Server Driven Ui Widget, который маппится к системе SDUI по полю Content в Layout элементе. 

Плюсы‍

В итоге мы получили возможность динамичного управления фичами на экране и разнообразную вёрстку с zero coding.

‍