角和微前端 [英] Angular and Micro-Frontends
问题描述
我正在研究如何将巨大的单页整体分割成微前端架构。
I am doing some research on how to split a huge single-page-monolith into a micro-frontend architecture.
- 该页面由几个可自动运行的组件组成
- 每个组件由一个开发团队管理
- 每个团队可以更改，更新和部署他们的组件，而不会破坏其他团队的组件
- 每个团队选择自己的工具堆
- the page consists of several components which would be running autonomously
- each component is managed by one dev-team
- each team can change, update and deploy their components without breaking components of other teams
- each team chooses its own toolstack
要有效地开发大型应用程序，您需要让很多人参与其中。但是，每个应用程序/团队的开发人员数量不能很好地扩展。然而，独立团队并行开发多个独立应用程序可以任意缩放
To efficiently develop large applications you need to have many people working on it. However the number of developers per app/team does not scale well. Parallel development of multiple independent apps by independent teams however can be scaled arbitrarily
考虑到这一点，团队必须选择自己的工具堆栈，特别是执行独立的版本升级第三方库（如angular，react，jquery）。如果不是这种情况，框架更新需要与每个组件兼容才能将其部署到生产环境。
With this in mind it is imperative that teams can choose their own toolstack and especially perform independent version-upgrades of third party-libraries (like angular, react, jquery). If this was not the case a framework-update would need to be compatible with every single component before you could deploy it to production.
虽然需要进行独立的版本升级，但将团队限制在一些受支持的框架（Angular，React，Vue，Polymer ......）是合理的，现在我尝试构建一个纯粹由Angular-Apps组成的演示。
While independent version-upgrades are necessary, it would be reasonable to restrict the teams to a few supported frameworks (Angular, React, Vue, Polymer...) and for now I try to build a demo purely consisting of Angular-Apps.
然而，即使Angular 5被认为是一个支持巨大的多模块应用程序的平台框架，它似乎是几乎不可能在同一个浏览器窗口中运行几个独立的角度应用程序。
However even though Angular 5 is supposedly a platform-framework which supports huge multi-module apps, it seems to be almost impossible to have several independent angular-apps running in the same browser window.
我设法引导了几个Angular-Apps（不同版本，每个版本都托管在自己的服务器上）使用HTML-Imports在单个webapp上。但是，有几个全局依赖项需要在应用程序之间共享
I managed to bootstrap several Angular-Apps (different versions, each hosted on its own server) on a single webapp by utilizing HTML-Imports. However there are several global dependencies which need to be shared between apps
- 区域。 js只能启动一次
- 路由需要url-changes
- 浏览器 - 像cookies，sessionstorage等...
网上有几篇关于如何引导多个角度模块的文章，但它们都引用同一个核心应用程序中的多个模块，意味着它们都在相同的框架版本上运行，并且更新意味着您必须重建和部署整个整体。
There are several articles in the net on how to bootstrap multiple angular-modules but they all refer to multiple modules in the same core-app, which in turn means they all are running on the same framework-version and an update means you have to rebuild and deploy the whole monolith.
除了是否有任何其他解决方案 iframes 让多个Angular（5）应用在同一个网页上运行？
Is there any solution other than "iframes" to get multiple Angular (5) Apps running on the same Page?
推荐答案
而不是完全建议反对这个想法主要是由于单独的堆栈要求，我将列出权衡并提供一些限制，这将使这成为可能。
Instead of outright suggesting AGAINST this idea mainly due to separate stack requirements I will lay out the trade offs and provide some restrictions which will make this possible.
该页面包含几个可自动运行的组件
the page consists of several components which would be running autonomously
我们都知道这是在Angular组件中提供的，具有明确的输入和输出分界。
We all know this is offered out of box in Angular components with clear demarcation of inputs and output.
小CAVEAT：当/如果传递 @Input 的对象并使用
Small CAVEAT: When/If you pass objects for @Input and emit event objects with @Output() interacting components must agree on a defined interface upfront.
解决方法：创建另一个仅定义这些工件的TypeScript项目。所有其他组件项目将取决于其特定版本。
Workaround: Create another TypeScript project which just defines these artifacts. All other "component projects" would depend on a specific version of this.
每个组件由一个开发团队管理
each component is managed by one dev-team
Dev Teams可以像开源中的其他Angular项目一样分发组件。他们可以将他们的工件发布到某个npm存储库。要开发可归属组件，我建议你参考 Angular Material2 ，这可能是压倒性的，或者你可能会使用类似
Dev Teams can distribute the components just like other Angular projects in the opensource are doing. They can publish their artifacts to some npm repository. To develop attributable components I recommend you refer to Angular Material2 which may be overwhelming or you may use something like ngx-library-builder (based on Angular Team Member filipesilva/angular-quickstart-lib ) that each component team uses.
CAVEAT：直到这个日期，角度团队没有快速组件库共享项目设置，如Angular CLI中所示。但是许多开发人员已经创建了某种类型的库构建器来填补Angular CLI中的空白。
CAVEAT: Till this date angular team does not have a quick component library sharing project setup as evident in Angular CLI. But numerous developers have created some sort of library builders to fill the gap in Angular CLI.
每个团队都可以更改，更新和部署他们的组件不破坏其他团队的组件
each team can change, update and deploy their components without breaking components of other teams
让您的主项目拉出所有组件并在某些CI上执行定期/更改触发的构建/部署服务器。这主要是使用所有最新的组件版本生成AOT生产版本。
作为额外的奖励，您可以进行一些抽象的e2e测试，以进行一些自动化集成测试，确保一个组件的副作用不会破坏其他组件。
Have your main project pull all the components and perform a periodic/change triggered build/deploy on some CI server. This is essentially producing AOT production builds with all the latest component releases. As an added bonus you can have some abstract e2e tests built to do some automated integration testing ensuring side effects of one component does not break other components.
CAVEAT ：很难控制每个团队如何开发组件，即他们正在对内存，CPU和其他资源进行最佳使用和处置。例如如果一个团队开始创建订阅并且不删除它们会怎么样？使用一些静态代码分析可能很有用，但目前你不会有这个源代码 - 除非他们也发布他们的源代码。
CAVEAT: It will be difficult to govern how each team develops the components i.e. they are doing optimal usage and disposition of memory, CPU, and other resources. e.g. what if one team starts creating subscriptions and does not remove them. Using some static code analysis can be useful but you will not have this source code available at this time - unless they also publish their source code.
每个团队选择自己的工具堆
each team chooses its own toolstack
这是一个完整的交易破坏者，除非你的意思是像IDE这样的开发者工具中的工具堆和一些devDependencies。虽然每个团队的devDependencies的某些部分必须具有相同的角度开发工具包的确切版本，例如编译器等。
This is a complete deal breaker unless if you mean "toolstack" as in developer tools such as IDEs and some of the "devDependencies". Although certain parts of "devDependencies" of each team must have the same exact versions of angular dev kits such as compilers etc.
至少每个团队必须使用相同的Angular， RxJS等。
At the least each team must use same Angular, RxJS etc.
最重要的是要注意每个团队都不会引导任何组件 - 只有主项目会有一个引导程序模块，并且会引导根目录零件。这将有助于回答您的 zone.js 问题
Most importantly care should be taken that each of the team does not bootstrap any components - only the main projects will have a bootstrap module and that will bootstrap the root component. This will help answer your zone.js issue
这是否适用于Angular？
Does this work with Angular?
如果你认识到这些限制并提供治理，我建议你去做。
If you recognize the limitations and provide governance I suggest go for it.
这篇关于角和微前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
