迁移到角:微前端w/ web组件与延迟加载模块？
我们有一个跨多个团队的大型应用程序，它是用Java页面构建的。目标是移动到角度。整体迁移/启动被认为是不实际的，因此倾向于逐步迁移。
其想法是使用Webpack 5模块联邦应用程序外壳加载角微前端遥控器到现有的JSP应用程序。的问题是，是将遥控器作为角度应用程序加载，还是以组件的形式加载。其思想是，Web组件可能允许将可重用的微前端片段嵌入到JSP中，如果它们不能同时迁移整个页面，或者它们的组件将同时存在于未迁移的JSP和新的角度页面中。
迁移之后，如果它是合理的，他们要么保留微前端架构，要么放弃它，将遥控器合并到一个角度的应用程序中。
另一种选择可能是延迟加载模块，而不是打开pandora的微型前端架构的盒子。只是非正式地将应用程序划分为每个团队的惰性加载模块。这里的缺点可能是更多的团队在存储库中踩到了彼此的脚尖，但这与他们的操作方式并没有什么不同。他们对延迟加载模块的关注是，他们认为自己无法完成这样的任务：
<!-- my ancient JSP site. LOL page load with every click -->
<JSP-header></JSP-header>
<myAngularComponent></myAngularComponent>
<script type="text/javascript" src="https://lawlcats.com/myAngularComponent.js"></script>
<JSP-footer></JSP-footer>总之，提出的解决方案非常复杂。这些团队是全新的棱角分明的，并且已经在考虑将不同的框架结合在一个微前端架构中，并实现web组件。对我来说是个巨大的提升。我也不确定他们是否考虑过如何跨团队管理存储库。
有人认为这个计划有改进的余地或缺陷吗？--我很喜欢关于微前端遥控器是棱角的vs组件的建议，与完全放弃微前端的建议相比，更倾向于懒散加载的模块。
回答 1
Stack Overflow用户
发布于 2022-06-21 12:38:14
那么，如果您的团队首先充分了解MFE或WebComponents作为工具的含义，那就太好了。
微边界是独立的、有状态的、成熟的和完全黑盒的应用程序.也许它会帮助您的团队把他们看作是iframe。
你把一个MFE应用程序放在页面的某个地方，就是这样。它会做自己的事。主机应用程序只在所有不同的http端口上托管所有MFE应用程序，但它不知道它们内部发生了什么。
在最简单的经典例子中，主机和应用程序之间没有通信，应用程序也从来不相互交谈。另外，如果你想让他们交流，理论上可以通过http (因为他们确实生活在特定的端口上)或者像利用LocalStorage这样的疯狂诡计来实现。但这通常并不容易。
另一方面，WebComponents只是做一件特定事情的原始组件。它们也是黑匣子，但通常都很小很薄。你可以把它们想象成类似于input的东西。
input知道应该如何设计它，它知道它应该与哪个原始浏览器Web对话，它知道它应该根据用户在键盘上键入的内容呈现文本，以及如何向外部世界公开一些值和事件。但最终，input本身是相当愚蠢的，很难被称为“应用程序”。它只是真正的现代JS应用程序的一个小组成部分。
input也不相互交谈--为什么会这样--但是它们公开了清晰的本地html app以供输入和输出，因此主机应用程序可以很容易地与它们交谈并使用它们。不过，主持人仍然有责任真正知道如何做到这一点。
至于用例，您的选择取决于您的团队的技术和业务需求。
- MFE联邦是一种非常严格定义的架构类型。它可能在您的用例中有效，但您需要考虑的是，以后尝试在这些单独的应用程序之间组织任何类型的通信都是自找麻烦。
- 另一方面，如果您真的想要一堆现代的JS组件，您可以在现有的JSP代码中的任何地方使用这些组件，那么WebComponents可能是您的最佳选择。IIRC，角度组件可以作为WebComponents构建和使用就像在你的例子中一样，所以用角编写它们是可行的(然后以后可能会将整个应用程序迁移到一个实际的角SPA )。问题是这些组件本身不会做任何事情，它们仍然需要主页来实际使用它们。
- 它也可能是可行的，只编写一个应用程序与一堆懒惰加载模块-这是现代角度的标准直截了当的情况-并让它生活在一些特定的路线。然后你就开始一个一个地重写页面。没有人喜欢这样，但有时这正是我们必须做的。作为一个好处，至少在这种情况下，您将有一个实际的现代角度应用程序作为所有JS组件的主机，而不是您目前拥有的任何JSP。
- 理论上，您可以使用混合匹配方法2和3，有些页面仅部分使用新的闪亮WebComponents，而有些页面则完全重写。这可能是最终要发生的事情，但我一开始只想坚持2或3，以便使迁移的第一步对于您缺乏经验的开发人员来说更简单。
无论您选择Webpack MFE联邦，JS / WebComponents，还是一个简单的角度SPA，我强烈建议您查看NX，它是一个非常强大的、与框架无关的JS工具集。除其他特性外，它还可以帮助您解决团队间代码管理的问题。
使用NX，您可以向所有模块添加任意标记，并使linter跟踪和禁止特定标记之间的依赖关系。作为一个简单的例子，您可以说标记为team-a的模块不能被team-b或team-c使用，这样团队A可以安全地在其中做他们想做的任何事情，而不会破坏其他团队积极使用的任何东西。
https://stackoverflow.com/questions/72693926
复制相似问题
腾讯云开发者
