【问题标题】:Inetgrate and Communicate multiple Angular applications on same page (SPA)在同一页面上集成和通信多个 Angular 应用程序 (SPA)
【发布时间】:2019-10-27 12:15:02
【问题描述】:

我刚开始考虑两个 Angular(或其他框架)应用程序之间的通信——最好的方法是什么。

目前,在我的应用程序中,我使用iframe 包含第二个应用程序,然后感谢postMessage (docs) 我可以处理应用程序之间的操作。

但是这个解决方案变得真的很难维护,因为我没想到我会不得不处理这么多类型的事件。

举个例子: 在 Facebook 上,当您转到某人的个人资料时,您可以单击“发送消息”,它将在聊天应用程序上打开一个新窗口。通过其他方式,您也可以单击他们聊天中的某个按钮,它会向“主”应用程序发送一些操作。

我刚刚阅读了几篇文章并开始考虑使用 WebSockets、使用 firebase 等,但我想进行更多研究并询问更多过期的开发人员(是的,你!:))他们的想法。

所以,我的问题是:

  1. 包含两个(或更多)角度应用的最佳方法是什么?
  2. 处理这些应用程序之间通信的最佳方法是什么?

【问题讨论】:

    标签: javascript angular architecture


    【解决方案1】:

    听起来你有一个非常有趣的问题要解决。有很多不同的方法可以解决这个问题,我不确定您的网站架构是如何设置的以及您有什么限制,但我至少可以提供一些建议。

    可能的解决方案

    1. 考虑将单独的功能分离到延迟加载的 Angular 模块中,并将它们完全视为单独的网站。

    我已经为一些应用程序这样做了,它为您提供了一些您正在寻找的灵活性。为使其与您的应用程序通信约束一起工作,有许多不同的方法来处理它。

    如果您可以使用单个应用程序,那么您将需要研究状态管理解决方案,例如 NgXSNgRXAkitaroll your own statemanagement。我个人对这些事情自己动手,因为我很少需要开销更大的框架,而是每个自己的。

    如果您无法使用单个应用程序,那么您将希望将您的状态分离为 FireBase 或自定义 websocket 应用程序之类的东西。这将为您提供更好的状态持久性,并允许您将完全独立的 Web 应用程序相互连接。

    1. 解决此类问题的另一个有希望的解决方案是工具 SingleSpa

    Single spa 是一个元网络框架,可以帮助导航和编排在不同库/框架中编写的多个 SPA 到单个应用程序中。这将允许您重新使用您正在使用<iframe> 的现有网站,但将其捆绑在同一个父应用程序中。在实践中我对这个框架不太熟悉,但我有一些同事和同行在使用它,而且看起来很有希望。

    1. 退后一步,找出您要解决的核心问题

    这个不是试图拖钓或任何东西,只是帮助退后一步,从 10,000 英尺的概览中查看您的应用程序。看看解决方案中数据是如何传递的,你是直接解决问题吗?或者这个解决方案是由于你一开始就有的限制而造成的。不要害怕重建部分应用程序或服务。人们谈论10 to 1 rule of writing code 是有原因的。

    我了解时间和复杂性限制,您有截止日期和其他事情要处理。只需确保您正在解决正确的问题并考虑可以利用的不同边缘情况。


    写完这篇文章后,我意识到这不是直接的answer,但我希望它有所帮助。如果您对此内容有任何疑问,请给我留言。

    【讨论】:

    • 其实你是对的。也许退后一步并将第二个应用程序包含到主应用程序中会更好,我已经使用延迟加载但我也在考虑使用这个概念:youtube.com/watch?v=nX_HhiqmFAI
    • @Lyczos 祝一切顺利!是的,我的意思是每个项目都是不同的,但在很多情况下,您可以通过简化很多事情来最大程度地帮助自己。那个视频看起来很酷,我以后一定要看,谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-07
    • 1970-01-01
    • 2015-10-26
    • 2015-06-16
    相关资源
    最近更新 更多