💠 Микрофронтенды – разбираем, что это такое

Микрофронтенды – это применение принципов микросервисного подхода к разработке фронтенда, при котором монолитный фронт разбивается на независимые части.

Идея микрофронтендов заключается в том, что монолитный фронт разбивается на куски, которые разрабатывают отдельные команды. Каждый кусок отвечает за определенный функционал и представляет собой отдельное веб-приложение, которое находится в отдельном репозитории. Это позволяет выстроить полноценную вертикаль релиза от бэка до фронта разными командами и на разных технологиях. При этом внешне для конечного пользователя ничего не меняется: все части фронта интегрируется друг с другом через общий интерфейс.

✏️ Пример использования

Допустим, у вас есть монолитное веб-приложение для электронной коммерции, которое включает каталог товаров, корзину, профили пользователей и систему оплаты. Мы решаем перейти на микрофронтенд-архитектуру, чтобы повысить гибкость и ускорить разработку.

Разделяем функциональность приложения на несколько микрофронтендов:
➖ Каталог товаров: отвечает за отображение списка товаров, фильтрацию и сортировку.
➖ Корзина: обрабатывает добавление товаров в корзину и оформление заказа.
➖ Профили пользователей: Отображает персональную информацию и историю заказов.
➖ Система оплаты: обрабатывает оплату заказов.

✅ Преимущества микрофронтендов

💩Сокращение времени до релиза (time-to-market). Так как команды могут релизить свои части независимо от других, это ускоряет процесс доставки нового функционала.

💩Гибкость и скорость разработки. Команды могут выбирать технологии, которые лучше подходят для их задач, и не зависеть от ограничений монолита.

💩Разделение ответственности. Каждая команда будет отвечать за один или несколько микрофронтендов. Каждый микрофронтенд будет находиться в отдельном репозитории, что позволят вести его независимую разработку, развёртывание и тестирование. Команды не будут завязаны на релизный цикл друг друга.

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

⛔️ Недостатки микрофронтендов

💩Сложность и накладные расходы. Микрофронтенды требуют большего усилия и ресурсов для разработки и поддержки, так как необходимо обеспечить согласованность и совместимость между разными частями. Также они вводят дополнительную сложность в виде интеграции, координации и мониторинга частей.

💩Необходимость согласования и совместимости между разными технологиями и командами. Если мы захотим в мире микрофронтендов поменять брендовый цвет с оранжевого на красный, то нам нужно будет попросить все команды изменить этот цвет у себя в компонентах, а в монолите на это ушло бы минут 20.

💩Дублирование кода. В микрофронтендах сложнее переиспользовать код. Конечно, есть решения: сделать библиотеку компонентов, вынести все утилиты в одно место, написать шаблоны, Но всё равно встречаются места, которые идентичны во всех проектах (например, конфиг) и когда наступит время это править, может быть больно.

Подборка материалов по микрофронтендам доступна в базе знаний по системному анализу

#архитектура