Микрофронтенды – разбираем, что это такое
Микрофронтенды – это применение принципов микросервисного подхода к разработке фронтенда, при котором монолитный фронт разбивается на независимые части.
Идея микрофронтендов заключается в том, что монолитный фронт разбивается на куски, которые разрабатывают отдельные команды. Каждый кусок отвечает за определенный функционал и представляет собой отдельное веб-приложение, которое находится в отдельном репозитории. Это позволяет выстроить полноценную вертикаль релиза от бэка до фронта разными командами и на разных технологиях. При этом внешне для конечного пользователя ничего не меняется: все части фронта интегрируются друг с другом через общий интерфейс.
Пример использования
Допустим, у вас есть монолитное веб-приложение для электронной коммерции, которое включает каталог товаров, корзину, профили пользователей и систему оплаты. Мы решаем перейти на микрофронтенд-архитектуру, чтобы повысить гибкость и ускорить разработку.
Разделяем функциональность приложения на несколько микрофронтендов:
- Каталог товаров: отвечает за отображение списка товаров, фильтрацию и сортировку.
- Корзина: обрабатывает добавление товаров в корзину и оформление заказа.
- Профили пользователей: отображает персональную информацию и историю заказов.
- Система оплаты: обрабатывает оплату заказов.
Преимущества микрофронтендов
- Сокращение времени до релиза (time-to-market). Так как команды могут релизить свои части независимо от других, это ускоряет процесс доставки нового функционала.
- Гибкость и скорость разработки. Команды могут выбирать технологии, которые лучше подходят для их задач, и не зависеть от ограничений монолита.
- Разделение ответственности. Каждая команда будет отвечать за один ил и несколько микрофронтендов. Каждый микрофронтенд будет находиться в отдельном репозитории, что позволяет вести его независимую разработку, развёртывание и тестирование. Команды не будут завязаны на релизный цикл друг друга.
- Масштабируемость. Микрофронтенды позволяют оптимизировать загрузку и исполнение кода, так как каждая часть загружается и выполняется только тогда, когда нужна.
Недостатки микрофронтендов
- Сложность и накладные расходы. Микрофронтенды требуют большего усилия и ресурсов для разработки и поддержки, так как необходимо обеспечить согласованность и совместимость между разными частями. Также они вводят дополнительную сложность в виде интеграции, координации и мониторинга частей.
- Необходимость согласования и совместимости между разными технологиями и командами. Если мы захотим в мире микрофронтендов поменять брендовый цвет с оранжевого на красный, то нам нужно будет попросить все команды изменить этот цвет у себя в компонентах, а в монолите на это ушло бы минут 20.
- Дублирование кода. В микрофронтендах сложнее переиспользовать код. Конечно, есть решения: сделать библиотеку компонентов, вынести все утилиты в одно место, написать шаблоны, но всё равно встречаются места, которые идентичны во всех проектах (например, конфиг), и когда наступит время это править, может быть больно.
Статьи (теория)
- Микрофронтеды: достоинства, недостатки и нюансы
- Объяснение микрофронтендов
- Обзор подходов к реализации микрофронтендов
- 4 способа коммуникации между frontend-приложениями
- Более глубокое погружение в микрофронтэнды
- Типичные ошибки в микрофронтендах
- О причинах возникновения микрофронтендов
Кейсы и практика
- Как устроены микрофронтенды в Dodo
- Опыт использования микрофронтендов в М.Видео
- Опыт микрофронтендов в ВК
- Микрофронтенды в SSR: опыт Авито
- Внутри Mailion: как устроен фронтенд почты на миллион пользователей
- Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде
- Микрофронтенды и виджеты в 2021-м. Доклад Яндекса
- Способ решения проблемы общения микрофронтендов от Тинькофф
- (Микро)фронтенды и микросервисы с помощью Webpack