Hyperfrontend 是一种混合微前端(hybrid micro-frontend)模式,用于嵌入实时运行的 Web 应用,并为其提供通信协议、生命周期与契约标准。其核心目标是让多个独立构建、独立部署的应用能够在同一页面上协同工作,彼此通信,同时不合并代码库,也不会因某一个功能失败而拖垮其余部分。
用途与定位: Hyperfrontend 面向需要整合多团队、多技术栈前端资产的场景。它将任意 Web 应用——无论新旧——进行沙箱化,并支持在构建时或运行时进行组合。其出发点是解决工程团队之间的协调痛点:不同时区、不同迭代节奏、优先级冲突,导致总有人在等待别人。Hyperfrontend 让每个团队可以按自己的排期发布,减少互相阻塞。
主要能力:
- 每个功能运行在各自的 iframe 中,通过 @hyperfrontend/nexus 库进行标准化通信。
- 消息采用 broker-channel 架构路由,并可选择加密。
- 宿主应用(Host Application)动态加载各功能并管理其生命周期,且没有构建期依赖。
- 提供一个轻量加载器,用于引导微前端并建立通信通道。
- 在不同上下文之间路由带类型、带校验的消息,并支持对敏感数据加密。
- 项目为开源、零运行时依赖,并已宣布企业版。
使用方式: 官方提供“从你想做的事开始”的引导路径,包含三类典型起点:一是需要多个独立构建、独立部署的应用在同一页面协作;二是需要在他人的页面中运行别团队以功能包形式交付的应用,且无需学习其技术栈;三是需要让页面与 iframe 通信,避免裸用 postMessage 造成的“字符串类型猜测”式脆弱实现。 文档中的每个代码示例,要么取自实际发布并运行的源码,要么是针对指定包版本在指定日期执行过的代码,示例上的标记会说明来源。学习路径以“构建真实东西”为主线,逐步推进到可运行的结果;也提供面向具体任务、从问题直达结果的直线路径。官方还提供运行在各自源(origin)上的真实功能应用演示,可在浏览器中直接查看组合效果,以及关于架构的长文阐述。
适用场景:
- 多团队、多代码库的前端整合与共存。
- 老旧 Web 应用的现代化改造,避免整体重写(宣称“数周集成,无需重写”)。
- 需要在宿主页面中加载并观察其他团队交付的功能包,而不必了解其技术栈。
- 需要页面与 iframe 之间可靠、类型化、可校验的通信。
限制与暂未提供的细节: 资料未说明具体的收费模式、价格、支持的浏览器或平台范围、性能指标、部署要求以及企业版的具体差异,这些信息暂未提供。官方仅说明项目开源、零运行时依赖,并已宣布企业版。