Нативные приложения по-прежнему являются лучшим выбором для компаний, которые хотят расширяться и охватить миллионы людей за счет своего пользовательского интерфейса и производительности. Это заявление может вызвать споры у многих людей, но мы не собираемся обсуждать, какая платформа лучше. Вместо этого мы узнаем, как получить больший контроль над тем, что вы показываете в приложении, с помощью серверного пользовательского интерфейса — 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 для объяснения концепции.
Есть много других библиотек:
Возвращаясь к сути, 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, прочтите следующие статьи:
- Jetpack Compose — новый и простой способ создания UI в Android
- Интересные обновления от Jetpack Compose
Подкасты:
- Android Dev Podcast #98: Большое интервью о Google и Compose
- Mobile People Talks #9: Декларативный UI – Jetpack Compose