Что такое микрофронтенды
Современные веб-приложения становятся все более крупными и сложными и иногда управляются разными командами. Ваше приложение может иметь функции, разработанные разными командами, и вы хотите запустить в производство только определенные функции перед доставкой всего приложения. Как вы управляете разными командами, разными сроками выпуска, если у вас есть один репозиторий?
Разделение приложения на части
Большинство из этих сложных приложений работают на стороне клиента, что затрудняет их обслуживание. Решение - микрофронтенты. Это небольшие приложения, в основном разделенные на функции, работающие вместе для создания более крупного приложения.
Общение между микрофронтендами
Event Bus - один из способов общения между фронтендами. Он использует стандартные обработчики JavaScript под названием PostMessage.
Как инициализировать приложение
Я предпочитаю передавать данные при инициализации - посредством data-attr. Выглядит это так:
$('q-app').dataset.options = JSON.stringify({foo: 'bar'})
Как читать обновленные данные
Читать обновленные данные можно через MutationObserver. Выглядит это так:
var observer = new MutationObserver((mutations) => {
mutations.map(mutationFn);
})
Не забудьте подключить полифил!
Плюсы и минусы микрофронтендов
Приложения становятся независимы друг от друга.
Их легче понять потому что они небольшие и разрабатываются одной командой.
Приложения проще в разработке и развертывании
Поскольку эти приложения небольшие и разрабатываются одной командой, их очень легко разрабатывать и развертывать. Обычно, даже можно развернуть обособлено без родительского приложения.
Разработка приложений становится быстрее
Вся разработка становится быстрее и проще благодаря разделению на команды.
Нет общего кода
Это небольшой недостаток, который легко исправить создавая глупые компоненты или вынося логику общего кода в библиотеки, например в npm пакеты.
Может легко изменить архитектуру, не касаясь старой
Иногда приходится изменить старую архитектуру, что может быть непросто. Благодаря микрофронтендам это можно упростить, перенося логику приложения на новую архитектуру постепенно.
Резюме
- Современные веб-приложения стали сложны и микрофронтенды позволяют упростить их тестирования, развертывание и разработку.
- Использование этого подхода имеет как преимущества так и недостатки. Микрофронтенды стоит использовать для больших приложений создающих большими командами.