Разработка

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

Server-Driven UI — это когда сервер с помощью API сообщает приложению, какие компоненты отображать и с каким содержимым.

Опубликовано

3 года назад

18.11.2020

Автор:

AppTractor

Нативные приложения по-прежнему являются лучшим выбором для компаний, которые хотят расширяться и охватить миллионы людей за счет своего пользовательского интерфейса и производительности. Это заявление может вызвать споры у многих людей, но мы не собираемся обсуждать, какая платформа лучше. Вместо этого мы узнаем, как получить больший контроль над тем, что вы показываете в приложении, с помощью серверного пользовательского интерфейса — Server-Driven UI.

Мне всегда было интересно, как такие приложения, как Airbnb, Flipkart и Swiggy, обновляют свой интерфейс на лету. Даже если я не обновлял приложение, Flipkart показывает разные пользовательские интерфейсы во время фестивалей, а Swiggy всегда меняет свой интерфейс в зависимости от местоположения устройства. А вам интересно, как они это делают?

Что такое Server-Driven UI — пользовательский интерфейс, управляемый сервером?

Server-Driven UI — это когда API сообщает клиенту, какие компоненты отображать и с каким содержимым. Это может быть реализовано на всех трех основных платформах: Android, iOS и в веб. На мой взгляд, этот тип разработки делает нативные приложения более реактивными и управляемыми.

Как сервер контролирует UI?

Теоретически это просто: мы делаем запрос к серверу, а затем получаем ответ JSON, в котором будет логика того, что нужно показать на экране. Исходя из логики, мы должны визуализировать в представлении встроенные компоненты пользовательского интерфейса. Это обеспечивает высокое качество пользовательского опыта и позволяет компаниям лучше контролировать то, что пользователи могут видеть. Посмотрите на изображение ниже, чтобы получить общее представление о том, как ответ сервера может обуславливать представления:

Если мы хотим изменить порядок элементов в пользовательском интерфейсе, например строку действий поместить под изображение, а затем вставить заголовок, нам просто нужно изменить ответ сервера:

Точно так же, если мы хотим включить совершенно другой компонент (например, полноразмерную кнопку под заголовком) и удалить строку действия, нам снова просто нужно изменить ответ:

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

Преимущества Server-Driven UI

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

Я считаю, что это беспроигрышный вариант.

Более глубокий взгляд на Server-Driven UI

Вряд ли вы, как индивидуальные разработчики, сможете создать собственную платформу SDUI, поэтому я хотел бы использовать Lona, библиотеку SDUI от Airbnb для объяснения концепции.

Есть много других библиотек:

Epoxy от Airbnb
Litho от Facebook
Proteus от Flipkart
Graywater от Tumblr

Возвращаясь к сути, Airbnb использует пользовательский интерфейс на основе компонентов, такой как Jetpack Compose. Когда формат JSON получен с сервера, разработчики приложения обрабатывают компоненты на основе строк в JSON.

Формат JSON

Для простоты давайте рассмотрим очень примитивный JSON:

Тип ноды определяет, какой тип компонента должен быть использован в представлении, например, строка заголовка, строка действия и т.д. Узел Content предоставляет содержимое для отображения в расширенном представлении. Например, если мой компонент — строка заголовка, то заголовок и подзаголовок содержат содержимое, которое будет отображаться в полях заголовка и подзаголовка. Узел Action используется для определения действий активных компонентов, таких как клик или навигация, они определены в ноде onPress.

Проблемы управления версиями в Server-Driven UI

Предположим, вы недавно выпустили свое приложение с SDUI, а через несколько дней разместили обновление в Play Store и включили через API новые компоненты, которые должны быть использованы в представлении.

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

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

Давайте посмотрим, как Airbnb предлагает решение проблем с версиями. Ниже представлен формат JSON для уже опубликованного компонента заголовка в Версии 1.

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

Поскольку у нас нет доступа к minVersion в предыдущей версии приложения, проблем не возникнет.

Jetpack Compose и Server-Driven UI (будущее)

Jetpack Compose — это новая библиотека от команды Android, которая находится в ранней стадии разработки. Но в конечном итоге он изменит то, как мы разрабатываем пользовательский интерфейс в Android.

JetPack Compose сочетает в себе модель реактивного программирования с краткостью и простым кодом с использованием языка программирования Kotlin. Кроме того, он полностью декларативен, то есть вы описываете свой пользовательский интерфейс, вызывая ряд функций, которые преобразуют данные в иерархию пользовательского интерфейса, что более удобно для построения макетов с помощью SDUI, чем использование традиционных XML-форматов .

Хотя у нас есть продвинутые библиотеки, такие как Litho, Epoxy и другие от крупных технологических компаний, удобнее иметь собственное решение. Вот почему Jetpack Compose станет популярен в ближайшем будущем.

Чтобы узнать больше о JetPack Compose, прочтите следующие статьи:

Подкасты: