微前端:何时选择 WU Framework
了解微前端(microfrontends 或 microfronts)的含义、WU 的作用,以及如何拆分应用并掌握数据、路由和部署的控制权。
什么是 microfrontends 或 microfronts
Microfrontends(微前端)将界面拆分为具有功能边界和独立交付周期的应用。你也会见到 micro-frontends、microfronts 和 MFE 这些名称。仅将组件分到不同文件夹还不够:每个应用都需要集成契约和负责发布的维护者。
WU Framework 是用于组合这些应用的 JavaScript 运行时。Shell 决定应用显示的位置,WU 管理注册、加载、挂载和卸载。各应用保留构建界面所用的技术。什么是 WU介绍了基本契约。
该包包含 React、Vue、Angular、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus 的适配器。请在适配器参考中查看各自的契约。
对于其他技术,可以通过 wu.define 注册 mount 和 unmount,或使用 createWuAdapter 构建适配器。统一契约既能连接使用相同框架的应用,也能连接使用不同框架的应用。
由独立团队维护的商店
一个团队可以维护 React 商品目录,另一个团队维护 Vue 购物车。Shell 为两者分别预留空间。目录发布选择结果,购物车观察这些数据,双方都无需导入对方的内部组件。React 与 Vue 共享计数器 提供可下载代码,让你实际体验这种交互。
按商品目录、支付或管理等业务能力拆分。共享按钮通常应放在组件库中。将其变成另一个微前端会增加加载、挂载和协调工作,却不一定带来有用的独立性。
何时值得评估 WU
- 你需要分阶段将新应用引入现有界面,同时保留其使用的技术。
- 不同团队发布不同的业务能力,并能维护兼容的契约。
- 你希望组合不同渲染器,并通过状态、事件或版本化服务连接应用。
对于统一协调发布的单一团队,模块化应用可能更合适。微前端需要额外考虑依赖、网络故障、可观测性和兼容性。WU 提供组合机制,但这些决策仍由团队负责。
上线前需要做哪些决定
明确谁控制 URL、哪些数据可以跨越边界,以及应用加载失败时如何处理。共享 JavaScript 上下文无法隔离恶意代码。WU 的 grants 限制对其 facade 的访问;请阅读权限与生命周期和 Shell 架构。
独立构建也不自动等于独立部署。发布相互兼容的资源和 manifest,保留可恢复的版本,并在每次变更后检查 Shell。生产指南解释了 CLI 的输出。
用真实业务能力评估 WU
从使用 WU CLI 创建第一个微应用开始,添加第二个应用,并测试卸载、通信和加载失败。选择集成方式时请阅读 React 与 Angular;选择架构时请阅读 WU 与 Module Federation、single-spa 对比。