角和微前端

Question

我正在研究如何将巨大的单页整体分解为微前端架构.

想法:

• 该页面由几个可自主运行的组件组成
• 每个组件由一个开发团队管理
• 每个团队都可以更改,更新和部署他们的组件,而不会破坏其他团队的组件
• 每个团队都选择自己的工具堆栈

原因

要有效地开发大型应用程序,您需要让很多人参与其中.但是,每个应用程序/团队的开发人员数量不能很好地扩展.然而,独立团队并行开发多个独立应用程序可以任意缩放

考虑到这一点,团队必须选择自己的工具堆栈,特别是执行第三方库的独立版本升级(如角度,反应,jquery).如果不是这种情况,框架更新需要与每个组件兼容,然后才能将其部署到生产环境中.

这适用于Angular吗？

虽然需要进行独立的版本升级,但将团队限制在一些支持的框架(Angular,React,Vue,Polymer ......)是合理的,现在我尝试构建一个纯粹由Angular-Apps组成的演示.

然而,即使Angular 5被认为是支持大型多模块应用程序的平台框架,但在同一浏览器窗口中运行几个独立的角度应用程序几乎是不可能的.

我设法通过利用HTML-Imports在单个webapp上引导几个Angular-Apps(不同的版本,每个版本都在自己的服务器上托管).但是,有几个global依赖项需要在应用程序之间共享

• zone.js只能启动一次
• 路由需要URL更改
• 浏览器 - 像cookies,sessionstorage等...

网上有几篇关于如何引导多个角度模块的文章,但它们都引用同一个核心应用程序中的多个模块,这反过来意味着它们都在相同的框架版本上运行,并且更新意味着你必须重建和部署整个巨石.

除了" iframes" 之外是否有任何解决方案可以在同一个页面上运行多个Angular(5)应用程序？

Answer 1

而不是完全建议反对这个想法主要是由于单独的堆栈要求,我将列出权衡并提供一些限制,这将使这成为可能.

该页面由几个可自主运行的组件组成

我们都知道这是在Angular组件中提供的,具有明确的输入和输出分界.

小CAVEAT:当/如果您传递对象@Input并发出具有@Output()交互组件的事件对象,则必须事先就已定义的接口达成一致.

解决方法:创建另一个仅定义这些工件的TypeScript项目.所有其他"组件项目"将取决于其特定版本.

每个组件由一个开发团队管理

Dev Teams可以像开源中的其他Angular项目一样分发组件.他们可以将他们的工件发布到某个npm存储库.要开发可归属组件,我建议你参考Angular Material2,这可能是压倒性的,或者你可以使用每个组件团队使用的ngx-library-builder(基于Angular Team Member filipesilva/angular-quickstart-lib).

CAVEAT:直到这个日期,角度团队没有快速组件库共享项目设置,如Angular CLI中所示.但是,许多开发人员已经创建了某种类型的库构建器来填补Angular CLI的空白.

每个团队都可以更改,更新和部署他们的组件,而不会破坏其他团队的组件

让您的主项目拉出所有组件,并在某个CI服务器上执行定期/更改触发的构建/部署.这主要是使用所有最新的组件版本生成AOT生产版本.作为额外的奖励,您可以进行一些抽象的e2e测试,以进行一些自动化集成测试,确保一个组件的副作用不会破坏其他组件.

CAVEAT:很难控制每个团队如何开发组件,即他们正在对内存,CPU和其他资源进行最佳使用和处置.例如,如果一个团队开始创建订阅并且不删除它们,该怎么办？使用一些静态代码分析可能很有用,但此时您不会使用此源代码 - 除非他们也发布了源代码.

每个团队都选择自己的工具堆栈

这是一个完整的交易破坏者,除非你的意思是"工具堆",如IDE和一些"devDependencies"等开发者工具.虽然每个团队的"devDependencies"的某些部分必须具有相同的角度开发工具包的精确版本,例如编译器等.

至少每个团队必须使用相同的Angular,RxJS等.

最重要的是,应该注意每个团队都不会引导任何组件 - 只有主项目将有一个引导模块,并将引导根组件.这有助于解决您的zone.js问题

这适用于Angular吗？

如果你认识到这些限制并提供治理,我建议你去做.

Answer 2

除了 IFrame 和通过 postMessage 进行通信之外，集成不同 Angular 应用程序的唯一方法是“深度链接”它们并使用 URL 参数交换信息。然后，所有 Angular 应用程序都位于其自己的浏览器选项卡上。但对于通用服务和组件，您可能希望实现所有 Angular 应用程序使用的“共享内核”，因此您会陷入某个 Angular 版本范围。当您想要这个共享内核时，推荐使用 NGModule 方法。您可以在一个应用程序中混合使用 Angular 2 和 Angular 5 版本，因为它们是向后兼容的。在 Angular 团队引入重大更改之前，团队并不迫切需要坚持同一版本。尽管如此，当你不更新时，你的技术债务就会增加。Angular/Javascript 领域的技术更新频率肯定更高。