Вы можете выставлять веб-компоненты из каждого вашего приложения и объединять / использовать их в своем главном SPA. Веб-компоненты поддерживаются всеми браузерами, а все ведущие фермерские системы SAP (такие как angular, ember, реагируют, vue) поддерживают веб-компоненты. Таким образом, вы не привязываетесь к какой-либо отдельной структуре SPA и можете возобновить компоненты в любом месте.

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

Использование фреймворка с открытым исходным кодом для одного спа:https://github.com/CanopyTax/single-spaИспользование Iframes (дружественных Iframes) хост-приложения (оболочки) и загрузка каждого приложения в соответствии с текущим URL.Написание нашего собственного фреймворка JavascriptДругие?

Текущее состояние - это монолитное приложение FE, которое использует другое дочернее приложение как внутренние сторонние пакеты. Этот подход не является масштабируемым для нас, потому что хостинговое приложение строит все продукты вместе, и на самом деле ничего не разделяется.

Наши требования - это обычные требования для микро-интерфейса: 1. Независимая разработка - каждая команда может выбирать свои собственные структуры и создавать свои продукты независимо от других продуктов.

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

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

Мы хотели бы иметь возможность обновлять структуру каждого приложения (Angular, RXjs, Typescript и т. Д., А также нашу собственную библиотеку компонентов), не заботясь о других приложениях.

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

У нас есть проблемы с использованием единственного спа: 1. Загрузка активов является проблематичной. (У нас должны быть файлы ресурсов в корневой папке хост-приложения, и мы страдаем от конфликтов ресурсов при переключении на другое приложение). 2. Мы до сих пор не знаем, как обрабатывать глобальные стили для всех приложений (для стилизации мы используем sass, и его необходимо соблюдать вместе с локальными стилями для каждого приложения). 3. Обновление угловой платформы (или всех других платформ) невозможно для одного приложения это все или ничего (так как у нас есть один экземпляр angular). 4. Мы должны реализовать другой пакет для разработки другой стороны хостинг-приложения (оболочки).

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

Есть ли подводные камни для использования Iframes?

Спасибо Даниэль

 billyjov09 дек. 2018 г., 05:17
Вы можете поделиться результатами своего исследования / опыта в этом году, улучшив это:stackoverflow.com/a/52719127/6432698 ответ

Ответы на вопрос(5)

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

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

 Philip02 янв. 2018 г., 22:38
К сожалению, после анонса информации об угловых элементах стало намного меньше. Я надеялся, что будет доступна дорожная карта, но пока нетgithub.com/angular/angular/issues/20891, С такими фреймворками, как vue или реагировать, довольно легко создать составной пользовательский интерфейс для микросервисов. Используя vue / реагировать и webpack или browserify, можно связать компонент и конкретную версию реакции - см., Например,stackoverflow.com/questions/25454029/....
 Rui Marques03 дек. 2018 г., 16:49
Угловые элементы отгружены:angular.io/guide/elements
 Antti Väyrynen03 янв. 2018 г., 07:36
Конечно, реакция - лучший выбор, если цель состоит в том, чтобы иметь микро-интерфейсы. И меня огорчает, что здесь так мало угловатых. Дорожную карту угловых элементов было бы очень приятно увидеть.

для микросервисов frontend:

OpenComponents, используемые OpenTable -https://github.com/opentable/ocМозаика Заландо -https://www.mosaic9.org/

Надеюсь, вы найдете их полезными.

я буду отвечать только на ваши вопросы об использовании Iframes, поскольку консультировать вас по архитектуре бессмысленно, не зная обстоятельств (целевая группа ?, мобильные ?, каковы KPI? (Производительность, начальная загрузка, затраты на разработку, повторное использование, ...)

Если фреймы хороши для «полной» изоляции (код + стиль), никакой другой подход не даст вам этого, однако из-за этого у них естьмного из недостатков:

совместное использование данных между iframes требует оркестровки во внешнем И внутренних SPA, что предполагает настройку дополнительных мер безопасности (поскольку каждый SPA открыт)стилизация ваших внутренних SPAs с помощью внешнего будет работать только тогда, когда они находятся в одном домене и требуют дополнительного кода JSобмен файлами cookie работает только в том случае, если внутренние SPA находятся в том же домене, что и внешние SPAс точки зрения производительности каждый Iframe должен загружать все сам; Повторное использование активов, библиотек и т. д. очень сложно и включает вмешательство в инструментарий каждого SPA.

Обычно, если у вас есть всепод вашим контролем переход на настоящий микро-интерфейс является лучшим решением, чем Iframes.

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

Это на самом деле охватывает почти все ваши требования.

Независимые РазвертыванияНезависимый исходный кодНезависимые Технологии

Что касается решения iframe, может быть сложно управлять такими вещами, как CORS и связью с другими iframe.

Но решение для микро-интерфейсов все еще не идеально. Есть много сложностей, когда вы действительно углубляетесь в это.

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

Регистрация и мониторинг становятся чрезвычайно сложными. Такие инструменты, как New Relic, помогут вам, но этого будет недостаточно. Вы должны внедрить пользовательские инструменты мониторинга и отчетности об ошибках.

Сохранение приложений в доке и их автоматическое масштабирование действительно важно. С этой архитектурой, если у вас есть 4 шлюза и витрина, это может быть сложно.

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

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

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

единять / использовать их в своем главном SPA. Веб-компоненты поддерживаются всеми браузерами, а все ведущие фермерские системы SAP (такие как angular, ember, реагируют, vue) поддерживают веб-компоненты. Таким образом, вы не привязываетесь к какой-либо отдельной структуре SPA и можете возобновить компоненты в любом месте.

Ваш ответ на вопрос