Микрофронтэнды Iframe: Введение и настройка

Эта статья будет разбита на несколько частей.

Существует множество способов реализации микрофронтендов, и все крутые ребята в квартале делают это. Что ж, давайте запачкаем руки и посмотрим, как можно реализовать микрофронтенд, используя, возможно, один из самых самый уродливый Самый простой способ из возможных — использование iframes. В чем минусы такого подхода? Вы получаете страницу внутри страницы, со всеми дополнительными запросами, которые из нее выходят. Хотите кнопку в iframe, построенном с помощью Vue? Повеселитесь, загружая столько Vue runtimes, сколько кнопок есть на вашей странице. Если это просто кнопка, то вам, скорее всего, лучше использовать веб-компоненты, но я отвлекаюсь от темы. Преимущества iframe тоже очевидны: надежная изоляция, так что внутри него можно смело загружать даже Angular, он не будет «обезьянничать» в вашем главном окне или как-то реагировать на то, что происходит за пределами iframe. А поскольку иногда количество загружаемых файлов не является проблемой (т.е. вы разрабатываете десктопное приложение, а не веб-приложение), iframe могут быть приемлемым выбором для создания микрофронтендов (вы можете доказать, что я ошибаюсь).

Что мы создаем

Итак, мы собираемся создать приложение Angular, которое взаимодействует с The Bored API и использует приложение React внутри iframe для отображения результатов. Запросы будут вызываться нажатием кнопки в приложении React. Кроме того, мы сделаем приложение React отдельным приложением, чтобы оно могло функционировать даже при обращении к нему как к отдельному приложению. Оно будет определять, загружено ли оно как модуль оболочки или как отдельное приложение.

Инструменты

Мы будем использовать Nx, это несгибаемый инструмент для монорежима, который подходит для наших нужд, поскольку он может работать как с React, так и с Angular, и позволит нам делиться кодом с помощью библиотек.

Давайте сделаем это!

Прежде всего, создадим пустую рабочую область nx для разработки приложений:

npx create-nx-workspace@latest demo__nx-iframe-microfrontends --preset=apps
Войти в полноэкранный режим Выйти из полноэкранного режима

Следующим шагом будет добавление плагинов Angular и React и пакета concurrently, чтобы мы могли запускать два приложения одновременно:

npm install -D @nrwl/angular @nrwl/react concurrently
Войти в полноэкранный режим Выход из полноэкранного режима

Также обновим раздел scripts, чтобы мы могли использовать nx в командной строке:

// package.json
"scripts": {
    ...
    "nx": "nx",
Вход в полноэкранный режим Выйти из полноэкранного режима

Добавив nx в скрипты и подготовив плагины, мы можем перейти к созданию приложения Angular, которое будет служить оболочкой:

npm run nx -- g @nrwl/angular:app angular-shell --style=scss --routing --prefix=app
Вход в полноэкранный режим Выход из полноэкранного режима

React приложение для отображения результатов нашего bored-api запроса:

npm run nx -- g @nrwl/react:app react-app --style=scss --routing
Войти в полноэкранный режим Выход из полноэкранного режима

И библиотека, которая будет использоваться для обмена моделями между двумя фронтенд-приложениями:

npm run nx -- g @nrwl/js:library models
Войти в полноэкранный режим Выход из полноэкранного режима

Когда оба приложения готовы, пришло время обновить раздел scripts в package.json еще раз, чтобы они могли быть запущены одновременно с помощью пакета concurrently:

"scripts": {
    "start": "concurrently --kill-others "nx serve react-app" "nx serve angular-shell --port=4201"",
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, у нас будет React на порту 4200, который используется по умолчанию, и Angular на 4201.

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

Оцените статью
Procodings.ru
Добавить комментарий