Угловые и микро-фронты

Я занимаюсь некоторыми исследованиями, как разделить огромный одностраничный монолит на архитектуру с микро-интерфейсом.

Идея:

  • страница состоит из нескольких компонентов, которые будут работать автономно
  • каждый компонент управляется одной командой разработчиков
  • каждая команда может изменять, обновлять и развертывать свои компоненты, не разбирая компоненты других команд
  • каждая команда выбирает собственную инструментальную таблицу

Причина

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

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

Это работает с угловым?

В то время как независимые обновления версий необходимы, было бы разумно ограничить команды несколькими поддерживаемыми фреймворками (Angular, React, Vue, Polymer...), и сейчас я пытаюсь создать демо, состоящее исключительно из Angular-Apps.

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

Мне удалось загрузить несколько Angular-Apps (разные версии, каждый из которых размещен на собственном сервере) на одном веб-сайте, используя HTML-Imports. Однако существует несколько global зависимостей, которые необходимо разделить между приложениями

  • zone.js может быть запущен только один раз
  • Маршрутизация требует изменений url
  • Файлы браузера, такие как файлы cookie, sessionstorage и т.д.

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

Есть ли какое-либо решение, кроме " iframes ", чтобы получить несколько Угловых (5) приложений, работающих на одной странице?

ОТВЕТЫ

Ответ 1

Вместо того, чтобы прямо предлагать ПРОТИВ этой идеи в основном из-за отдельных требований к стеку, я выложу компромисс и предоставил некоторые ограничения, которые сделают это возможным.

страница состоит из нескольких компонентов, которые будут работать автономно

Мы все знаем, что это предлагается из коробки в угловых компонентах с четкой демаркацией входов и выходов.

Small CAVEAT: Когда/Если вы передаете объекты для @Input и выделяете объекты событий с @Output() взаимодействующих компонентов @Output() необходимо согласовать заранее определенный интерфейс.

Обход проблемы: создайте еще один проект TypeScript, который просто определяет эти артефакты. Все остальные "компонентные проекты" будут зависеть от конкретной версии этого.

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

Команды Dev могут распространять компоненты так же, как и другие Угловые проекты в openource. Они могут публиковать свои артефакты в каком-то репозитории npm. Чтобы разработать атрибутивные компоненты, я рекомендую вам обратиться к Angular Material2, который может быть подавляющим, или вы можете использовать что-то вроде ngx-library-builder (на основе Angular Team Member filipesilva/angular-quickstart-lib), которое использует каждая команда компонента.

CAVEAT: до этой даты у угловой команды нет быстрой компоновки проектов с библиотекой компонентов, как это видно в Angular CLI. Но многие разработчики создали своего рода библиотечные сборщики, чтобы заполнить пробел в Angular CLI.

каждая команда может изменять, обновлять и развертывать свои компоненты, не разбирая компоненты других команд

Попросите свой основной проект вытащить все компоненты и выполнить периодическую/измененную работу по созданию/развертыванию на одном сервере CI. Это, по сути, производственные сборки AOT со всеми последними выпусками компонентов. В качестве дополнительного бонуса вы можете провести некоторые абстрактные тесты e2e, построенные для проведения автоматизированного тестирования интеграции, гарантируя, что побочные эффекты одного компонента не нарушают другие компоненты.

CAVEAT: Будет сложно управлять тем, как каждая команда разрабатывает компоненты, то есть они оптимально используют и распределяют память, процессор и другие ресурсы. например, что, если одна команда начинает создавать подписки и не удаляет их. Использование некоторого статического анализа кода может быть полезным, но в данный момент вы не сможете использовать этот исходный код, если они не публикуют исходный код.

каждая команда выбирает собственную инструментальную таблицу

Это полный прерыватель транзакций, если вы не имеете в виду "инструментальную таблицу", как в инструментах разработчика, таких как IDE и некоторые "devDependencies". Хотя определенные части "devDependencies" каждой команды должны иметь одинаковые точные версии наборов угловых наборов, таких как компиляторы и т.д.

По крайней мере, каждая команда должна использовать одинаковые угловые, RxJS и т.д.

Самое главное, что следует заботиться о том, чтобы каждая из команд не загружала какие-либо компоненты - только основные проекты будут иметь модуль начальной загрузки и загружать корневой компонент. Это поможет ответить на вашу проблему zone.js

Это работает с угловым?

Если вы признаете ограничения и обеспечиваете управление, я предлагаю пойти на это.

Ответ 2

Мы задали себе тот же вопрос. К сожалению, кажется, что ответ на вопрос

Есть ли какое-либо решение, кроме "iframes", чтобы получить несколько Угловых (5) приложений, работающих на одной странице (изменение: где каждое приложение с угловым выражением может использовать другую Угловую версию)?

в настоящее время

Нет, к сожалению, нет, если вы хотите использовать обнаружение изменений Angular (которое использует zone.js).

Из-за zone.js Angular загрязняет глобальный масштаб. Еще хуже. Zone.js исправляет множество API-интерфейсов браузера (https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md), чтобы определить, когда зона завершена.

Его можно использовать только разные версии фреймворка на одной странице без побочных эффектов, если структура не касается глобальной области (это, похоже, верно для React und Vue). Затем вы можете связать разные версии фреймворков с каждым приложением через Webpack (с раздельной областью и нижней стороной, что увеличивает размер каждого пакета приложений).

Итак, если вы хотите создать веб-страницу с помощью Angular, где на одной странице должны быть интегрированы разные приложения/модули, единственным возможным решением в настоящее время является создание монолитного развертывания (например, объединение разных модулей из разных команд в одном угловом приложении с помощью CI/CD, как объяснил бхантол в своем ответе).

Похоже, что команда Angular также знает о проблеме и что они могут решить ее с помощью следующих основных версий. См. Robwormwalds ответ на следующую проблему Github в отношении дорожной карты "Угловые элементы": https://github.com/angular/angular/issues/20891

Надеюсь, у Angular team будет больше информации по этой теме, когда следующая крупная версия Angular 6 будет выпущена в конце марта.

Ответ 3

Посмотрите на угловые элементы (пользовательские элементы). https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/

Новая версия Ionic (4) полностью основана на ней, чтобы ее можно было использовать для каждой версии Angular и на всех платформах JS.

Для этого они создали https://stenciljs.com/, которые помогут вам создавать пользовательские элементы.

Но если все команды используют Angular, каждый из них может создать библиотеку, использующую ngm для примера.

Ответ 4

Да, ты можешь.

Однако вы не хотите, чтобы вы застряли в структуре при написании веб-компонентов, потому что вся точка веб-компонента должна быть повторно использована, возможно, где угодно.

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

Наконец, то, что вы ищете прямо сейчас, не является угловым, но StencilJS. Stencil - это компилятор для веб-компонентов, которые также создают виртуальный DOM внутри вашего компонента для улучшения его пользовательских характеристик. Проверьте это ;-)

Ответ 5

Единственный способ интегрировать различные Угловые приложения, помимо IFrames и связи через postMessage, - это "Глубокое связывание" и обмен информацией с использованием URL-параметра. Все Угловые приложения затем расположены на собственной вкладке браузера. Но для общих служб и компонентов вы можете захотеть реализовать "Совместное ядро", используемое всеми вашими Угловыми приложениями, поэтому вы застряли в определенном диапазоне угловых версий. Если вам требуется это совместное ядро, рекомендуется использовать метод NGModule. Вы можете смешивать версии Angular 2 и Angular 5 в одном приложении, потому что они обратно совместимы. Нет необходимости в том, чтобы команды застревали в той же версии, пока Angular Team не введет нарушения. Несмотря на это, ваши технические долги растут, когда вы не обновляетесь. Частота технических обновлений определенно выше в области Angular/Javascript.

Ответ 7

Кажется, что какое-то время было решение для ваших нужд. Взгляните на проект Single-SPA ЗДЕСЬ.

Это обертка SPA проект для ваших микро SPA проектов.