Angular 2 的前端“微服务”答案

【问题标题】：Front end "micro services" with Angular 2Angular 2 的前端“微服务”
【发布时间】：2018-03-14 20:51:32
【问题描述】：

我正在为一些奇怪的情况寻找解决方案。让我们快速浏览一下 angular2-seed 项目，以便我更好地解释：https://github.com/mgechev/angular2-seed/tree/master/src/client/app。

在那个项目中，我们有 3 个独立的模块 - about、home、shared。我正在寻找的是一种隔离这些开发的方法，因此我们最终能够独立发布每个部分。例如，假设团队 A 正在研究 about 部分，团队 B 正在研究 home。每个工作都已完成，我们准备发布，但是我们意识到 about 部分缺少关键功能，但我们仍然希望将更改发布到 home 部分。我们正在寻找实现这一目标的方法。

这里有一些已经探索过的解决方案，但我不太满意：

对于 home/about 有完全不同的应用程序（在我看来，这消除了 SPA 的许多好处）。
将每个模块（about、home、shared）汇总到它自己的 NPM 包中。当我们进行部署时，我们将有一些方法来编排为这些模块拉入所有已发布的 NPM 包。

【问题讨论】：

您的问题到底是什么？ about 和 home 模块的隔离程度如何？
@KTCO 这是我仍然需要弄清楚的一部分，这可能会与最终解决方案相关联。企业希望能够在应用程序中相互独立地发布新功能，而不是一次性发布整个应用程序。由于每个功能都将由不同的团队拥有/工作，他们希望团队 A 能够发布他们的新代码而不影响团队 B。正如标题所说，他们很想在前端实现一个“微服务”架构。
@KTCO 虽然我对前端的这种方法持保留意见，但我想至少在直接拒绝之前探索选项。

标签： javascript angular

【解决方案1】：

编排：

让每个团队构建一个组件库 (NPM) 并将它们拉入单个 Angular 2 应用程序。这样，团队可以使用 microservices principles 进行开发，但您可以部署一个 SPA monolith，从而降低复杂性。

大型组件库应该有多个包和模块，这样您就可以有选择地选择您要引入的内容。

微服务之间的通信：

如有必要，组件库可以通过后端消息总线进行通信。

如果组件库之间需要直接的客户端集成，那么您需要about 和home 依赖的第三个组件库，其中包含一个轻量级的可注入消息/事件服务。您可以使用RxJS Subjects 实现该服务。

【讨论】：

【解决方案2】：

javascript 元框架可以为您工作。这里有趣的project 它通过将生命周期应用于整个应用程序，从 React 组件生命周期中汲取灵感。

一些功能：

在同一页面上使用多个框架而不刷新页面（React、AngularJS、Angular、Ember 或任何你使用的）
使用新框架编写代码，无需重写现有应用
延迟加载代码可缩短初始加载时间。

我希望它可以帮助您朝着正确的方向前进。

【讨论】：