Стратегии проектирования микрофронтендов

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

Стратегии проектирования микрофронтендов

Стратегий всего три:

вертикальная нарезка,
автономность команд,
изоляция.

Это не строгие правила, а проверенные подходы. Они помогут вам повысить производительность приложения и упростить обслуживание кода.

В прошлом уроке мы приводили в пример онлайн-магазин «Шайба». Чтобы внедрить микрофронтенды, команда применила все три стратегии. Это здорово, но не во всех проектах получится так сделать. Ориентируйтесь на особенности своего проекта.

А теперь рассмотрим каждую из стратегий.

Вертикальная нарезка

Организуйте микрофронтенды вокруг бизнес-возможностей или пользовательских маршрутов.

Стратегия основана на предметно-ориентированном проектировании (Domain-Driven Design, DDD). Этот подход предполагает, что приложение делят на домены (domain) — это предметные области, которые описывают разные цели бизнеса.

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

Пример

Вы разрабатываете систему управления медицинским центром. Пообщавшись с клиентом, вы выделили четыре домена:

регистрация пациентов,
назначение встреч,
медицинские записи,
выставление счёта.

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

Такое разделение повысит эффективность команд. Они сосредоточатся на своих областях: будут прицельно улучшать пользовательский опыт и функциональность.

Плюсы

Вертикальная нарезка гарантирует, что каждый микрофронтенд предоставляет полный набор функций, который можно разрабатывать, тестировать и развёртывать независимо от других. Это снижает зависимость между командами, упрощает управление проектами и масштабирование.

Минусы

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

Когда использовать стратегию?

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

Задание 1

Что означает стратегия вертикальной нарезки в микрофронтендах? Выберите один правильный ответ.

Организация микрофронтендов вокруг конкретных технологических стеков

Организация микрофронтендов вокруг конкретных бизнес-возможностей или клиентского пути

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

Создание единого фронтенда для всех бизнес-функций

Объединение всех микрофронтендов в одну кодовую базу

Автономность команд

Дайте каждой команде возможность выбрать технологический стек, который подходит под её задачи.

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

Пример

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

Плюсы

Автономия команд способствует росту инноваций и помогает создавать более адаптированные технические решения. Это ускоряет разработку и улучшает качество продукта. Разработчики тоже в плюсе — они могут работать с технологиями, в которых они разбираются или которые им интересно изучать.

Минусы

Автономия может привести к фрагментации и трудностям в управлении сквозными проблемами. Например, стилизацией, доступностью и общей согласованностью пользовательского опыта.

Когда использовать стратегию?

Разные технологические потребности. Вы знаете, что разные части приложения выиграют от разных технологических стеков. Например, где-то специфические требования к скорости отклика, где-то — к обработке данных или взаимодействию с пользователем.
Проекты, ориентированные на инновации. В проекте поощряют быстрые инновации и эксперименты. Вы понимаете, что команды смогут извлечь пользу из изучения новых фреймворков или библиотек, которые подходят для разработки их функций.

Задание 2

Какие из следующих утверждений верны для стратегии автономности команд в микрофронтендах? Выберите все правильные ответы.

Каждая команда может выбирать свой технологический стек

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

Все команды должны использовать один и тот же технологический стек

Автономия команд способствует инновациям и быстрому внедрению новых решений

Когда командам предоставляется свобода в выборе технологий, быстрее внедряются новые решения и легче проходит адаптация к изменяющимся требованиям.

Фрагментация и трудности в управлении сквозными проблемами могут быть минусами этой стратегии

Хотя автономия команд имеет много преимуществ, она также может привести к фрагментации и трудностям в управлении такими общими аспектами, как стилизация, доступность и согласованность пользовательского опыта.

Общие зависимости между микрофронтендами не допускаются

Изоляция

Убедитесь, что у микрофронтендов нет общих зависимостей во время выполнения.

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

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

Пример

В приложении есть финансовая панель. Торговые данные в реальном времени требуют быстрого обновления. Они не должны зависеть от более статичных разделов — например, от управления профилем пользователя или новостной ленты.

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

Плюсы

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

Минусы

Если общие библиотеки включены в несколько микрофронтендов, размер приложения увеличится. Эту проблему можно смягчить с помощью разных техник. В следующем уроке вы познакомитесь с Module Federation. Этот инструмент позволяет динамически загружать общие зависимости.

Когда использовать стратегию?

Частые обновления и развёртывания. Применяйте изоляцию в средах, где микрофронтенды должны обновляться часто и независимо друг от друга. Это гарантирует, что обновления не помешают друг другу.
Задачи масштабирования. Вам нужно независимо масштабировать разные части приложения. У них разные нагрузки и требования к производительности.

Задание 3

В какой из следующих ситуаций лучше всего применить стратегию изоляции в микрофронтендах? Выберите единственный ответ.

Когда необходимо объединить все микрофронтенды в единую кодовую базу

Когда микрофронтенды должны часто обновляться и развёртываться независимо друг от друга

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

Когда все микрофронтенды используют один и тот же технологический стек

Когда требуется минимизировать использование общих библиотек

Время закрепить материал!

Задание 4

Сопоставьте каждую ситуацию с подходящей стратегией или комбинацией стратегий проектирования микрофронтендов.

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

Автономность команд
Вертикальная нарезка
Изоляция

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

Автономность команд подойдёт проектам, ориентированным на инновации. Эта стратегия позволит каждой команде использовать тот технологический стек, который лучше подходит для её задач.

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

Итоги

Чтобы получить максимум преимуществ от архитектуры микрофронтендов, можно использовать три стратегии проектирования:

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

Желательно использовать все три подхода. Но не всегда это получается. Ориентируйтесь на особенности своего проекта и выбирайте стратегии, которые вам подходят.

В следующем уроке переходим к технической реализации микрофронтендов. Разберём, как провести переход на эту архитектуру. А ещё — какие инструменты и технологии стоит использовать.