【问题标题】:Multiple React apps in one shell一个外壳中的多个 React 应用程序
【发布时间】:2019-09-13 23:00:00
【问题描述】:

我必须开发一个包含一个主应用(Shell)和多个子应用的 React 应用架构。

要求

1) 主应用必须提供用户身份验证,可能还有其他一些核心功能。

2) 每个子应用程序应由自治团队并行开发。 每个团队将完全独立,对其他团队的了解为零。子应用不会相互连接。

3) (可选)主应用程序应该在运行时运行子应用程序,这意味着如果子应用程序被更新,主应用程序会检查它并运行一个新的实际版本的子应用程序。主要目标是尽可能少地重建主应用程序。

4) 后端是范围广泛的微服务。

问题

有可能吗?你能给我一些建议吗?

应该是多个 React 应用?我了解如何将一个 react 应用程序渲染到另一个应用程序中,但无法想象如何在它们之间连接 redux 操作。

也许子应用程序只是独立的模块,但它是如何启动的? 也许有人在 GitHub 上看到了类似的项目或有用的链接?

感谢您的建议。

【问题讨论】:

    标签: reactjs architecture


    【解决方案1】:

    是的,你想做的是一个新的流行词:micro frontends,与微服务配对。

    我还没有找到一个单一的、受社区支持或非常流行的解决方案,但确实存在一些解决方案 - 不幸的是,对于您的情况而言,基于 WebComponents。

    一些帖子可以帮助您开始研究,我相信您会从这里找到自己的方法:

    Microfrontends: an approach to building scalable web apps

    Building microfrontends with React and Node

    一些大公司的“框架”也可以使用,比如 Zalando 的这个:https://www.mosaic9.org/

    我不认为任何现成的解决方案都能满足您的需求,因为这种前端解决方案会影响您产品的许多层(从存储库模式到 CI/CD、您的 Nginx/CDN 设置、您的Docker 的开发环境可能......)任何“框架”都可能会做出假设在您的情况下无效。

    我觉得这很有趣,我正在跟进新闻。希望这可以帮助您找到解决方法。 ;)

    【讨论】:

      【解决方案2】:

      我正在做类似的事情。 single-spa (https://single-spa.js.org/) 看起来是目前最灵活、最成熟的解决方案。

      您还可以考虑简单地使用动态导入(es6 导入函数),或 react-loadable 在运行时加载组件子应用程序。不幸的是,JS web 框架和工具不支持在运行时加载东西,但这并不难。

      我正在考虑使用带有 nextJS 的“应用程序外壳”来快速加载 SSR 页面,然后使用 import() 动态加载“子应用程序”

      【讨论】:

        猜你喜欢
        • 2011-10-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-06-12
        • 1970-01-01
        • 2015-12-04
        相关资源
        最近更新 更多