Пару слов о Backend Driven UI

Backend Driven UI или как часто сокращают BDUI - это библиотека, фреймворк или проще говоря штука для создания динамического интерфейса на основе ответа бэкенда без изменения кода Android / iOS приложения.

Небольшой пример: в приложении есть экран с детальной информацией об игре, вам сказали что нужно добавить карусельку "похожие игры", вы идёте на экран об игре, добавляете карусельку, пересобираете apk / aab, публикуете в магазине приложений и так каждый раз, когда появляются новые изменения в дизайне деталки, в целом это нормально, обычно такие изменения заранее планируются и заливаются в пределах релиза.

Проблема тут только в частоте этих самых изменений, если в будущем экран будет наполняться всё новыми и новыми карусельками и нету четкой картины какими, спланировать полноценный релиз становится сложнее, в таком случае появляется потребность в изменении разметки экрана на основе ответа бэкенда, для чего и были придуманы BDUI фреймворки.

Для более глубокого понимания работы BDUI глянем как был сделан DivKit:

1) Первым делом нужен формат для ответа бэкенда, по которому будет строиться экран, пример из DivKit, это чем-то напоминает xml в Android, принцип похожий: также парсим и строим интерфейс, только на основе JSON'а, который ещё нужно получить запросом на бэкенд.

Кто-то может спросить а почему бы просто не отдавать xml файлы с разметкой? Можно конечно, если вы ярый фанат треугольных скобочек) А если серьёзно читайте следующий пункт и у вас отпадёт желание так сделать.

2) Формат ответа должен соответствовать нескольким требованиям:

- быть логичным и не иметь избыточных вещей, особенно очень важно не мудрить сложную навигацию, у меня был горький опыт работы с самописным BDUI в котором была навигация, DivKit в этом плане вообще не реализует никакую навигацию, есть только возможность открывать диалоги на основе PopupWindow.

- включать описания графических компонентов, таких как кнопки, текст, картинки, слайдеры и тд., иметь возможность настроить их: изменить размер отступов, цвет текста или другие параметры, кроме базовых компонентов нужны ещё контейнеры для создания вложенных иерархий, пример контейнеров из Android: LinearLayout / FrameLayout или если это Jetpack Compose: Row / Column

- поддерживать действия интерактивных элементов, куда же без нажатия на кнопки, обычно такая штука реализуется в виде ссылок, которые потом, как и весь формат парсятся в разные типы, пример ссылки из DivKit для показа PopupWindow:

div-action://show_tooltip?id=777

- решать проблемы с большим размером JSON'а, если элементов на экране очень много, например в DivKit для уменьшения дублирования используются шаблоны (блок templates)

3) Все перечисленные графические компоненты в формате должны быть реализованы нативно, это могут быть наследники View классов или Composable функции, в DivKit используется первое.

После парсинга JSON ответа, из всех перечисленных в нём компонентов должен получиться готовый экран из нативных элементов, важно отметить, что для больших экранов нужно предусмотреть оптимизации, например использование RecyclerView или LazyColumn, в DivKit для этого даже есть самописный пул для вьюшек!

4) Немаловажным будет обеспечить расширяемость решения, например в DivKit можно добавить свой обработчик действий, создать новый графический компонент, которого нет в существующих, поменять загрузчик картинок или провайдер шрифтов и тд.

5) Помимо простой отрисовки графических компонентов могут понадобиться переходы между их состояниями, например тёмно-синяя кнопка при нажатии становится светло-синей или при изменении значения слайдера меняется прозрачность текста, для первого случая DivKit предлагает список состояний и специальный формат
действий для перехода между ними:

div-action://set_state?state_id=1

Для второго случая в DivKit есть переменные, которые могут быть связаны с компонентами, это похоже на Data Binding Library из Android, слайдер связывается с переменной и меняет её значение, когда ползунок перемещается, чтобы поменять прозрачность текста нужно добавить специальное действие, которое выполнится только когда изменится значение переменной.

Ну и в дополнение к переходам есть ещё анимации, которые тоже можно по разному реализовать, в DivKit это сделано так.

6) Любой фреймворк или библиотека, в том числе и BDUI должны предоставлять API или точку входа, где будет происходить обработка жизненного цикла, создание нативных компонентов, привязка действий к разным событиям, работа с анимациями, состояниями, переходами между ними и тд, в DivKit точкой входа является Div2View, обычная Android вьюшка, которую можно добавить в любой экран и гибко настроить её размеры и местоположение.

В итоге принцип работы BDUI следующий: делаем обычный запрос на бэкенд, получаем JSON ответ, отдаём BDUI библиотеке, например DivKit'у, он парсит ответ, создаёт на его основе иерархию из View, добавляет обработчики действий, устанавливает свойства и вуаля экран готов!

Пишите в комментах ваше мнение и всем хорошего кода!