В новом мире разработчиков интерфейсов доминируют одностраничные приложения, созданные с использованием различных JavaScript, таких как Angular, React, Vue.js и т. д., особенно корпоративные приложения, управляемые данными.

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

Что произойдет, когда:

  • Вы хотите работать с несколькими командами, у которых не будет доступа к вашей кодовой базе.
  • Вы хотите использовать несколько фреймворков/библиотек (скажем, Angular и ReactJs)
  • Вы хотите динамически загружать разные приложения в зависимости от типа пользователя.
  • Вы хотите создать приложение в разных вариантах

В этом примере мы создадим микроинтерфейсное приложение с несколькими командами и несколькими строками настройки.

Предпосылки:

Создание пустой рабочей области NX

Давайте создадим рабочее пространство NX для работы и назовем его “micro-frontend”:

npx create-nx-workspace@latest micro-frontend

Команда create-nx-workspace попросит вас выбрать предустановку, которая настроит некоторые плагины и создаст ваши приложения, которые помогут вам начать работу.

? What to create in the new workspace (Use arrow keys)
❯ apps [an empty workspace with no plugins with a layout that works best for building apps]

Когда представлены интерактивные параметры, выберите пустую рабочую область.

Создать приложение Angular HOST & REMOTE

Предпосылкой для создания хоста Angular является наличие пакета @nrwl/angular внутри рабочей области. Давайте установим пакет nrwl с помощью следующей команды

npm install — save @nrwl/angular

Перед установкой убедитесь, что вы находитесь в каталоге «micro-frontend».

Используйте следующую команду для создания нового приложения Angular с использованием NX:

npx nx generate @nrwl/angular:application --name=angularHost --style=scss --port=4200 --e2eTestRunner=none --linter=none --mfe --mfeType=host --unitTestRunner=none --no-interactive

Создайте удаленное приложение Angular с помощью следующей команды:

npx nx generate @nrwl/angular:application --name=angularRemote --style=scss --port=4199 --e2eTestRunner=none --host=angular-host --linter=none --mfe --routing --unitTestRunner=none --no-interactive

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

nx run angular-host:serve-mfe

Известная ошибка. На момент написания этой статьи известно, что Webpack не устанавливается по умолчанию. Чтобы устранить эту проблему, удалите каталог node_modules и файл package-lock.json и повторите npm install.

Добавьте эту конфигурацию маршрутизатора в app.module.tsв «/angular-host/src/app/».

RouterModule.forRoot([{
  path: '',
  loadChildren: () =>
    import('angular-remote/Module').then((m) =>m.RemoteEntryModule),
}])

Добавьте <router-outlet></router-outlet> внутрьapp.module.html, чтобы убедиться, что удаленное угловое приложение загружается в хост-приложение.

Вот и все! У нас есть основная схема работающего микроинтерфейса.

Вы можете получить репозиторий здесь: https://github.com/ssunils/micro-frontend-example.

Создавайте микроинтерфейсы с компонентами

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

Инструменты OSS, такие как Bit, предлагают отличный опыт разработчика для создания интерфейсов Micro на основе компонентов. Создавайте компоненты, сотрудничайте и создавайте масштабируемые приложения. Попробуйте →