DivKit

DivKit — библиотека для построения интерфейса по описанию, которое приходит с сервера. Бэкенд отдаёт верстку карточки в формате JSON, а приложение отрисовывает её нативными средствами платформы: Android, iOS, веб. Чтобы изменить экран, достаточно изменить JSON на сервере — выпускать новую версию приложения не нужно.

Как работает DivKit

Сервер описывает карточку. Карточка — это JSON-документ: дерево элементов (текст, изображение, контейнер, галерея и другие) с их размерами, оформлением и действиями. Повторяющиеся части выносятся в шаблоны.
Приложение передаёт JSON в DivKit. SDK разбирает документ и строит из него нативный интерфейс.
Пользователь взаимодействует с карточкой. Нажатия и другие события запускают действия: переключают состояния, меняют переменные, открывают ссылки или передаются приложению.
Карточка меняется без перезапуска. Переменные, выражения и таймеры обновляют содержимое на лету, а сервер может дозагрузить новую разметку.

Основные понятия

Карточка и элементы — из чего состоит разметка и как элементы располагаются друг относительно друга. См. Типовую структуру и Группировку элементов.
Шаблоны — переиспользуемые заготовки элементов, которые сокращают JSON. См. Шаблоны.
Переменные и выражения — значения, от которых зависят содержимое и внешний вид карточки. См. Переменные и Вычисляемые выражения.
Действия и состояния — реакция карточки на пользователя: переключение состояний, анимации, дозагрузка данных. См. Действия с элементами и Анимацию.
Расширения — способ добавить в карточку логику или элемент, которых нет в DivKit. См. Кастомизацию.

С чего начать

Разработчику приложения — подключить SDK: Android, Jetpack Compose, iOS, Kotlin Multiplatform.
Автору карточек — собрать первую карточку в DivKit Playground и разобраться с расположением и размерами элементов.
Бэкенд-разработчику — генерировать JSON из кода с помощью Kotlin DSL.
Для справки — полное описание элементов и их свойств, начиная с корневой структуры карточки.

Узнать больше

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit

Была ли статья полезна?

Типовая структура