我有一个项目,需要各种开发人员在任何给定时间为应用程序构建组件/模块。
但是,每个组件都可以写在不同的框架或库中,例如URI/app1
是用React编写的搜索组件,URI/app2
是用AngularJS编写的结果组件。
我试图找到一种方法,以便在URI
服务URI/subdomain
时,我可以提供一个模块,该模块完全封装(技术明智)来自其他子路径& URI。
这些方面有什么东西存在吗?是否存在一种方法或方法,允许应用程序全面服务子模块(不是单个页面的片段,而是在独特路径下的完整页面)并保持与其他前端代码隔离,但仍允许数据为传递了所使用的技术,以便开发人员可以使用他们选择的技术在子路径下创建一个组件/页面/模块,并使用可能不同的技术编写的现有应用程序内容地接受它?
答案 0 :(得分:3)
你的问题的答案是肯定的!微服务 - 复合UI在前端世界中是相当新的。许多大公司正在放弃大型单片应用程序,并以微服务方式开始开发 - 这是一个复合的UI。
[裁缝马赛克]
每个应用程序都可以由不同的框架构建React,Angular,Vuejs由不同的团队构建。您可以将您的概念应用程序基于Zalando堆栈 - Mosaic框架,或者只使用MIT许可证获取Tailor.js的一部分,并在此基础上构建您自己的一个。它肯定会要求您提供其他部件,如反向代理和通信总线/管道。
<强> [聚合物] 强>
这不是微服务方式,但一切都取决于项目的规模。有时Web组件绰绰有余。要面对使用不同技术构建的可重用组件的问题,您可以使用Polymer framework - Web Components。
[反应方式]
React是用于构建复杂用户界面的格式库。您几乎可以做任何事情 - 构建通用组件或将以某种方式注入的整个应用程序对常见框架做出反应。编写用于在运行时从不同来源注入应用程序作为应用程序包文件的特殊机制是可能的。
[通讯&amp;款式] 强>
您肯定会遇到应用程序/组件之间的通信问题。几乎没有可能确保您的组件/应用程序将相互通信。基本解决方案是使用某种API(如RxJs)来构建您自己的带有自定义函数的通信总线,或者只使用现有的一个pubs / sub事件总线。如果你有不同的反应应用程序与自己的存在(最好的解决方案是有一个商店,但没有什么阻止你有很多)你可以考虑一些机制,如redux modules或dynamically loaded reducers到{{ 3}}并在不再需要时拔掉它们。
构建复合ui也会在样式方面造成很多问题,因此最好考虑某种策略,如marge them together或库等反应css模块,以避免css冗余。
有用的链接:
Project Mosaic | Microservices for the Frontend
Micro frontends—a microservice approach to front-end web development
工作示例
Designing a microservice-oriented application
示例通讯总线