Есть приём, позволяющий совершенно по-новому представить работу с пользовательскими интерфейсами (UI). Можно передавать UI на клиент через различные API – так получаются серверно-управляемые пользовательские интерфейсы. Такой метод позволяет выйти на новый уровень гибкости и динамичности, трансформирует традиционные парадигмы разработки UI.

Серверно-управляемые UI существуют совсем не только в теории. Их внедряют некоторые крупнейшие игроки технологической индустрии. В качестве примеров можно привести Lyft и Airbnb. Они активно используют серверно-управляемые UI, чтобы выдавать миллионам пользователей во всём мире динамический контент и быстро предоставлять обновления.

Но что же собой представляют серверно-управляемые UI? Как они работают и почему приобретают такую важность в современной разработке на JavaScript? В данном посте мы постараемся ответить на эти вопросы и углублённо рассмотреть серверно-управляемые UI, их достоинства, а также как можно реализовать такой интерфейс в вашем собственном проекте.

Понятие о серверно-управляемых UI

Серверно-управляемые UI – это новый подход к разработке пользовательских интерфейсов. В них заложен динамичный и гибкий подход к генерации UI на сервере с последующей отправкой UI на клиент через соответствующие API. Такой подход позволяет ускорить итерации при работе и способствует персонализации при работе с ресурсом.

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

Итак, в данном случае UI динамически генерируются на сервере и отправляются на клиент через API. Сервер отправляет представление UI в формате JSON, а клиент это представление затем отображает. Таким образом, UI можно обновлять на стороне сервера, и никаких изменений на клиенте при этом не требуется.

UI приобретает гибкость, благодаря которой его можно изменять в режиме реального времени, исходя из различных факторов, как то: поведение пользователя, результаты A/B тестирования, выкатывание новых фич. Например, сайт Builder.io использует такой подход в разных SDK своего фреймворка: предоставляет компонент, способный принимать на вход JSON и отображать интерфейсы, собираемые как визуальный конструктор:

import { BuilderComponent } from "@builder.io/react";

export default async function MyPage({ params }) {
  const builderJSON = await builder
    // Get the page content JSON from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (params?.page?.join("/") || ""),
      },
    })
 return (
   <>
     <YourHeader />
     <BuilderComponent content={builderJSON} model="page" />
     <YourFooter />
   </>
 );
}

У такого подхода есть несколько достоинств по сравнению с традиционной разработкой UI. Во-первых, он способствует ускорению итераций, так как изменения можно вносить на стороне сервера – и они сразу отразятся на клиенте. Кроме того, при данном подходе бекенд-разработчики могут участвовать в разработке клиента, поскольку они определяют на сервере как структуру, так и поведение UI.

Правда, и с серверно-управляемыми UI не всё так гладко. Они требуют особого взгляда на разработку UI, а ещё с ними требуется учитывать технические факторы – например, как обрабатывать действия и обеспечивать ровное восприятие. Но, если тщательно всё спланировать и реализовать, то все эти проблемы преодолимы.

Роль серверно-управляемых UI на примере Instagram (организация запрещена в РФ)

То, как серверно-управляемые UI реализованы в Instagram, можно разобрать как яркий кейс, демонстрирующий этот инновационный подход в действии. В этой гигантской социальной сети была разработана технология под названием «блоки», активно использующая концепцию серверно-управляемых UI для подачи динамического контента и предоставления обновлений.

В реализации Instagram сервер отправляет на клиент древовидную структуру блоков. Каждый блок – это элемент UI; он содержит информацию о том, какой компонент отображать и какие пропсы передавать этому компоненту. Затем клиент обходит эту древовидную структуру и отображает эти компоненты в том порядке, как они указаны в блоках.

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

Достоинства серверно-управляемых UI

Беря на вооружение серверно-управляемые UI, вы приобретаете множество преимуществ, которые могут серьёзно улучшить весь процесс разработки, а также порадуют конечного пользователя.

1. Немедленное исправление багов и ускорение итераций: как показано на примере Instagram, одно из важнейших преимуществ связано с быстрым исправлением багов и оборотом итераций. Изменения в UI вносятся на стороне сервера и сразу же отражаются на клиенте. Пользователям не требуется обновлять свои приложения, а разработчики избавлены от длительного ревью-процесса на рынках приложений.
2. Бекенд-специалисты участвуют в разработке фронтенда: серверно-управляемые UI также частично размывают границу между клиентской и серверной разработкой. Бекендеры могут прямо на сервере определять структуру и поведение UI, таким образом, непосредственно участвуя в разработке фронтенда. Так можно добиться более эффективного использования ресурсов и повысить слаженность командной работы.
3. Динамические и персонализированные пользовательские взаимодействия: при работе с серверно-управляемым UI сам процесс взаимодействия с приложением динамически подстраивается под конкретного пользователя на основе целого ряда факторов. Например, сервер может посылать пользователю различные варианты UI в зависимости от его поведения, предпочтений или даже результатов A/B тестирования. Поэтому работа с таким интерфейсом может получиться более персонализированной и увлекательной.
4. Упрощение клиентской части: Вынося на сервер большую часть логики, обслуживающей UI, данная парадигма позволяет значительно упростить клиент. Клиент получается легче и работает быстрее, благодаря чему можно повысить производительность и добиться более гладкого восприятия.

Создание серверно-управляемых UI: практическое руководство

На первый взгляд создание таких пользовательских интерфейсов может показаться утомительной работой. Но, если ясно представлять себе весь процесс и его основные этапы, то это занятие окажется вполне подъёмным и благодарным трудом. Приведу пошаговое руководство по построению серверно-управляемых UI:

1. Создаём древовидную структуру: Первым делом нужно создать древовидную структуру, в которой представлен ваш UI. Каждый узел в этом дереве соответствует компоненту UI и содержит информацию о том, какой компонент отображать, и какие пропсы передавать этому компоненту.
2. Обрабатываем действия: в серверно-управляемом UI требуется обрабатывать действия, в частности, совершаемые пользователем. Для этого можно включить в ваши компоненты обработчики действий, посылающие запросы на сервер. Далее сервер может выдать в ответ новое дерево UI, перестроенное с учётом совершённого действия.
3. Использование формата JSON: дерево UI обычно представляется в формате JSON, а информацию в таком формате легко передавать через API и далее разбирать на клиенте.
4. Реализуем рендеринговый движок: на стороне клиента нам понадобится рендеринговый движок, при помощи которого можно обходить дерево UI и отображать компоненты именно так, как они указаны в дереве.
5. Тестирование и итерация: как и в случае с любой разработкой, за тестированием и итерацией остаётся ключевое значение. Обязательно тщательно тестируйте ваши серверно-управляемые UI и вносите правки на основе того, что удалось обнаружить.

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

Как справиться со сложностями, присущими серверной разработке UI

Притом, какие новые возможности открываются при разработке серверно-управляемых UI, есть также некоторые серьёзные сложности, которые нужно иметь в виду:

1. Правила, действующие на рынках приложений: на рынках приложений устанавливаются правила (гайдлайны), и им необходимо следовать. Убедитесь, что ваш серверно-управляемый UI им соответствует. Отправляя ваше приложение на ревью, прозрачно опишите ваш подход к разработке UI – так будет проще избежать многих потенциальных проблем.
2. Оффлайновая работа с приложением: поскольку серверно-управляемые UI зависят от коммуникации с сервером, бывает очень непросто обеспечить их нормальное функционирование при отсутствии сети. Такие стратегии как кэширование помогают поддерживать привычную работу с приложением даже без сетевого соединения.
3. Аспекты производительности: притом, что серверно-управляемые UI предлагают динамические возможности, при работе с ними нужно учитывать, как они скажутся на производительности. Эффективные сетевые запросы и оптимизация приёмов рендеринга помогает добиться гладкой работы пользователя с интерфейсом.
4. Дополнительная сложность: при внедрении серверно-управляемых UI в процессе разработки может добавиться лишний уровень сложности, так как интерфейс контролируется как на сервере, так и на клиенте. Но, если хорошо структурировать подход к работе, а также чётко разделить зоны ответственности, этой сложностью можно эффективно управлять.

Притом, что эти соображения сопряжены с собственными вызовами, они также открывают новые возможности для решения задач и внесения инноваций. Если хорошо всё спланировать и продумать, как всё сделать, серверно-управляемые UI могут стать важным дополнением к вашему арсеналу разработчика.

Заключение

При программировании серверно-управляемых UI, когда элементы пользовательского интерфейса передаются через API, общий ландшафт разработки UI серьёзно меняется. Если переместить значительную часть логики UI на сервер, мы достигаем такого динамизма и гибкости, что можем попробовать полностью переосмыслить всю отрасль.

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

В мире продвинутой JavaScript-разработки серверно-управляемые UI – это не только теоретическая концепция, но и практический подход, уже применяемый на крупных платформах. Серверно-управляемые UI продолжают раздвигать границы возможного в клиентской разработке, и чем дальше, тем интереснее становится \то направление.