Вопросы и ответы

Общие вопросы о DivKit

Что такое DivKit?

Кроссплатформенная библиотека, основанная на подходе Server-Driven UI, которая позволяет строить пользовательский интерфейс приложений и сайтов на основе описания верстки в формате JSON.

Что такое Server-Driven UI?

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

Такая концепция позволяет:

• Изменять внешний вид приложения и добавлять новые визуальные элементы без выпуска новой версии приложения.
• Использовать одну и ту же верстку страницы на разных платформах.

Какие платформы поддерживает DivKit?

Клиентская часть DivKit поддерживает iOS, Android, Web.

Разрешено ли публиковать приложения на основе Server-Driven UI в сторах Apple и Google?

Правила AppStore и Google Play не запрещают обновлять пользовательский интерфейс приложений на основе данных, полученных с сервера, при условии, что эти обновления не меняют первоначальный смысл приложения.

Можно ли использовать DivKit в коммерческих приложениях?

Да. DivKit — это библиотека с открытым исходным кодом, выпущенная под лицензией Apache License, Version 2.0.

Насколько быстро работает DivKit?

По нашему опыту, отрисовка «тяжелых» страниц в среднем занимает менее 16 миллисекунд. DivKit работает многопоточно и может повторно использовать ранее отрисованные элементы. Это позволяет быстро просчитывать текстовые элементы (например, большие объемы текста или таблицы) и в целом ускорить работу интерфейса.

Вопросы о разработке с помощью DivKit

Откуда берутся данные для карточек?

Описание карточки в формате JSON можно хранить на сервере или локально на устройстве.

Чтобы генерировать описания верстки карточек в формате JSON, можно использовать библиотеку json-builder, которая доступна для Kotlin, TypeScript и Python.

Как должен выглядеть макет карточки?

Верстка карточки должна быть описана в формате JSON по определенной схеме.

Как быстро протестировать свою верстку?

Чтобы подготовить JSON-описание верстки и увидеть превью карточки в веб-формате, можно использовать DivKit Web Playground. Затем вы можете передать ваш JSON-файл в приложение DivKit Playground для Android или iOS и посмотреть, как верстка отображается на мобильном устройстве.

Как реализовать интерактивные элементы (переходы, действия, нажатия)?

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

Также DivKit поддерживает использование переменных и триггеров. Триггер срабатывает при изменении значения переменной и вызывает одно или несколько действий.

Можно ли менять верстку на основе динамических данных?

Да, например с помощью переменных. Если значение какого-либо свойства задано через переменную, при изменении переменной представление будет перестраиваться.

Как обрабатывается логика (например, действия при изменении значений полей)?

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

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

Есть ли поддержка анимации?

Да, DivKit поддерживает несколько видов анимации: переходы при переключении состояний, нажатия на кнопки, а также появление и исчезновение элементов.

Можно ли использовать DivKit для верстки отдельных экранов приложения?

Да, можно. Например, в приложениях Яндекса часто карточки DiKit интегрируют на один или несколько экранов.

Можно ли реализовать форму для ввода данных?

Да, для этого используйте элемент div-input, который предназначен для ввода текста.

Есть ли поддержка accessibility (доступности)?

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

Есть ли поддержка локализации?

Специальные механизмы локализации не предусмотрены. Чтобы локализовать элементы интерфейса, сформируйте отдельные JSON-файлы верстки для каждого языка.

Как работает серверная часть (бэкенд)?

У нас нет готового решения, с помощью которого можно развернуть сервер. DivKit содержит библиотеки для формирования JSON-файлов верстки, которые вы можете интегрировать в свой сервер.

Как реализовать светлую и темную темы?

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

Как правильно логировать карточки?

Для правильного логирования параметр log_id должен быть уникальным. Например, при логировании карточек в карусели у каждой карточки должен быть свой log_id, иначе залогирована будет только первая карточка, а все остальные будут считаться дублями.

Как отключить анимацию действия?

В элементе animation укажите "name": "no_animation".

Как создать карточку с Lottie-анимацией?

Чтобы добавить Lottie-анимацию, в элементе image задайте массив extensions. Подробнее см. в разделе Кастомизация.

Как создать пустой блок?

Если нужен блок, который будет просто занимать место, то используйте элемент separator и укажите для него прозрачный цвет в параметре color.

Можно ли создавать контейнеры с одним элементом?

Не стоит, это отразится на производительности. Постарайтесь не создавать лишних оберток.

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

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news

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

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