- 原文地址：Rethinking the Front-end: Micro Frontend
- 原文作者：Ritesh Kumar
- 译文出自：掘金翻译计划
- 本文永久链接：github.com/xitu/gold-m…
- 译者：IAMSHENSH
- 校对者：刘海东 X. Zhuo
重新思考前端：微前端
假设如今正在开发的大多数 Web 应用程序，都面临着类似的情况：前端变得越来越大，而与后端的相关性越来越小。
重新思考不同的前端框架如何共存，例如，使用 JQuery 或 AngularJS 1.x 构建的旧模块，与使用 React 或 Vue 构建的新模块联动。
整体方法不适用于普遍的 Web 应用程序。
管理十个十人的项目，要比管理一个百人的大项目更简单。
可扩展性在这里是主要的构想。我们可以简化得到：
- 独立仓库
- 单独部署
- 更快速构建与发布
- 自主的团队
- 更轻松测试与处理
举个例子:
Myapp.com/ - 静态 HTML 构建的登录页面.
Myapp.com/settings - 安装了 AngularJS 1.x 的陈旧设置模块。
Myapp.com/dashboard - 使用 React 构建的新仪表盘模块。
我可以想象它有以下需求：
-
纯 JavaScript 的共享代码库，例如路由管理与用户会话管理。以及一些可共用的 CSS。两者都应该尽可能的轻量。
-
在各种框架中设计的一系列“微型应用”独立模块，存储在不同的代码库中。
-
一套部署架构，将不同代码库的模块都捆绑在一起，并在模块被修改时，将其更新到服务器。
但事实证明，其他人也在思考同样的问题。典型术语是“微前端”。
React 多年来发展迅捷，并且使开发人员的工作变得更轻松，是目前最流行的微前端框架.
实现微前端
以下是实现微前端的几种不同方法：
- Single-SPA “元框架” 无须刷新，便可将多个框架组合在同一页面（参考组合了 React、 Vue、 Angular 1 与 Angular 2 等框架的示例）。在这里参考 Bret Little 的解释。
- 存在于不同 URL 的多个单页应用程序。 这些应用程序使用 NPM 或 Bower 组件来共享功能。
- 通过第三方库与 Window.postMessage API 配合，将微应用隔离到 IFrames 中。
- Web组件作为集成层。
- React 的“黑盒”组件。
阅读愉快！
干杯， Ritesh :)
如果发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。
