Фронтенд и бэкенд больше не будут общаться как прежде: создаём конструктор сценариев на базе 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 #разработка

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

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

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

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

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

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

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

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

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

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

https://habr.com/ru/companies/cian/articles/840664/

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

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

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

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

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

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

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

https://habr.com/ru/companies/ozontech/articles/839214/

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

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

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

https://habr.com/ru/companies/spbifmo/articles/829412/

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

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

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

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

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

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

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

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

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

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

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

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

#flutter #dart #SDUI #BDUI