微服务可以用JS应用到前端吗？

Posted 2023-02-22

【中文标题】微服务可以用JS应用到前端吗？

【英文标题】：Can micro services be applied to the front-end with JS?

【发布时间】：2017-04-14 07:24:27

【问题描述】：

我有一个项目需要不同的开发人员在任何给定时间为应用构建组件/模块。

但是，每个组件都可以编写在不同的框架或库中，例如URI/app1 是用 React 编写的搜索组件，URI/app2 是用 AngularJS 编写的结果组件。

我正在尝试找到一种方法，以便在给定 URI 的情况下，如果提供 URI/subdomain，我可以提供从其他子路径和 URI 完全封装（技术方面）的模块。

是否存在类似的东西？是否有一种方法或方法可以让应用程序整体服务于子模块（不是单个页面的片段，而是唯一路径下的完整页面）并保持与其他前端代码隔离，但仍然允许数据跨所使用的技术传递，以便开发人员基本上可以进入并使用他们选择的技术在子路径下创建组件/页面/模块，并在使用可能不同技术编写的现有应用程序中被一致地接受？

【问题讨论】：

有一个名为single-spa（我的一些同事建立）的工具，它可能会起作用。它允许混合使用不同类型的框架。

iframe，我想。我了解 Spotify 桌面应用程序是这样工作的：每个 UI 小部件都是一个单独的 Chromium“窗口”，因此每个小部件都可以有自己的依赖项 - 这意味着播放列表编辑器可以使用与帐户详细信息编辑器不同的 jQuery 版本，例如 -缺点是完全应受谴责的内存使用和开销。媒体播放器不应该只需要 300MB 内存才能打开。

Angular 允许控制器之间的隔离。

【参考方案1】：

您的问题的答案是肯定的！微服务 - 复合 UI 在前端世界中是相当新的。许多大公司正在放弃大型单体应用程序并开始以微服务方式进行开发 - 如此组合的复合 UI。

[裁缝马赛克]

每个应用程序都可以由不同的团队在不同的框架 React、Angular、Vuejs 中构建。您可以将您的概念应用程序建立在 Zalando 堆栈 - Mosaic 框架上，或者只使用具有 MIT 许可证的 Tailor.js 的一部分，并在此基础上构建您自己的应用程序。它肯定需要您提供额外的部分，例如反向代理和通信总线/管道。

[聚合物]

这不是微服务方法，但一切都取决于您的项目规模。有时，Web 组件绰绰有余。要面对使用不同技术构建的可重用组件的问题，您可以使用Polymer framework - Web Components。

[反应方式]

React 是用于构建复杂用户界面的 grate 库。你几乎可以做任何事情——构建通用组件或整个应用程序，它们将被注入某种反应通用框架中。编写特殊机制以在运行时从不同来源注入应用程序作为应用程序包文件是可能的。

[沟通与风格]

您肯定会遇到应用程序/组件之间的通信问题。几乎没有可能确保您的组件/应用程序能够相互通信。基本解决方案是使用某种 API，如 RxJs 来构建您自己的具有自定义功能的通信总线，或者只使用现有的一个 pubs/sub 事件总线。如果你有不同的 react 应用程序和他们自己的 Stors（最好的解决方案是拥有一个商店，但没有什么能阻止你拥有很多）你可以考虑一些机制，如 redux modules 或 dynamically loaded reducers 到 marge them together 并拔下它们不再需要时。

构建复合 ui 也会导致很多样式问题，因此最好考虑某种策略，如 BEM/SMACSS 或类似 react css 模块的库，以避免 css 冗余。

有用的链接：

Project Mosaic | Microservices for the Frontend

Zalando Tailor

Micro frontends—a microservice approach to front-end web development

Designing a microservice-oriented application

工作示例

React frontend microservices architecture

通信总线示例

Postaljs