Backend-driven UI в Авито: от идеи к проду

Всем привет! Меня зовут Влад Шатиленко, я продакт-менеджер в команде технической платформы Авито . Раньше я был разработчиком: начинал с аутсорса, затем работал в стартапе, где со временем перешёл в продакты. Сейчас в Авито занимаюсь развитием инструментов backend-driven UI — о них и пойдёт речь дальше. Статья будет полезна командам, которым важны скорость экспериментов, быстрые изменения интерфейса и кроссплатформенность.

https://habr.com/ru/companies/avito/articles/997010/

#mobile #bdui #avito #avitotech #авито #мобильная_разработка

Как мы перевернули подход к мобильным интерфейсам с Backend Driven UI

После того как наш парк вырос до более 245 тысяч самокатов и велосипедов, а команда сервисных центров начала исчисляться сотнями человек, стало ясно: управлять статусами устройств, задач и процессов в нашем внутреннем сервисном приложении по старинке уже не получится. Представьте себе: нужно изменить статус самоката или работы, а механик, специалист по контролю качества и бригадир — роли с разными функциями — видят одни и те же кнопки, одни и те же статусы, в которые можно перевести самокат. Иногда нажимают не туда — и ремонт идет не по желаемому процессу, что-то может потеряться, сроки увеличиваются… Добавим в уравнение еще разные версии мобильного приложения с различным набором кнопок — в какой-то версии кнопку убрали, в какой-то добавили. В итоге вся надежда только на бэкенд, перед которым встала задача контролировать и валидировать действие каждого пользователя в приложении. В WCMA (Whoosh Control Maintenance App, писали о нем в предыдущей статье), нашем внутреннем приложении для управления флотом, мы столкнулись с этой проблемой в полной мере. Напомню, в этом приложении работает наша сервисная команда, через него мы обслуживаем самокаты и велосипеды в городе, следим за их зарядом, переставляем на спросовые парковки, а также восстанавливаем и чиним. Одна из первых версий WCMA была больше похожа на пульт-отмычку для самоката, приложение не было интуитивным: все переводы доступны, а значит люди нажимали куда попало, часто новички путались в процессах и кнопках, в целом было мало контроля над действиями пользователей. Это могло вызывать ошибки “в полях” или при ремонте флота. Чтобы это исправить, мы завели большее количество ролей в системе, и каждая роль получила свой особенный раздел в WCMA. А для надежности добавили много проверок на бэкенде, валидирующих действия команды. Такой подход работал, статусная модель была простой: несколько базовых состояний и переходы между ними. Но с ростом бизнеса логика усложнилась. Появились региональные особенности работы в разных городах, ролевые ограничения, условные переходы, зависящие от контекста. Меня зовут Игорь Волынский, я backend-разработчик в команде WCMA Whoosh. И сегодня я расскажу, как мы решили эту проблему: построили централизованную и гибкую систему управления статусами, добавили условные переводы с хендлерами для проверки бизнес-правил и реализовали динамические сценарии для гибкого формирования UI. Спойлер: теперь наши механики и менеджеры видят только те действия, которые им реально доступны, а бэкенд гарантирует целостность данных на уровне системы. Читать про формирование UI через бэкенд

https://habr.com/ru/companies/whoosh/articles/977814/

#backend #bdui #backenddriven_ui

Два года с Duit — история взросления фреймворка

Когда-то Duit был всего лишь экспериментом — попыткой упаковать интерфейс Flutter в JSON и заставить его ожить. Сегодня это уже не технический трюк, а осмысленный подход к тому, как можно описывать UI данными, а не кодом, создавая управляемые интерфейсы нового поколения. Новый релиз — история взросления и поиска архитектурного баланса. За два года проект прошёл путь от набора идей до зрелой архитектуры, где принципы гибкости, тестируемости и производительности стали фундаментом проекта. Приглашаю тебя прочитать статью и узнать, как Duit v4 меняет представление о том, каким может быть BDUI-фреймворк.

https://habr.com/ru/articles/963884/

#bdui #sdui #duit #flutter #dart #mobile_development #framework #ui

BDUI: эволюция динамических интерфейсов

Привет, Хабр! В России набирает популярность новый подход к созданию пользовательских интерфейсов — Backend Driven UI (BDUI). В нём сервер задаёт структуру и поведение интерфейса, а приложение просто отображает его на экране. BDUI уже используют в своих приложениях многие коллеги из индустрии. Меня зовут Елена Зеликсон, я старший инженер по тестированию в VK. О том, какие преимущества у этого решения и как его применять, подробнее расскажу в этой статье.

https://habr.com/ru/companies/vk/articles/923976/

#bdui

Фронтенд и бэкенд больше не будут общаться как прежде: создаём конструктор сценариев на базе Backend Driven UI

Цикл продуктовой разработки часто напоминает весы: с одной стороны, системное проектирование, подбор основополагающих инструментов, масштабные рефакторинги. С другой — совокупность локальных решений, принимаемых для точечных улучшений в системе. И самое сложное тут: соблюдать баланс. Как понять, когда имеет смысл вмешаться «хирургически», а когда — предпочесть вместо конкретной проблемы решить (или предотвратить) целый класс проблем? Иногда нащупать границу между «масштабом» и «целесообразностью» получается почти что случайно. Однажды мы в Сравни подступились к переделке чата в нашем мобильном приложении, и на старте расценивали задачу как «ещё один рядовой продуктовый кейс». Но планы по модификации фичи быстро переросли в создание универсального инструмента: конструктора сценариев на базе Backend Driven UI. В итоге мы не просто заменили чат более удобной альтернативой, а в целом научились гибко управлять фронтендом приложения . Со всеми сопутствующими плюсами как для бизнеса, так и для самих разработчиков (теперь, чтобы реализовать некоторые изменения на экранах, даже не обязательно быть фронтендером или мобильным разработчиком!). Подробности о нашем сценарном BDUI-движке — этапах его создания, вариантах использования и нюансах технического устройства — читайте под катом.

https://habr.com/ru/companies/sravni/articles/912896/

#backendразработка #bdui #nodejs #typescript #server_driven_ui #архитектура_приложений

Большое обновление DivKit: визуальный редактор, поддержка форм, аниматоры

Почти три года назад мы выложили в опенсорс DivKit — наш BDUI‑фреймворк для отрисовки интерфейса приложения из ответа сервера. С его помощью вы можете описать элементы, состояния и анимации на бэкенде. Приложение получит это JSON‑описание и отобразит его. Мы не перестаём развивать DivKit и за последние месяцы добавили несколько важных функций. О них расскажем в статье.

https://habr.com/ru/companies/yandex/articles/909300/

#яндекс #bdui #sdui #divkit #опенсорс_яндекса

Как улучшить UX в PWA на React с помощью потокового Backend-Driven UI — личный опыт

Хочу показать три приёма, как можно ускорить загрузку интерфейсов с Backend-Driven UI и улучшить UX. Решения показали хорошие результаты на демо-версии, но увы, пока ещё не внедрены в реальный проект. Было бы интересно обсудить с вами, как эти приёмы могут помочь в боевых задачах и что ещё можно улучшить.

https://habr.com/ru/companies/outlines_tech/articles/905166/

#BackendDriven_UI #bdui #ux #интерфейс #долгая_загрузка #парсинг #Медленная_загрузка #ускорить_интерфейс #Потоковая_загрузка #Частичный_парсинг

Как мы сокращали размер JSONʼа в SDUI

Привет, хабрачитатели! Server-Driven UI (SDUI) — это подход, при котором сервер управляет отображением интерфейса на клиенте. Важное преимущество SDUI — возможность внедрять изменения без выпуска новых версий приложений. Но это же преимущество есть его недостаток, ведь передача всех данных по сети зависит от качества соединения и увеличивает объём данных. Качество связи мы не можем контролировать, а вот уменьшить количество передаваемой информации посредством сокращения JSON, — вполне.

https://habr.com/ru/companies/alfa/articles/882054/

#шаблонизация #sdui #bdui #json #android #ios

Современные подходы к управлению UI: low-сode & Backend-Driven UI

Привет, меня зовут Михаил Шевченко. В Авито я проектирую и разрабатываю backend low-code платформы Bricks. В этой статье рассказываю о том, почему в Авито было принято решение развивать собственные low-code-решения и Backend-Driven UI, объясняю их устройство и делюсь достигнутыми результатами.

https://habr.com/ru/companies/avito/articles/879720/

#BDUI #интерфейсы #backend_driven_ui #android #ios #мобильные_приложения #mobile_development #backend_driven #low_code #lowcode

BDUI — это спасение от релизов: «Какие ваши доказательства?»

Если вы видели no-code-проекты, где можно просто блоками перетаскивать интерфейс, то отчасти вы уже знакомы с BDUI-подходом, ведь они по сути и построены на BDUI. Суть в том, что мы делегируем наполнение интерфейса серверу. Фронтенд не отвечает за то, что будет нарисовано, а только определяет список допустимых компонент, которые сервер может показать пользователю. Но в вебе BDUI не очень популярен. А зря. Ведь в первую очередь он нужен как спасение от релизов. Но, если быть точнее, он нужен как средство для снижения количества релизов, затрат на разработку и выкатку фичей. Давайте это и обсудим, а также как работает BDUI, разберём примеры, реализованную фичу, которую мы недавно релизили, посмотрим на другие варианты реализации и подведём итоги. Вряд ли узнаете, как на 100 % реализовать или внедрить BDUI в свой проект, ибо это слишком категорично, потому что для каждого проекта всё индивидуально. Но… об этом я и расскажу в моей обзорной «лекции».

https://habr.com/ru/companies/alfa/articles/861384/

#bdui #приложения_ios #приложения_для_android #разработка