Варианты реализации микрофронтендов
Переход на микрофронтенды можно разделить на пять этапов. С первыми двумя вы уже знакомы:
Сначала идёт предварительная подготовка. Здесь вы понимаете, готовы вы менять архитектурный стиль или нет.
Если вы решили, что переход нужен, начинается второй этап. Вы разбиваете монолитный фронтенд на бизнес-функции и делите разработчиков на команды. В конце этого этапа у вас есть план разбивки и понимание, какие стратегии проектирования микрофронтендов вы сможете использовать.
Особенности архитектуры обсудили, стратегии проектирования микрофронтендов разобрали. Пора закатать рукава и погрузиться в технические аспекты внедрения.
В этом уроке мы расскажем про следующий шаг. Разберём, какие варианты реализации микрофронтендов есть и как выбрать между ними. В конце темы у вас будет полная схема перехода на эту архитектуру.
Методы интеграции микрофронтендов
Приложение с микрофронтендами — это композиция функций, которые принадлежат независимым командам. На третьем этапе перехода вам нужно решить, как вы будете объединять разные компоненты в единый пользовательский интерфейс.
Для этого нужно выбрать метод интеграции микрофронтендов. Их всего два — build time и run time. У каждого свои плюсы и минусы.
Build time — объединять во время сборки
Вы помещаете все компоненты в контейнер — так же как библиотеки, которые вы устанавливаете из npm.
Этот подход мало отличается от монолитного фреймворка. А ещё у него есть ряд недостатков:
- Нужно синхронизировать разные версии библиотек, иначе возникнут проблемы со сборкой.
- Сложно использовать разные технологии.
- Конечный бандл получится большим, ведь он содержит все зависимости.
- Если появятся изменения в зависимостях, вам придётся развёртывать пакет заново.
- Между контейнером и микрофронтендами будет тесная связь.
Run time — объединять во время выполнения
Вы объединяете микрофронтенды в единый интерфейс во время исполнения кода на стороне пользователя.
При этом подходе нужно продумать управление маршрутизацией, разделением состояний и интеграцией компонентов.
Как выбрать метод интеграции?
Чтобы выбрать метод для интеграции микрофронтендов, нужно оценить требования приложения и структуру команды. А ещё определить желаемую гибкость развёртывания.
Build time лучше подходит простым проектам и проектам, где функции тесно связаны между собой. И наоборот, интеграция run time подходит приложениям, которые требуют высокой гибкости, независимого развёртывания и частых обновлений.
💡 Build time подойдёт, если вам важно:
- Упростить развёртывание. Интеграция во время сборки ориентирована на единый механизм развёртывания и единый исходный код. Все микрофронтенды будут собираться вместе. В результате получится единый пакет для развёртывания.Например, вы работаете над корпоративным интранет-приложением. Там есть три раздела: новости, справочник сотрудников и HR-инструменты. Их обновляют и развёртывают вместе.
- Оставить тесное взаимодействие функций. Микрофронтенды тесно интегрированы с общими зависимостями. Обновления частые и затрагивают сразу несколько частей приложения.Например, вы разрабатываете дашборд администратора. Модули управления пользователями, аналитики и настроек взаимозависимы. Их обновляют вместе.
- Оптимизировать производительность. Интеграция во время сборки позволяет использовать разные техники оптимизации. Например, tree-shaking и разделение кода. Это способствует повышению производительности.Допустим, у вас публичный веб-сайт. Вам важно сократить время первоначальной загрузки и улучшить производительность. С build time интеграцией вы сможете оптимизировать все микрофронтенды во время сборки.
💡 Run time подойдёт, если вам важно:
- Развёртывать модули независимо. У вас несколько команд, которые работают над разными микрофронтендами. Интеграция во время выполнения позволит каждой команде развёртывать свои изменения, не затрагивая другие части приложения.Например, вы создаёте онлайн-магазин. В нём три микрофронтенда: каталог товаров, отзывы пользователей и процесс оформления заказа. Ими управляют разные команды. У каждой команды — свой график развёртывания.
- Динамически обновлять отдельные модули. Вы хотите обновлять отдельные микрофронтенды без переразвёртывания всего приложения.Например, у вас SaaS-приложение. Вы часто выпускаете и улучшаете разные функции: управление проектами, выставление счетов, отчётность.
- Сделать масштабирование гибким. Интеграция во время выполнения позволит вам масштабировать разные части приложения независимо.Например, вы разрабатываете новостной сайт. В нём три ключевых раздела: спорт, политика и развлечения. Во время Олимпийских игр пользователи посещают раздел спорта намного чаще. Вы сможете масштабировать только его.
Задание 4
Перед вами несколько разных приложений. Выберите метод интеграции микрофронтендов, который лучше подойдёт каждом приложению.
Для этого распределите карточки с описанием приложений между методами интеграции.
Итак, вы выбрали метод интеграции микрофронтендов. С build time интеграцией всё просто — вы объединяете микрофронтенды в контейнере. Если вы используете run time, следующим шагом нужно выбрать метод композиции.
Методы композиции микрофронтендов
✏️ Композиция микрофронтендов — это процесс сборки нескольких микрофронтендов в единое целое.
Есть три метода композиции:
- серверная,
- клиентская,
- гибридная.
Разберём их по порядку.
Серверная композиция
При таком подходе все микрофронтенды собирают на сервере. Вся функциональность находится в бэкенде. Он решает, какой микрофронтенд собрать и загрузить. Сервер будет решать, к какому URL направить запрос.
Серверная композиция полезна для начальной загрузки страниц, SEO и упрощения логики на стороне клиента.
Инструменты и техники. В самых простых случаях используют обратный прокси-сервер Nginx. Но в последнее время набирает популярность подход Backend for Frontend. Про него будет отдельный урок в конце темы.
Клиентская композиция
При клиентской композиции браузер отвечает за динамическую загрузку каждого микрофронтенда во время выполнения.
Этот подход позволяет создавать богатый интерактивный пользовательский опыт.
Инструменты и техники. В основном используют JavaScript-фреймворки, которые упрощают интеграцию на стороне клиента. Например, Single SPA или Module Federation. Ещё такой подход можно реализовать с помощью специальных библиотек для фреймворков. Например,
lazy и Suspense в React или динамического импорта в Vue и Angular. Третий путь — это Iframes или веб-компоненты (Web Components).Гибридная композиция
При гибридной композиции вы получаете преимущества двух предыдущих вариантов композиции. Это возможно благодаря паттерну Backend for Frontend (BFF). При таком подходе каждый микрофронтенд имеет свой выделенный бэкенд (BFF).
BFF обрабатывает все данные, взаимодействует с API и при необходимости предоставляет клиенту предварительно отрендеренный HTML. Это полезно для начальной загрузки страниц и SEO. Сервер передаёт клиенту полностью сформированную страницу.
После первоначальной загрузки за дело берётся клиентская часть. Она берёт на себя динамические взаимодействия, которые необязательно требуют обращения к серверу. В этом случае фреймворки и JavaScript-библиотеки управляют обновлениями DOM, состоянием клиента и рендерингом на основе взаимодействия с пользователем.
Инструменты и техники. При гибридной композиции команды используют инструменты как серверной композиции, так и клиентской.
Задание 5
Соотнесите методы композиции микрофронтендов и их описания.
Как выбрать метод композиции
Если у вас три варианта:
- Объединять на серверной стороне. Выбирайте этот вариант, если вам важен SEO и быстрый первоначальный отклик.
- Объединять на клиентской стороне. У вас много интерактивного контента, который меняется в зависимости от взаимодействия с пользователем.
- Гибридное объединение. Так вы получите преимущества сразу двух подходов: первоначальную загрузку страниц можно поручить серверу, а интерактивные взаимодействия — клиенту. Но и здесь есть подводные камни: нужна опытная команда, которая справится с такой реализацией. Важно, чтобы у разработчиков был опыт работы с микрофронтендами, они разбирались в инструментах и подходах.
Итак, третий этап перехода выглядит так:
Итоги
Когда команда выбирает способ реализации микрофронтендов, ей нужно принять несколько технических решений:
- Выбрать метод интеграции микрофронтендов. Их два: build time и run time. Объединение микрофронтендов во время сборки близко к монолитному подходу. Объединение во время выполнения расширяет возможности и позволяет создавать высокоинтерактивные приложения.
- Если вы выбрали run time, вам нужно выбрать метод композиции микрофронтендов. Их три: серверная композиция, клиентская и гибридная. Серверная композиция хороша для первоначальной загрузки страниц и SEO. Клиентскую лучше использовать, если у вас много интерактивного контента. С гибридным подходом вы получите преимущества обоих методов, но этот вариант подходит только опытным командам.
Следующий урок — про инструменты для создания микрофронтендов.