Интегрировать и общаться несколько приложений Angular на одной странице (SPA) - PullRequest
0 голосов
/ 13 июня 2019

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

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

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

Давайте приведем пример: На Facebook, когда вы заходите в профиль кого-то, вы можете нажать «Отправить сообщение», и это откроет новое окно в приложении чата. В противном случае вы также можете нажать на какую-то кнопку в их чате, и это отправит действие в «основное» приложение.

facebook open chat screenshot

Я просто читаю несколько статей и начинаю думать об использовании WebSockets, об использовании Firebase и т. Д., Но я хочу провести дополнительное исследование и спросить у разработчиков с истекшим сроком действия (да, у вас! :)), что они думают.

Итак, мой вопрос:

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

1 Ответ

1 голос
/ 13 июня 2019

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

Возможные решения

  1. Изучите разделение отдельных функций на загруженные модули Angular и рассматривайте их как отдельные веб-сайты.

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

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

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

Другим многообещающим решением для подобных вещей является инструмент SingleSpa .

Single spa - это мета-веб-инфраструктура, которая может помочь в навигации и организации нескольких SPA, написанных в разных библиотеках /фреймворки в одном приложении.Это позволит вам повторно использовать существующий веб-сайт, для которого вы используете <iframe>, но объединить его в том же родительском приложении.Я не слишком знаком с этой структурой на практике, но у меня есть коллеги и коллеги, которые ее используют, и она выглядит многообещающей.

Сделайте шаг назад и определите основную проблему, которую вы пытаетесь решить

Эта проблема не пытается троллить или что-то еще, просто помогает сделать шаг назад и просмотреть ваше приложениеиз обзора 10 000 футов.Посмотрите, как данные передаются в решении, вы решаете проблему напрямую?Или это решение взломать из-за ограничений, которые у вас были в начале.Не бойтесь перестраивать части приложения или службы.Есть причина, по которой люди говорят о 10 к 1 правилу написания кода .

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


После того, как я это написал, я понимаю, что это не прямое answer, так сказать, но я надеюсь, что это помогло.Напишите мне, если у вас есть какие-либо вопросы по этому поводу.

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