[译] 重新思考前端:微前端

原文转载自 「掘金掘金翻译计划」 ( https://juejin.im/post/5ec882636fb9a047bb6a4618 ) By 实话

预计阅读时间 0 分钟(共 0 个字, 0 张图片, 0 个链接)

重新思考前端:微前端

假设如今正在开发的大多数 Web 应用程序,都面临着类似的情况:前端变得越来越大,而与后端的相关性越来越小。

重新思考不同的前端框架如何共存,例如,使用 JQuery 或 AngularJS 1.x 构建的旧模块,与使用 React 或 Vue 构建的新模块联动。

整体方法不适用于普遍的 Web 应用程序。

管理十个十人的项目,要比管理一个百人的大项目更简单。

可扩展性在这里是主要的构想。我们可以简化得到:

举个例子:

Myapp.com/ - 静态 HTML 构建的登录页面.

Myapp.com/settings - 安装了 AngularJS 1.x 的陈旧设置模块。

Myapp.com/dashboard - 使用 React 构建的新仪表盘模块。

我可以想象它有以下需求:

但事实证明,其他人也在思考同样的问题。典型术语是“微前端”。

来源: cygnismedia

来源: cygnismedia

React 多年来发展迅捷,并且使开发人员的工作变得更轻松,是目前最流行的微前端框架.

实现微前端

以下是实现微前端的几种不同方法:

  1. Single-SPA “元框架” 无须刷新,便可将多个框架组合在同一页面(参考组合了 React、 Vue、 Angular 1 与 Angular 2 等框架的示例)。在这里参考 Bret Little 的解释
  2. 存在于不同 URL 的多个单页应用程序。 这些应用程序使用 NPM 或 Bower 组件来共享功能。
  3. 通过第三方库与 Window.postMessage API 配合,将微应用隔离到 IFrames 中。
  4. Web组件作为集成层
  5. React 的“黑盒”组件

阅读愉快!

干杯, Ritesh :)

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

more_vert