mish_server.png

Привет, меня зовут Андрей Гончаров, я Frontend Developer в Mish Product Lab. Сегодня подробно разберёмся, что такое Server/Backend-Driven UI, как с ним работать и зачем он вообще нужен.

<h3>Что такое Backend-Driven UI?</h3>
<p>Backend-Driven UI (или Server-Driven UI) — это концепция в разработке приложений с интерфейсом, при котором бэкенд управляет как данными приложения, так и его внешним видом. Например, для фронтенд-приложения BDUI будет управлять версткой.</p>
<p>Есть разные уровни «проникновения» этой концепции в фронтенд-приложение, но лучше это представить как спектр.</p>
 <img src="/uploads/1644796358_69c744440a.png" alt="enter image description here">
<p> Да, кстати, об этом статью сейчас не написал только ленивый.</p>


<h3>Кейсы</h3>
<p>Проще всего эту концепцию представить через кейсы. Вот парочка: </p>
<p><strong>Кейс #1: страница оформления заказа (aka checkout)</strong></p>
<p>Обычно заказ оформляется в несколько шагов: выясняем способ получения, способ оплаты, контактные данные, делаем оплату. Бизнесы бывают разные, и логика формирования шагов такая же. Шаги же, по сути, представляют собой формы с полями ввода. На фронтенде нам нужно организовать отрисовку полей форм, переходы между шагами и отправку данных. Остальная логика возлагается на бэкенд.</p>
<p>Яркий пример — CS-Cart.</p>
<img src="/uploads/1644796359_09b35c4805.png" alt="enter image description here">
<p>Примерная логика формирования шагов чекаута в интернет-магазинах.</p>

<p><strong>Кейс #2: пост в блоге</strong></p>
<p>Обычно посты в блогах пишут в админке блога в WYSIWYG-редакторе. Некоторые современные редакторы предоставляют многоколоночное оформление контента, кастомные компоненты, накидывают SEO, тегов и прочих ништяков. Бэкенд хранит записи, организует управление и доступ к ним. Фронтенд из структуры документа формирует верстку.</p>
<p>Яркий пример – Strapi.</p>
<p><strong>Кейс #3: быстрая доставка улучшений интерфейса без обновления приложения</strong></p>
<p>Представим, что вы — банк, который оказался под санкциями: ваше приложение скрыли из всех магазинов, вы не можете доставить пользователям новые обновления. Но у вас есть выход, ведь весь интерфейс приложения приходит в виде JSON с сервера!</p>
<p>Яркий пример — <a href="https://habr.com/ru/company/yandex/blog/683886/">DivKit.</a></p>


<h3>Зачем реализовывать эти кейсы при помощи данной концепции?</h3>
<p>Потому что мы хотим:</p>
<ul>
  <li>Значительно поменять Layout фронтенд-приложения (кейс #3)</li>
  <li>Изменить структуру какого-то экрана в приложении (кейс #3).</li>
  <li>Внедрить A/B-тестирование (кейс #3, кейс #1). Представьте, какая это боль, когда такие тесты на гипотезы надо писать руками, деплоить в отдельные версии/бандлы и так далее.</li>
  <li>Срочно добавить дополнительное промо от отдела маркетинга.</li>
  <li>Добавить страничку с каким-то контентом.</li>
</ul>

<h3>Что может пойти не так, если отказаться от BDUI</h3>
<p>Для каждого отдельного члена команды свой сценарий развития событий:</p>
<ul>
  <li>Для проджекта нужно будет учитывать сложность изменения структуры страницы. Конечно, есть тимлид, который подскажет. Но что, если он тимлид-джун без опыта?</li>
  <li>Для тестировщиков изменение глобальных частей с захардкоженной структурой практически всегда триггерит полный регресс. Нет уверенности в том, что полный ручной регресс не вызывает боль. Но точно есть сценарий с отсрочкой релиза на пару дней.</li>
  <li>Для программистов можно выделить следующие больные моменты кратко:</li>
  <li>изменения в структуре нужно зафиксировать в коде, то есть сесть и сверстать</li>
  <li>внешние источники данных нужно интегрировать для новых блоков;</li>
  <li>необходимо контролировать удаление источника данных при удалении блока;</li>
    <li>нужно встроить новый блок в существующую верстку или же адаптировать верстку при удалении блока.</li>
</ul>


<h3>Что насчет сроков? Негативный кейс</h3>
<p>Давайте рассмотрим кейс, в котором у нас заказывают небольшой сервис бронирования койко-мест. У нас есть дизайн, по которому мы верстаем, есть договор, определяющий функционал и сроки. Есть реальная действительность, где перед дедлайном просят поменять местами промоблок и компонент «селектор койки».</p>
<p>Казалось бы, в верстке меняешь два компонента местами — готово. Но есть вероятные технические блокеры:</p>
<ul>
  <li>фронтендер мог верстать страницу изначально с этими блоками, делая хардкод в размерах, отступах и так далее;</li>
  <li>источники данных могут требовать какой-то определенный порядок запроса данных;</li>
  <li>код может быть «грязным», а понимающий его синьор — в отпуске.</li>
</ul>
<p>Ещё есть минус от хардкоженной структуры UI, не очень очевидный: у страницы нет контракта с точки зрения его структуры и данных. Мы можем понять, какие данные придут, но только после изучения кода. Как и узнать раскладку блоков в верстке.</p>
<p>А как быть с добавлением новой страницы с текстовым контентом?</p>
<ul>
  <li>Нужно залезть в код и скопировать типовую страничку с её layout — по сути копипаст бойлерплейта.</li>
  <li>Может потребоваться зарегистрировать страницу в роутере приложения, закрыть за авторизацией.</li>
  <li>Необходимо подрубить источник данных.</li>
</ul>
<p>С такой ментальной моделью приложения сложно будет сделать следующее:</p>
<ul>
  <li>Проводить A/B-тестирование.</li>
  <li>Добавлять новый контент на сайт без привлечения отдела разработки.</li>
</ul>
<p>Иными словами, фронтенд превращается в программу, внешний вид которой не поддается изменению извне, он не зависит от какой-то схемы.</p>
<p>По сути, вся техника Backend-Driven UI сводится к получению схемы экрана от бэкенда, к дальнейшей обработке и рендерингу. Часто даже с получением карты сайта.</p>


<h3>Как получить удобный BDUI</h3>
<p>Что нам нужно учитывать, чтобы получить удобный Backend-Driven UI?</p>
<ul>
<li><p><strong>Контракт от бэкенда.</strong></p> Нужно понимать, в каком формате будет приходить лейаут экрана.</li>
<li><p><strong>Начальное состояние компонента.</strong></p> Если оно нужно, то как лучше его инкапсулировать?</li>
<li><p><strong>Степень, до которой BDUI описывает layout.</strong></p> Сюда входит расположение и вложенность блоков, их горизонтальное или вертикальное расположение на странице, размеры блоков.</li>
<li><p><strong>Параметры страницы. </strong></p>Среди них номер страницы, фильтры и так далее.</li>
</ul>


<h3>Как это сделать?</h3>
<p>Лучше всего, как я выяснил, выделять логику формирования интерфейса в отдельный микросервис, Backend For Frontend. Не стоит запихивать в бэкенд проекта логику для полиморфного отображения. Да, есть случаи как в кейсе #1, но мы сейчас про макет.</p>


<h3>Кто и как применяет в индустрии BDUI?</h3>
<p><strong>Пример #1. Бигтех, Ozon</strong></p>
<p>Приложение Ozon для смартфонов сделано по этой концепции. Применяют они её по ряду причин:</p>
<ul>
  <li>для A/B-тестирования;</li>
  <li>чтобы вытащить бизнес-логику из Web/Android/iOS приложений;</li>
  <li>для более быстрой доставки изменений пользователям.</li>
</ul>
<p>Вот классная статья, где они рассказывают о том, как готовили логику формирования интерфейса: <a href="https://habr.com/ru/company/ozontech/blog/661941/">Как работает Backend-Driven UI на мобильном клиенте</a></p>

 <img src="/uploads/1644796391_10708cecac.png" alt="enter image description here">
 <p>Скриншот приложения с пояснениями по виджетам на страницы, скрин из статьи Ozon.</p>
 <p><strong>Пример #2. Бигтех, Альфа</strong></p>
 <p>Хорошая статья на Хабре, где инженеры Альфа-банка делятся своим опытом: <a href="https://habr.com/ru/company/alfa/blog/668754/">Эволюция Server-Driven UI: динамические поля, хэндлеры и многошаг</a></p>
<p>Отмечу, что они рассказывают не столько про компоновку, сколько про всё остальное: обработка событий, бизнес-логика в сложных формах.</p>
 <img src="/uploads/1644796364_56d3f6c927.png" alt="enter image description here">
<p>Сриншот из статьи с примером обработки событий.</p>
<p><strong>Пример #3. Бигтех, Airbnb</strong></p>
<p>Ныне почивший в России букинг-сервис Airbnb. Да, их мобильное приложение также построено на концепции BDUI. Применяют они её для A/B-тестирования. Вот приправленная кодом статейка с их рецептом: <a href="https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5">A Deep Dive into Airbnb’s Server-Driven UI System</a></p>
<img src="/uploads/1644796365_14325dbba4.png" alt="enter image description here">
<p>Вот так Airbnb трансформирует данные в UI. Скрин из их статьи.</p>
<p><strong>Пример #4. No-code, Unflow</strong></p>
<p>Да, такая модная тема как no-code зачастую заходит в клиентские приложения через BDUI. Так, Unflow оставляет свободу для кастомизации и предоставляет SDK для мобильных платформ: <a href="https://github.com/unflowhq">Unflow</a></p>
 <img src="/uploads/1644796390_d19c4778ca.png" alt="enter image description here">
 <p>Вот как выглядит редактор экранов в Unflow.</p>
 <p><strong>Пример #5. No-code, Strapi</strong></p>
 <p>Интересный пример реализации — Strapi, Headless CMS. Она даёт интерфейс для редактирования контента и не формирует отображения, не генерирует сайт. Так можно создать сущность «макет страницы» и в него накидывать блоки страницы. Но это совсем неудобно. И ещё нет возможности удобно впилить другие источники данных.</p>
 <img src="/uploads/1644796387_5342ec13ae.png" alt="enter image description here">
 <p>Админка Strapi.</p>
 <p><strong>Пример #6. Реализация концепции в CMS CS-Cartт</strong></p>
 <p>Есть другой пример реализации, так называемый Block Manager. По сути, это упрощенный визуальный редактор макета страницы. Позволяет собрать/пересобрать страничку, вообще не прибегая к написанию кода. Настройки блоков/виджетов — отдельная мультивселенная.</p>
  <img src="/uploads/1644796360_9f4491f533.png" alt="enter image description here">
  <p>Редактор макетов страницы.</p>
  
  
  <h3>Выводы</h3>
  <p>Backend/Server-Driven UI всё же узкоспециален. Реализация полноценного интерфейса в такой парадигме — задание со звёздочкой в квадрате, готовое съесть много денег бизнеса. Поэтому отлично заходит этот подход либо для очень крупного, либо для малого бизнеса. Да и выглядит это как некий Trade-off в обоих случаях.</p>
  <ul>
  <li>Очень крупному бизнесу нужно проверять гипотезы, быстро поставлять фичи/заплатки и не сгореть в аду дублирующейся бизнес-логики в разных клиентских приложениях.</li>
  <li>У малого бизнеса нет ресурсов для своих решений, эти ребята берут no-code платформы, которые в основном BDUI, накидывают экраны, настраивают open-source клиент на свой инстанс в платформе, и всё работает.</li>
</ul>
<p>Но концепция хороша, и применять её точечно в определенных местах (типа сложных форм) — однозначно правильное решение. Чем больше бизнес-логики на сервере, и меньше на клиенте — тем крепче спится.</p>

Продаём тимлиду идею Server/Backend-Driven UI

Гончаров Андрей

game case mocap.mp4

Уникальный проект, объединивший юных дизайнеров, геймдевов и программистов, где проделана внушительная работа: фирменный стиль, дизайн веб-портала и админки, 3D-иллюстрации, веб-разработка. 

 <img src="/uploads/Tagline_01_Main_9d23fe5f58.jpg?updated_at=2023-03-30T07:29:22.748Z" alt="enter image description here">
<div>
<h3>Платформа</h3>
<div>
<p>&laquo;Начни игру&raquo; позволяет молодым разработчикам заявить о&nbsp;себе, выйти на&nbsp;новый уровень профессионального мастерства, создать уникальные игровые проекты и&nbsp;найти партнеров для поддержки своей инициативы. Обучение построено на&nbsp;геймификации, что отражено как в&nbsp;дизайне в&nbsp;целом, так и&nbsp;в&nbsp;особенностях разработки.</p>
<p>Дизайн&nbsp;&mdash; сочные цвета, ломаные формы, пересекающиеся элементы. Обилие 3D-иллюстраций и&nbsp;объема. Визуал буквально дышит творчеством и&nbsp;амбициями.</p>
</div>
</div>

  <img src="/uploads/Tagline_04_20de48777e.jpg?updated_at=2023-03-30T07:29:25.318Z" alt="enter image description here">
  <img src="/uploads/Tagline_06_adab1f4df3.jpg?updated_at=2023-03-30T07:29:21.195Z" alt="enter image description here">
  <img src="/uploads/Tagline_07_5c157a80b8.jpg?updated_at=2023-03-30T07:29:23.252Z" alt="enter image description here">
  
 <div>
<h3>Смело и ярко</h3>
<div>
<p>Кто ЦА проекта? Школьники, молодежь. Их нужно захватить ярким визуалом, необычными формами, смелым сочетанием цветов. Звучит очевидно, но на деле не самая простая задачка. Удивить визуалом молодых людей сложно. И начали мы с деркзой цветовой гаммы, которая даже внутри команды вызвала немало споров (однако по итогу очень зашла заказчику и аудитории). Также мы решили добавить объема привычным предметам, сделать упор на 3D, чтобы вдохнуть в них жизнь, но при этом оставить в рамках виртуального пространства. </p>
</div>
</div>

 <img src="/uploads/Tagline_08_d26b6eefcc.jpg?updated_at=2023-03-30T07:29:20.589Z" alt="enter image description here">
<div>
<h3>Родная разработка</h3>
<div>
<p>Этот проект стал большим испытанием для нашей команды разработки. Попробуем просто перечислить то, что было проделано, и ничего не забыть: html, css, js, typescript, react, spa, seo, devops, docker, kubernetes, ci/cd. Да, это и frontend, и backend, да еще и с собственной командой тестирования. Опыт колоссальный, результат стоящий. </p>
</div>
</div>

 <img src="/uploads/Tagline_09_da0340955a.jpg?updated_at=2023-03-30T07:29:23.871Z" alt="enter image description here">
<div>
<h3>Версия для людей с ограниченными возможностями</h3>
<div>
<p>Мы&nbsp;также адаптировали сайт в&nbsp;соответствии с&nbsp;ГОСТ Р&nbsp;52872-2019 &laquo;Национальный стандарт Российской Федерации&raquo;. Сайт подходит для пользования слабовидящими людьми&nbsp;&mdash; есть функционал синтеза речи, изменения размера шрифта, увеличения контрастности. И&nbsp;при этом функциональностью контента можно управлять через интерфейс клавиатуры без ограничений по&nbsp;времени нажатия на&nbsp;клавишу.</p>
</div>
</div>

 <img src="/uploads/Tagline_02_677e7d1c7a.jpg?updated_at=2023-03-30T07:29:23.956Z" alt="enter image description here">
<div>
<h3>Ачивки</h3>
<div>
<p>На проекте очень разветвленная система ачивок, все-таки нужно подбадривать юных творцов. Поэтому мы вложили немало сил в систему поощрения. Тут речь не только о визуале, но и об идеях. Каждая ачивка продумывалась исходя из текущих трендов, чтобы порадовать легким юмором и не отбить мотивацию пользоваться платформой дальше. </p>
</div>
</div>
 <img src="/uploads/Tagline_03_66799d233b.jpg?updated_at=2023-03-30T07:29:18.408Z" alt="enter image description here">
 <div>
 <h3>Иконки, куда же без них</h3>
<div>
<p>Иконок потребовалось много, поэтому мы их рисовали, рисовали и снова рисовали. Несколько иллюстраторов постоянно трудились, чтобы в едином стиле воспроизвести множество считываемых образов. </p>
</div>
</div>
<img src="/uploads/Tagline_05_e8e59dca6b.jpg?updated_at=2023-03-30T07:29:24.365Z" alt="enter image description here">
<div>
<h3>Как итог</h3>
<div>
<p>Это проект, которым мы гордимся от и до. Мы вложили в него очень много сил и задействовали в проработке все отделы Mish: продуктовый, коммуникационный, отдел разработки и тестирования. У него клёвый и самобытные брендинг, интерфейс внешний и внутренний, иллюстрации, разработка и тестирование. При этом мы продолжаем работать над следующим сезоном проекта, оказывая полную продуктовую поддержку и подкидывая новые идеи к реализации. </p>
</div>
<br>
<br>
<h4>Совместно с <a href="https://metacorp.gg/">Metacorp</a></h5>

Начни игру.jpg

Начни Игру

Начни Игру.jpg

Скосырская Мария

Денисова Христина

Соколенко Владислав

Анпилов Алексей

Петров Сергей

RedbassetMocap.mp4

Создание с нуля подкаст-платформы: лендинга для первого контакта с пользователем, личного кабинета подкастера и приложения для прослушивания подкастов.

  <img src="/uploads/00_Title_RB_6484bce805.jpg?updated_at=2023-03-31T15:31:28.658Z" alt="enter image description here">
  <div>
<h3>Red Basset </h3>
<p>
Red Basset&nbsp;&mdash; это бесплатная платформа для продвижения и&nbsp;монетизации подкастов. Для подкастеров это хостинг и&nbsp;личный кабинет с&nbsp;управлением, статистикой и&nbsp;монетизацией подкастов. Для слушателей&nbsp;&mdash; это удобное приложение для прослушивания тысяч подкастов в&nbsp;одном месте.
</p>
</div>  
  <img src="/uploads/01_RB_c5e246d402.jpg?updated_at=2023-03-31T15:31:29.616Z" alt="enter image description here">
  
<div>
<h3>Улыбайтесь, вы&nbsp;на&nbsp;Red Basset</h3>
<div>
<p>При создании логотипа Red Basset мы&nbsp;пришли к&nbsp;беспроводным наушникам и&nbsp;милой улыбке, что создает цельный образ мордочки собаки породы Бассет-хаунд.</p>
<p>Первый контакт пользователя с&nbsp;Red Basset происходит через лендинг, где мы&nbsp;доступным языком рассказали о&nbsp;платформе и&nbsp;визуально продемонстрировали её&nbsp;преимущества. Мы&nbsp;использовали минималистичные тексты и&nbsp;дополнили их выразительными 3d-иллюстрациями.</p>
</div>
</div>

  <img src="/uploads/02_RB_ef635d6e7d.jpg?updated_at=2023-03-31T15:31:30.977Z" alt="enter image description here">
 <div>
  <h3>Разработка</h3>
  <p>Проект поднимался собственными силами разработки. Backend реализован на Java Spring, а frontend на React. Тестирование и поиск багов тоже выполняли собственными силами. Однако мы все еще в процессе прикручивания новых фичей, так что работа продолжает кипеть.</p>
  </div>
  <img src="/uploads/03_RB_8d3e896cd2.jpg?updated_at=2023-03-31T15:31:30.479Z" alt="enter image description here">
 <div>
  <h3>Личный кабинет подкастера</h3>
  <p>Подкаст-платформа Red Basset является бесплатным хостингом для подкастеров. Это буквально рай для них, поскольку все возможности для дистрибуции благодаря RSS уже встроены, никуда отдельно ходить не нужно. В личном кабинете подкастера реализован весь функционал для быстрой и удобной заливки подкастов.</p>
  </div>
  <img src="/uploads/05_RB_f791d45187.jpg?updated_at=2023-03-31T15:31:30.885Z" alt="enter image description here">
 <div>
  <h3>Немножечко подкастов?</h3>
  <p>Подкасты нужно слушать много, долго и комфортно. Для этого мы создали приложение-слушалку, где можно сделать себе уютную библиотеку с любимыми подкастами, создавать разные подборки и даже слушать офлайн.</p>
  </div>
  <img src="/uploads/06_RB_d215ebd87c.jpg?updated_at=2023-03-31T15:31:28.639Z" alt="enter image description here">
  </div>
  <div>
  <h3>А что в итоге?</h3>
  <p>От и до этот проект создан нами: концепция, брендинг, дизайн, разработка. Проделана огромная работа. Мы с удовольствием наблюдаем, как платформа работает, с каждым днем привлекает новых слушателей и подкастеров, развивается, становится популярной. При этом не забываем о поддержке проекта, доводим его до идеала, встраиваем новые фичи и не забываем о маркетинговой коммуникации.</p>
  </div>

Backend

hello@mish.design

Москва

Нижний Новгород