#bdui

2025-12-18

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

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

habr.com/ru/companies/whoosh/a

#backend #bdui #backenddriven_ui

2025-11-16

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

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

habr.com/ru/articles/963884/

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

2025-07-02

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

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

habr.com/ru/companies/vk/artic

#bdui

2025-05-30

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

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

habr.com/ru/companies/sravni/a

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

2025-05-21

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

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

habr.com/ru/companies/yandex/a

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

2025-04-28

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

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

habr.com/ru/companies/outlines

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

2025-02-18

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

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

habr.com/ru/companies/alfa/art

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

2025-02-07

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

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

habr.com/ru/companies/avito/ar

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

2024-11-27

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

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

habr.com/ru/companies/alfa/art

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

2024-11-16

Один год с Duit — ретроспектива развития

Ровно год назад был сделан первый коммит в репозиторий проекта, который во многом определил вектор моих профессиональных интересов, изысканий и приложения сил. 16 ноября 2023 года я начал работу над BDUI-фреймворком для Flutter - Duit . Это был длинный путь и в этой заметке я хочу рассказать вам об этом захватывающем приключении.

habr.com/ru/articles/858636/

#duit #flutter #bdui #dart #sdui #open_source

2024-09-20

Шпаргалка с основами BDUI для продуктовых дизайнеров

Большая статья в двух частях о самом важном, что нужно знать и учитывать продуктовому дизайнеру, если проект, над которым он работает, будет реализован на BDUI: — в чём его суть и чем он отличается от классического подхода в разработке; — что такое контракт экрана и контракт компонента, почему они главный источник истины в BDUI подходе, и как с ним работать дизайнеру; — как дизайнеру читать JSON, разберём ключи и значения. Статья будет не только теоретической. Поделимся своим опытом внедрения BDUI в дизайн-процессы с примерами и иллюстрациями и оставим несколько рекомендаций для тех, кто только начинает делать это у себя в продукте или команде.

habr.com/ru/companies/alfa/art

#bdui #sdui #json #продуктовый_дизайн #контракты

2024-09-10

BDUI: удовольствие или боль

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

habr.com/ru/companies/cian/art

#программирование #bdui #разработка_под_android #разработка_под_ios #ios #android #интерфейсы #мобильные_приложения #мобильная_разработка

2024-09-06

Следим за производительностью SDK. Доклад Яндекса

Влад Бардин, iOS‑разработчик в команде Яндекс Маркета, выступил с докладом конференции Яндекс Go Dev Day&Night. Он рассказал, зачем следить за производительностью, когда вы разрабатываете такой фундаментальный SDK, какие метрики стоит собирать и как взаимодействовать с потребителями, а именно с продуктовыми командами, которые используют ваш SDK в своих приложениях.

habr.com/ru/companies/yandex/a

#bdui #мобильная_разработка #мобильные_приложения #интерфейсы #sdk #метрики

2024-08-29

Собираем данные из сотни микросервисов, или Как мы разобрали Ozon на кубики, а потом собрали заново

Всем привет! Меня зовут Саша, я руковожу группой разработки Composer Core в Ozon Tech. В этой статье я расскажу о том, как устроена пользовательская часть одного из ведущих российских маркетплейсов, в развитии которой на момент написания статьи участвуют сотни специалистов из десятков команд. При наличии такого количества людей разрабатывать новую функциональность, не рискуя сломать уже существующую, является достаточно сложной задачей. Поделюсь подходами, которые позволили нам организовать взаимодействие большого количества сервисов доменных команд для формирования общих ответов пользователю. При этом менять содержимое страниц можно буквально по щелчку пальцев, а значит, быстро адаптироваться к постоянно меняющимся требованиям бизнеса. Продукт, который мы разработали, вряд ли когда-нибудь станет open-source-проектом, так как он слишком зависит от специфики инфраструктуры Ozon Tech. Но основные принципы могут быть полезны при проектировании похожих систем.

habr.com/ru/companies/ozontech

#ozon #ozon_tech #bdui #go #backend #ui

2024-07-17

Корпоративная магистратура ИТМО и Яндекса: как всё устроено

Корпоративная магистратура Яндекса работает в ИТМО уже второй год. Конечная цель программы ― еще на этапе обучения дать практический опыт, необходимый для работы в коммерческой разработке. Магистранты программы решают не абстрактные задания из учебника, а реализуют проекты, которые потом попадают на прод в проектах Яндекса ― в том числе в Open Source. В статье рассказываем, как всё устроено и над чем работают студенты.

habr.com/ru/companies/spbifmo/

#divkit #опенсорс_яндекса #bdui #магистратура #университет_итмо #университеты #svg #framework

2024-06-05

Как мы строили BDUI: опыт Яндекс Маркета

Привет! Меня зовут Алексей Морозов. Я уже несколько лет работаю в инфраструктурной команде Яндекс Маркета. Наша команда делает проекты, которые должны были улучшить скорость приложения, его качество и скорость разработки. Однако раньше такие проекты решали эти проблемы только на время, приложение снова деградировало. Всё это напоминает древнегреческий миф, в котором Сизиф толкает в гору камень, он скатывается вниз, и всё начинается по новой. Такое положение дел нас не устраивало, поэтому было принято решение изменить подход. И мы построили BDUI (Backend Driven UI). В этой статье я расскажу о том, как это случилось, что сделали и какой в итоге получили результат.

habr.com/ru/companies/yandex/a

#яндекс #яндексмаркет #bdui #sdui #ios #android #divkit #мобильная_разработка

2024-02-13

Как я перешёл на тёмную сторону: путь из Андроида в бэкенд

Привет, Хабр! Меня зовут Андрей. 7 лет я разрабатываю под Android. Год назад я писал код для мобильного приложения банка и особо не задумывался о переходе на другие задачи. В один прекрасный день мне прилетела таска — добавить параметр в диплинк на Андроиде. Потом меня попросили добавить его ещё и на бэке. Я закоммитил, запушил, проверил — всё работает. Ребята в шутку предложили мне перейти в бэкендеры из Андроида. Тут я задумался, а шутка ли это, челлендж показался мне интересным. Расскажу о своих экспериментах с бэком в формате дневника — вдруг вы решите повторить мой опыт или поделитесь, как проходили этот путь сами.

habr.com/ru/companies/alfa/art

#bdui #json #развитие_программиста #wiremock #backend #саморазвитие #мотивация_в_ит #продуктовая_разработка #kotlin

2024-02-08

Практическая реализация паттерна Server-Driven UI на Flutter c использованием фреймворка Duit

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

habr.com/ru/articles/792142/

#flutter #dart #SDUI #BDUI

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst