Angular Academy · Урок

Архитектура микрофронтендов

Разделяйте приложения на независимые развёртываемые части

«Архитектура микрофронтендов» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Что такое микрофронтенды

Микрофронтенды переносят идею микросервисов в пользовательский интерфейс: большое веб-приложение разделяется на части, которые разрабатываются, тестируются и развёртываются независимо. Каждая часть принадлежит отдельной команде, а во время выполнения они объединяются в единое приложение.

Какую проблему они решают

Одно большое приложение Angular ("монолитный фронтенд") привязывает все команды к единому графику выпусков, одной сборке и одному развёртыванию. По мере роста команд это замедляет работу всех. Микрофронтенды позволяют командам выпускать изменения по собственному графику.

Независимо развёртываемые части

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

Хост и удалённые модули

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

// conceptually
host  -> loads -> remote: catalog
        -> loads -> remote: checkout
        -> loads -> remote: account

Стратегии объединения

Удалённые модули можно объединять во время сборки, на сервере (SSI/на периферийном узле) или во время выполнения в браузере. Объединение во время выполнения с помощью федерации модулей наиболее распространено в Angular, поскольку сохраняет независимость развёртывания.

Федерация модулей в одном предложении

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

Автономность команд и границы

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

Издержки

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

Когда их НЕ следует использовать

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

Единый внешний вид

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

Особенности Angular

Удалённые модули Angular должны использовать одну копию фреймворка Angular во время выполнения; загрузка двух версий Angular нарушает внедрение зависимостей и увеличивает размер пакета. Такие инструменты, как Native Federation, управляют этим совместным использованием за вас.

Быстрая проверка

Какое преимущество является определяющим для микрофронтендов?

Итоги

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

Часто задаваемые вопросы

Урок «Архитектура микрофронтендов» бесплатный?

Да — полный текст урока «Архитектура микрофронтендов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Архитектура микрофронтендов»?

Разделяйте приложения на независимые развёртываемые части Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Архитектура микрофронтендов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy