在金融科技行业,交易界面的稳定性和高效性对业务运营至关重要。遗留系统由于长期积累的技术债务和复杂架构,经常面临维护困难和性能瓶颈。近日,一支由资深工程师组成的小团队成功完成了全球某银行遗留交易UI的重建项目,将原本复杂如意大利面的代码体系转化为简洁清爽的现代界面,极大提升了用户体验和系统维护效率。 这款遗留UI主要服务于全球交易员,用于监控期权市场波动性,覆盖欧洲、中东及非洲(EMEA)、北美(NAM)和亚太(APAC)等多个重要地区。该UI自2020年以来几乎未曾更新,代码库沉重且混乱,严重影响了开发和修复的效率。面对这一局面,团队决定采用替代方案,从头重建而非在旧系统基础上修修补补。
原因在于旧系统依赖大量复杂的Saga、Redux、样式组件和Web Workers,并且采用了大量React类组件,生命周期管理错综复杂且不透明,增加了修改风险。 此外,旧系统的数据接口通过GraphQL协议进行通信,但查询过于庞大且深度嵌套,导致传输和处理效率低下,完全无法满足实时交易数据的需求。团队人员普遍缺乏对旧代码的信心,修复一个问题往往引发更多错误,尽管表面上测试覆盖率较高,却缺乏有效的测试质量保证,造成假象而非真实保护。 项目伊始,团队花费数周时间深入分析、剖析旧代码的各个模块和业务逻辑,努力厘清数据流向和界面控件的联动。由于当年参与开发的工程师均已离职,团队只能依靠自己摸索和团队协作完成理解过程。可视化流程图成为关键工具,帮助团队成员达成共识,并对后端API设计提出了有效改进建议。
绘制的图谱涵盖了复杂的控件数据链,揭示了很多令人疑惑的设计,例如为何前端需要查询交易假期来计算交易日终点,实际上这部分逻辑更适合由后端完成以减轻前端负担。 在确定重建方案时,项目受到技术栈必须整合进现有单一代码仓库的限制,但这反而促进了跨团队的协同开发。新系统采用Nx作为单仓库管理工具,Redux Toolkit(RTK)结合RTK Query处理状态管理和服务器数据请求。UI组件基于公司内部设计系统,保持视觉统一和交互一致性。构建工具选用Vite提升开发和打包速度,同时借助Vitest和Cypress分别进行单元和集成测试,确保质量。ESLint和Prettier辅助代码风格规范,Mock Service Worker则实现前后端解耦,支持前端在无后端环境下独立开发和调试。
采用Dockview作为零依赖的窗口布局库,实现灵活的拖拽及布局管理。 简洁性成为团队设计哲学的核心。希望构建的系统不仅具备现代技术优势,更须保证即便初级开发人员也能快速理解维护。类型系统方面,团队从模拟数据生成类型定义,随后升华为基于OpenAPI契约自动生成,确保接口变更即时在编译阶段暴露,消灭潜在接口不匹配风险。类型安全一体化极大提升了代码质量和稳定性。 系统架构摒弃传统的类组件,转而全力拥抱函数式编程理念,广泛采用React Hooks,利用RTK Query有效管理服务器状态。
针对实时数据更新的高频消息问题,团队设计了高效的客户端缓存缓冲区,极简四行代码实现消息缓存并定时批量提交至Redux,从而降低了主线程压力,避免引入额外复杂度如Web Workers。经过Mock Service Worker模拟压力测试,系统在处理数以万计的持续数据流时表现出卓越的稳定性和低资源消耗。 首个正式发布阶段,团队刻意保持功能最小化,提供包括数据网格和图表两个核心组件,满足交易员查看波动率曲面和波动微笑核心需求。界面尚不完善,未直接邀请交易员参与反馈,转而保持与管理层定期演示,确保项目稳健推进并合理规划后续功能扩展。处理多个后端服务和实时数据的Socket连接协调是一大挑战,结合RTK Query的onCacheEntryAdded生命周期钩子,开发了优雅且易维护的Socket消息处理机制。该机制通过挂载和卸载钩子管理Socket生命周期,实现线性、易于理解的异步流程,避免回调地狱和复杂事件流。
在数据流设计上,用户输入首先写入Redux状态,触发相关的数据请求和订阅。得到响应后,数据会经过必要的转换处理,并直接传递至UI组件层,如基于AG Grid的数据表和Highcharts的图表。前者设计了统一的集中数据管理点来处理前后处理逻辑,后者则通过直接调用Highcharts API高效更新图表数据,避免重复创建组件,提升渲染性能。采用RTK Query的skip选项实现条件触发查询,减少了传统命令式控制的脆弱性。 项目顺利推进的一个关键因素是与后端团队的密切协作。每天的站会成为沟通桥梁,API协议不断协商优化,确保既满足后端高效实现,也能满足前端易用性的需求。
持之以恒的沟通让团队能够逐步理清复杂的业务逻辑,逐渐剥离遗留系统的疑云。 技术成功之外,团队深刻领悟到领域知识积累的必要性。没有捷径可走,唯有勤奋钻研和团队协作推动项目进展。小而精的团队结构助力快速分享想法,透明开放的沟通氛围保证问题及时暴露解决,追求代码简洁清晰为后续维护奠定良好基础。 如今,这款现代化交易UI已经成为交易员首选工具,反应灵敏,界面简洁,运行稳定。回顾项目历程,最具挑战的是起步阶段对旧系统的解构和自信建立,一旦掌握了底层逻辑,一切后续工作变得水到渠成。
项目贡献者为金融科技领域留下了一套可持续、现代化且易读的代码基石,为未来持续创新提供了坚实保障。如此案例堪称复杂遗留系统现代化转型的典范,也为同类项目提供了宝贵借鉴。 。
