概述

传统的中后台项目在前端开发时，常常会面临项目复杂度高、团队协作开发难度大、技术栈多样、客制化开发困难、第三方系统集成困难、应用性能差等问题。

为了有效解决这些问题，HZERO 平台推出了 HZEROJS 前端框架，该框架集成了 qiankun、iframe、Module Federation 多套微前端方案的能力，具有以下优点：

1. 项目复杂度降低：

支持将系统模块、组件、页面拆分成更小的部分，提升应用的可维护性和可扩展性。

2. 团队协作提升:

支持每个团队都可以有自己的开发方式和风格，可以独立部署测试。

3. 多技术栈开发：

打破了技术栈限制瓶颈，各个团队可以选择熟悉的技术栈进行应用模块开发。

4. 客制化能力增强：

支持更多、更灵活的 API 钩子，可以满足不同团队对系统的个性化需求。

5. 三方系统集成容易：

支持通过 qiankun 或 iframe 的方式接入第三方系统到 HZERO 平台。

HZEROJS 微前端能力已在 HZERO 体系下的多个项目中实施落地，以下是一些实际项目中的应用场景。

场景一：多团队协作研发 The first scene

场景说明

HZERO 平台包含多个子系统，其中工作流、飞搭都是比较大的模块，需要不同的研发团队进行独立开发和维护，如果按照传统的开发方式，每个团队的协作效率会特别低。通过 HZEROJS 提供的微前端方式可以很方便的把不同的子模块拆出去，这样各团队就可以及时响应用户需求的变化，并快速推出新版本的应用。

结果展示

HZERO 在hzeronf.sass.hand-china.com/* 上有一个 host 应用，并且在hzero-test.open.hand-china.com/* 上有多个子应用。子应用程序也挂载在 host 域上，因此可以直接通过 host 的域名访问对应的子模块资源。

场景二：多技术栈开发 The second scene

场景说明

HZERO 平台的主流技术栈是 REACT，但是通常会有客户和其它团队想要用不同的技术栈进行开发，比如 VUE。传统的开发方式，很难支持在一个系统中同时运用多种技术栈。HZEROJS 支持以简单配置的方式快速集成 VUE 技术栈进行页面开发。

结果展示

HZERO 平台引入 VUE 框架进行页面开发，与平台的路由进行融合，对于用户来说基本是无感知的。

场景三：客制化悬浮球 The third scene

场景说明

HZERO 平台有一个内置的悬浮球控件，但是有不少项目对悬浮球功能想要进行完全的自定义，甚至新增一个悬浮球，在以前的开发方式中，是很难快速支持的。通过 HZEROJS 提供的联邦组件和配置可以很容易实现对应的客制化需求。

结果展示

以下示例可以看到，通过联邦配置我们很容易就客制化了一个新的悬浮球出来。

场景四：集成第三方系统 The fourth scene

场景说明

某客户项目需要在 HZERO 平台中集成一个独立的第三方系统，通常我们会采用内嵌 iframe 的方式来实现对应的需求。HZEROJS 除了对 iframe 做了深度支持外，还接入了 qiankun 方案，通过 qiankun 配置也可以很容易的接入一个子系统到平台中来。

结果展示

HZERO 作为主应用，UMI 子模块作为从应用，在 HZERO 平台中可以直接点击对应路径，进入 UMI 子模块的页面。

结语

用 HZEROJS 提供的微前端技术，将系统合理拆分，不仅可以显著提高开发和维护效率，还能大幅提升系统性能和响应速度。这使得企业级应用能够更有效地应对需求变化和挑战。

联系我们

以上就是 HZEROJS 微前端能力的基本介绍

具体操作步骤和更多资料请通过 HZEROJS-微前端专题 进行查看

如果您有对应的需求和建议

可以通过 开放平台 进行工单反馈，问题分类请选择【前端组件库/ HZEROJS】