生态用工前端架构升级产品系统

我要开发同款
minapp00553840612026年11月14日
5阅读

技术信息

语言技术
React、TypeScript、Antd、webpack、ES6
系统类型
Web、H5
行业分类
企业服务

作品详情

行业场景

原系统基于Node后端动态返回HTML入口,子应用切换需整页刷新;各子应用代码仓库独立,请求拦截、权限校验等通用能力重复建设,国际化规则不统一,线上问题定位困难等;

功能介绍

阿里内部外包人员和项目的管理系统,是一个大型的人事系统,包含了预算管理、项目管理、招聘管理、人员管理、上岗管理、考勤管理、薪酬管理、结算管理、入离异管理等多个模块;
本次项目做了大概以下调整:
1.微前端架构升级,接入十多个子应用
2.性能监测、白屏监测、异常检测
3.构建新的统一的组件库、沉淀通用组件和业务组件
4.网络请求拦截统一,鉴权统一
5.国际化方案优化

项目实现

主导前端架构升级,协调后端
1.引入微前端架构,主应用由Java后端统一提供入口,子应用按需动态挂载,实现无感知切换与独立部署;
2.将网络请求、鉴权、错误处理等通用能力抽离为独立NPM包,通过工厂模式创建不同实例,兼容文件下载、超时重试等特殊场景,并统一错误码映射与跳转逻辑;
3.重构国际化方案,采用NPM包统一管理多语言词条,支持动态替换与正则匹配,解决旧系统替换不彻底、维护困难的问题;
4.审批等通用页面在主应用独立成单独的layout,按需挂载子应用,完成审批页面的统一;
5.将之前的多包组件库废弃采用单包组件库,收集通用组件,沉淀业务组件;
6.接入前端监控,JS异常监控、Promise异常、接口异常、资源加载失败、白屏监控、性能监控、错误日志上报、SourceMap定位、用户行为链路等;
新架构支撑 10+ 子应用平滑迁移,开发效率提升约 30%,系统稳定性显著增强,为后续业务扩展奠定基础;

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论