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

  1. Общие вопросы о DivKit
  2. Вопросы о разработке с помощью DivKit
  3. Узнать больше
Совет. Если вы ищете ответ на конкретный вопрос, используйте комбинацию клавиш Ctrl + F для поиска по странице (в macOS — Cmd + F).

Общие вопросы о 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