С развитием цифровизации и облачных технологий в разработке интерфейса произошел сдвиг парадигмы. Клиентская сторона стала более динамичной, чем когда-либо прежде. Мы наблюдаем тенденцию к перемещению большого количества кода на стороне клиента, что привело к необходимости разделять модули, делать их независимо развертываемыми для более быстрой доставки функций.
Что такое MicroFrontend?
Архитектура MicroFrontend - это подход к проектированию, позволяющий разделить монолитное приложение на несколько более мелких приложений. Каждое приложение отвечает за свою особенность.
Это дает возможность нескольким командам разработчиков работать над одним приложением в полной изоляции. Кроме того, каждое меньшее приложение легче понять и внести в него изменения, случайно не сломав другие части приложения.
Обычно микроприложения интегрируются с оболочкой приложения (контейнером), которая содержит общие представления продукта.
На протяжении всего блога мы будем рассматривать список продуктов и микроприложение корзины, чтобы понять способы интеграции микроприложений с оболочкой приложения (контейнер).
Интеграция времени сборки
Это происходит при компиляции с использованием любого из сборщиков. Прежде чем контейнер загружается в браузер, он получает доступ к исходному коду приложений "Список товаров" и "Корзина". Один из подходов во время сборки может заключаться в рассмотрении микроприложений как пакета NPM, но он создает зависимость с развертыванием оболочки приложения (контейнера).
Интеграция времени выполнения
Это происходит в самом браузере во время выполнения. После того, как контейнер загружается в браузере, он получает доступ к исходному коду ProductList и корзины. При подходе во время выполнения вы можете попробовать получить пакет JS микроприложений непосредственно из оболочки приложения (контейнера). Это немного сложнее реализовать, чем интеграция во время сборки. Однако этот подход разделяет развертывание оболочки приложения (контейнера) и микроприложения. Плагин объединения модулей Webpack можно использовать для создания связей между различными микроприложениями во время выполнения.
Интеграция с сервером
При отправке JavaScript для загрузки контейнера сервер решает, включать ли исходный код микроприложения в зависимости от URL-адреса запроса.
Нет единого идеального решения для интеграции. У каждого решения есть свои плюсы и минусы. Лучший способ определиться с подходом - взглянуть на ваши требования и соответствующим образом оценить интеграцию.
Если вам понравилось это читать, не забывайте хлопать в ладоши. 👏👏
Вы также можете подписаться на меня в Twitter @ Akash940 для получения обновлений JavaScript или React.
Спасибо!
