Микрофронты с Angular и Native... Заметка
RSS Angular Blog - Medium

Микрофронты с Angular и Native Federation

Программные системы масштаба предприятия часто реализуются несколькими кросс-функциональными командами, и для того, чтобы эти команды могли предоставлять новые функции эффективно, желательно свести к минимуму необходимость координации между ними. Это требует модуляризации, которая вертикализирует систему в низкозависимые области, за которые могут отвечать отдельные команды. Микрофронтенды - это архитектурный стиль, который обещает несколько преимуществ, таких как высокая степень автономии команд, но он также сопровождается многочисленными проблемами.Микрофронтенды приводят к отдельным процессам сборки, которые можно объединить с инкрементальными сборками для улучшения времени сборки. Эта функция также может быть использована без применения других аспектов, таких как выравнивание команд с отдельными приложениями или отдельными развертываниями. Однако индивидуально разработанные микрофронтенды могут расходиться в UI/UX, что приводит к неоднородному виду, и загрузка нескольких приложений увеличивает количество пакетов, которые необходимо скачать, что негативно влияет на время загрузки и увеличивает давление на память.Разделение приложения на низкозависимые части может быть лучшей практикой в целом, но часто бывает трудно четко определить границы между вертикалями, чтобы реализовать их как отдельные приложения. Интеграция их в общее решение добавляет дополнительную сложность, а переход от компиляции во время компиляции к интеграции во время выполнения имеет серьезные последствия.Команда Angular рекомендует проверять, подходят ли альтернативы, такие как реализация отдельных вертикалей в Monorepos. Однако также есть способы компенсировать недостатки микрофронтендов, такие как создание системы дизайна для помощи в согласованном UI/UX или ленивая загрузка отдельных частей системы.Native Federation - это проект сообщества, который обеспечивает тесную интеграцию с Angular CLI и позволяет реализовывать микрофронтенды с помощью Angular. Он позволяет приложению загружать части других отдельно собранных и развернутых приложений лениво и может делиться зависимостями, такими как Angular или RxJS, между хостом и удаленными.Чтобы настроить Native Federation, предоставляется схема, которая настраивает делегацию Native Federation Builder на ApplicationBuilder и создает файл конфигурации federation.config.js. Конфигурация присваивает уникальное имя удаленному или хосту и определяет, какие зависимости следует делиться. Удаленные также определяют экспортированные модули EcmaScript, которые можно загрузить в оболочку.Схема также добавляет код для инициализации Native Federation в main.ts и для загрузки компонента или конфигурации маршрутизации, экспортированной удаленным, традиционная ленивая загрузка объединяется с функцией loadRemoteModule Native Federation.
CdXz5zHNQW_NpT7gwgsMy.png