1.3.23

Зачем мы внедрили Server Driven UI

Зачем мы внедрили Server Driven UI
No items found.

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.

Eщё про команду:
Что мы делаем, чтобы не выгорать, а гореть своей работой
Что мы делаем, чтобы не выгорать, а гореть своей работой
Команда iOS-разработчиков
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Главное о команде
Главное о команде
Команда iOS-разработчиков
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Почитать о других:
Чем живет команда Digital?
Чем живет команда Digital?
Команда Digital
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Команда-швейцарский нож: сообщество Java в Сбере
Команда-швейцарский нож: сообщество Java в Сбере
Команда Java-разработчиков
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Главное о команде
Главное о команде
Команда продуктового дизайна
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Как мы упрощаем жизнь всей компании
Как мы упрощаем жизнь всей компании
Команда Fullstack разработчиков
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Главное о команде
Главное о команде
Команда Fullstack разработчиков
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Невероятная десятка: синергия команд в супераппе
Невероятная десятка: синергия команд в супераппе
Продуктовый менеджмент
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.