Микро-Front-end — это архитектурный подход, при котором единый пользовательский интерфейс (UI) приложения или платформы состоит из независимых, автономных front-end компонентов, разрабатываемых и развёртываемых разными командами, часто с использованием разных технологий.

Микро-Frontend — это ответ на этот вопрос: как масштабировать разработку UI, не теряя единства и согласованности. 

По аналогии с микросервисами, которые позволяют разбить back-end на независимые сервисы, микро-Front-end делает то же самое с front-end.

Пример: интернет-банк, где интерфейс формируется из блоков, разрабатываемых разными командами, и состоит из:

• CustomerProfileWidget (командаCRM)
• AccountBalanceWidget (командадепозитов)
• LoanOffersWidget (команда кредитов)

Каждый виджет:

• Разрабатывается независимо
• Насвоём стеке (React, Angular, Vue)
• Подключается к своим микросервисам (через PBC)
• Развертывается отдельно
• Обновляется без пересборки всего приложения

Все вместе — единая страница.

Эти виджеты — front-end эквивалент PBC.

Как back-end PBC обеспечивают бизнес-функции, так микро-Front-end-компоненты обеспечивают бизнес-читаемые UI-блоки.

Преимущества подхода микро-Front-end:

• Независимость команд и скорость разработки

Каждая команда владеет своим front-end-компонентом: от разработки до релиза. Команды не блокируют друг друга при релизах.

• Технологическая гибкость и автономность

Команды могут использовать разные фреймворки (React, Angular, Vue), оптимальные для своей задачи, если это согласовано с платформой.

• Масштабируемость

Новые виджеты добавляются без переписывания всего UI.

Быстрое внедрение изменений.

• Автономное развёртывание и обновление

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

• Повышение устойчивости

Падение одного компонента не ведёт к падению всего приложения (при правильной изоляции).

• Поддержка омниканальности и обеспечение единого UX

Микро-Front-end позволяет собирать интерфейсы под разные каналы из одних и тех же блоков: один компонент можно адаптировать для разных каналов (веб, мобильное приложение, IVR).

Наряду с преимуществами у данного подхода есть и ограничения:

это необходимость централизованного контроля (чтобы не было визуального хаоса) и риск дублирования стилей и логики.

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

Микро-Frontend — необходимый элемент масштабируемого UI при масштабировании digital-продуктов.

Как back-end PBC публикуются в реестре и используются в low-code, так и микро-Frontend-компоненты могут быть зарегистрированы в каталоге UI-блоков и использоваться разработчиками и бизнесом.

Готовые микро-Frontend-компоненты могут быть включены в low-code конструктор как drag-and-drop блоки.

Микро-Frontend — это последнее звено в цепочке:

PBC → ArchiMate → Генерация кода → Реестр → Low-code → Микро-Frontend → Единый клиентский опыт

И без него вся работа по стандартизации back-end теряет смысл — потому что пользователь видит не API, а интерфейс, который должен обеспечивать единый клиентский опыт.