javascript - 微服务可以用JS应用到前端吗?

标签 javascript angularjs reactjs frontend microservices

我有一个项目,需要不同的开发人员随时为应用程序构建组件/模块。

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

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

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

最佳答案

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

[定制马赛克]

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

[聚合物]

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

[ react 方式]

React 是用于构建复杂用户界面的优秀库。您几乎可以做任何事情——构建通用组件或整个应用程序,这些应用程序将被注入(inject)某种 React 通用框架。编写特殊机制以在运行时将来自不同来源的应用程序作为应用程序包文件注入(inject)是可能的。

[沟通与风格]

您肯定会遇到应用程序/组件之间的通信问题。确保您的组件/应用程序能够相互通信的可能性很小。基本解决方案是使用某种 API,如 RxJs使用自定义函数构建您自己的通信总线,或者只使用现有的一个 pubs/sub 事件总线。如果你有不同的 react 应用程序和他们自己的存储(最好的解决方案是有一个商店,但没有什么能阻止你拥有很多)你可以考虑一些机制,比如 redux modulesdynamically loaded reducersmarge 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

关于javascript - 微服务可以用JS应用到前端吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40880443/

相关文章:

reactjs - React Material 如何主题化主体颜色

javascript - 无法选择 iframe 内的元素

angularjs - 如何禁用 Angular ui 路由器状态的数据继承

javascript - Angular Promise,为什么在这种情况下我会得到 'then' 的未定义?

javascript - 无限滚动的滚动高度调整

javascript - 带点符号的文字属性返回未定义

javascript - 如何在 JavaScript 中运行 0 到 10 分钟的计时器?

javascript - 如何使SVG图像图案填充随对象移动?

javascript - 递归函数错误在第二次运行时跳过数组中的第一个元素

html - 组件内的 routerLink 不生成内容