5 причин перехода к микрофронтенд архитектуре

Независимые команды разработки

Если вы работаете в нескольких командах, организационные накладные расходы становятся значительными. Общение должно происходить хотя бы ежедневно. Согласование, необходимое для управления разработкой и развертыванием, становится невозможным. Благодаря микрофронтендам управление масштабируемостью с точки зрения ресурсов разработки становится намного проще. Как правило, каждая функция может быть разработана независимой командой. Каждая команда может автономно публиковать свой функционал без какого-либо согласования. Некоторые подходы к микрофронтендам требуют, по крайней мере, общей системы сборки или общего уровня (например, reverse proxy). Хотя такие вещи все еще можно решить заранее, они делают все решение более сложным, чтобы его можно было правильно настроить на начальном этапе. Поэтому рекомендуется искать решения, которые уже работают после первоначальной настройки.

Более быстрое время выхода на рынок (TTM, Time To Market)

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

• начать новый проект
• разработать MVP
• зарелизить MVP
• пройтись по MVP (доработать и зарелизить)
• перейти в режим обслуживания

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

Фича флаги (Feature Flags)

Замечательно иметь отдельные микрофронтенды, составляющие вместе одно приложение. Но довольно часто владельцы продуктов хотят выйти за рамки технической композиции: они хотят использовать модульность также и для бизнес-целей. Случалось ли вам когда-нибудь, что определенная функциональность должна быть доступна только определенным пользователям? Функции администратора должны быть доступны только администраторам. Хотя UI не следует использовать в качестве уровня защиты (эти проверки осуществляются на бэкэнде), мы также не хотим показывать вещи, которые нельзя (или не следует) использовать. Следовательно, мы добавим в наш код такие вещи, как:

if (hasFeature('foo')) {
  // ...
}

Это довольно плохой стиль. Наш код теперь полон вещей, которые, скорее всего, изменятся. Что, если foo верно для всех? Что делать, если функция деактивирована для всех? Что, если завтра появится новое условие, изменяющее некоторые части, чтобы также оценить, включена ли переменная bar? Поскольку у нас уже есть надлежащая модульность, довольно просто добавить фича флаги. Все, что нам нужно сделать, это ввести условный рендеринг модуля (или его загрузки) с помощью флагов. Никаких изменений кода на функциональном уровне модуля. Хотя подобные вещи могут работать и в классических монолитах, они требуют дополнительных усилий по реализации. С микрофронтендами архитектура уже полностью к этому готова.

Единая ответственность

Несмотря на то, что микросервисы не являются решением для всего, они преподносятся как таковые. Да, они, безусловно, являются хорошим решением во многих (или даже в большинстве) случаях, но очень часто монолит или другая форма сервис-ориентированной архитектуры может оказаться не менее хорошим решением. Тем не менее, наличие выделенного сервиса (с ответственной за него командой) в бэкенде — хорошее начало. Замена монолита различными микрофронтендами — это отличное продолжение, поскольку можно ввести дополнительное измерение для разделения команд.

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

Свобода технологий

За последние два года фронтенд-технология в значительной степени стабилизировалась. Хотя и появляются новые подходы, например Svelte, которые бросают вызов таким библиотекам как React, но все же серьезных преимуществ они не предлагают. Часто существует несколько подходов и не существует универсального решения. В микрофронтенд приложениях все разные приложения могут работать вместе. Страница, написанная с помощью Angular, может использовать компонент из микрофронтенда React и наоборот. Модальное диалоговое окно для сохранения пользовательских данных может быть написано на Vue, а компонент под ним — на Svelte.

Проблема последовательного пользовательского опыта становится сложной. Возникает много вопросов. Среди наиболее важных из них:

• Мы разделяем только CSS?
• Как насчет поведения?
• Являются ли веб-компоненты решением для этого?

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

Итоги

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

Микрофронтенд - это архитектура, которая позволяет масштабироваться, делать команды независимыми и больше ориентироваться на бизнес потребности. Мы начинаем большую и подробную серию видео о микрофронтенд архитектуре на Boosty с ранним доступом. Некоторые темы будут эксклюзивно доступны только на Boosty по подписке. Мы будем читать и обсуждать книгу “Building Micro-Frontends. Scaling Teams and Projects, Empowering Developers”. Книга не переведена на русский язык. В этих видео мы будем обсуждать самую суть книги, без воды. Также я буду давать свои комментарии, основываясь на своем опыте внедрения микрофронтендов в большом проекте.

В этих видео будет дано большое количество полезной информации по всем аспектам распиливания монолита на микрофронтенды. Мы рассмотрим большое количество вариантов внедрения микрофронтенд архитектуры, рассмотрим все достоинства и недостатки вариантов, сложности перехода на микрофронтенд архитектуру и что стоит учесть заранее. Также коснемся принципов Domain Driven Design (DDD) и как эти принципы связаны с микрофронтендами. Рассмотрим следующие темы:

1. Как распилить монолит на микрофронтенды
2. Архитектуры фронтенд приложений - SPA, Изоморфные, Статичные, JAMstack
3. Что такое микрофронтенд и каковы его принципы
4. Что учитывать при переходе на микрофронтенд
5. Краткий обзор видов разделения на микрофронтенды
6. Вертикальное разделение на микрофронтенды
7. Горизонтальное разделение на микрофронтенды
8. Микрофронтенд на основе Module Federation
9. Микрофронтенд на основе iframes
10. Микрофронтенд на основе веб-компонентов
11. Server Side микрофронтенды
12. Edge Side микрофронтенды
13. Проект с Webpack Module Federation
14. Эволюция проекта с Webpack Module Federation
15. Как деплоить микрофронтенды
16. Как версионировать микрофронтенды
17. CI/CD микрофронтендов
18. Стратегии деплоя микрофронтендов
19. Пример автоматизации пайплайна для микрофронтенда
20. Общение микрофронтендов с бекендом
21. Пример распиливания монолита на микрофронтенды. О приложении
22. Пример распиливания монолита на микрофронтенды. Детали реализации
23. Как презентовать микрофронтенд архитектуру команде