微前端架构在数据管理平台的实践与应用

引言

将传统的Web单体应用按功能拆分为一系列可被独立设计、开发、部署和运维的软件服务单元就是后端微服务，这种由多个独立应用组成的架构风格也需要在前端工程上实现，于是出现了微前端架构的概念
对于前端开发者而言，使用微前端架构需要面临技术栈选型、独立开发和独立部署的问题

相关概念

巨石应用：现代前端系统大都采用单页面应用开发，而单页面应用随着时间的推移和开发的功能增多，前端工程因变得庞大导致难以维护，通常把这种现象的应用称为巨石应用
微前端:微前端不是单纯的前端框架或者工具，而是一套架构体系，将前端应用分解成一些更小、更简单的，能够独立开发、测试和部署的小块，然后将可独立交付的应用程序组合成一个更大的整体，在用户看来仍然是内聚的单个系统。微前端的优势包括增量升级、代码解耦和独立部署

微前端架构方案比较

项目

项目描述

随着全球经济一体化的迅猛发展，信息战日益激烈，数据资产的优劣及价值挖掘已成为企业竞争的重要砝码，数据管理平台软件开发项目是我司为建立各工程行业 BIM 模型及工程数据标准，梳理设计、建管、运维三大平台的主数据及关系，实现工程全过程数据贯通，并在此基础上不断围绕工程进行数据的集成、复用、沉淀，从而创造数据价值和业务价值的应用。数据管理平台软件开发项目的目标是围绕工程数据管理标准体系，实现工程数据全生命周期的信息化管理

项目特点

数据管理平台软件开发项目包括主数据管理平台、BIM 模型属性校验系统、编码管理系统、数据集市平台、AI 云平台等一系列软件，各个应用软件通过租户的方式使用同一套后端服务,其中主要的业务功能是独立分开的，但是一些个人中心、登录、首页等模块是通用一致的，实际上，每开发一个新的软件，都需要将旧代码复制到新项目中，导致当需要维护个人中心的功能时，需要同时修改所有的软件代码来进行更新，提高了维护成本，增加了回归测试部署的时间。为了解决该问题，本团队决定采用微前端架构设计方案，将个人中心、登录、首页等共用模块拆分成微前端子应用，各个软件共用同一个子应用，实现应用共享，减少维护成本

项目实践

以个人中心、首页等共享模块作为子应用，使用共享模块的软件作为主应用，面对项目特点，重点从主子应用设计、开发方式、部署方式、实践成果描述微前端的应用实践

主子应用设计

个人中心微前端子应用采用新的框架技术vite 来重写旧代码。另外子应用拥有独立的 git仓库，脱离旧代码，拥有较小的源代码。对于各个主应用，在旧代码中删除个人中心模块，使用无界微前端的组件将新的个人中心模块的内容由 URL 方式接入，实现主应用的设计，如图3所示。在主子应用通信方面，采用无界微前端的 Eventbus 做全局通信，使用 props 做局部通信。主子应用的设计，对于主应用而言，减少了代码总量，改动量较小；对于子应用而言，可以采用新的技术，获得新的开发体验