写点什么

太平洋保险 CIMS 系统微前端实践

  • 2018-06-30
  • 本文字数:1777 字

    阅读完需:约 6 分钟

什么是微前端(Micro-Frontends)

微前端的概念最早由 ThoughtWorks 在 2016 年底提出,是一种将微服务推广到前端的设计理念。( https://micro-frontends.org/),目前的趋势是构建一个功能丰富且功能强大的浏览器应用程序,也就是位于微服务架构之上的单页应用程序(SPA)。

随着时间的推移,大家会发现前端独立开发团队开发的表现层会变的越来越难以维护,这就是我们所说的大前端以及大前端遇到的问题。

微前端是大前端之后的一种概念,所谓大前端,即将传统中归于后端的服务器脚本和模板划归到前端。所谓微前端,即将大前端包含的前端和后端(一般指 nodejs 部分)纵向合并、横向打散,形成完整的 E2E 的微“大前端”。

微前端可以有效的降低前端的代码复杂度和更加灵活的解耦,甚至可以很好的组合当前流行的各种前端框架,例如 Vue,React,Angluar。同时, 微前端服务可以有自己的独立生命周期。

项目背景

太平洋保险 CIMS 系统作为 CMDB 系统的升级替代品,在包含了 CMDB 的所有功能之外,还对自动采集、自动发现以及关联关系的构建提供了简单有效的支持。

项目前期采用 AngluarJS1.6 版本作为前端 SPA 的实现。随着业务需求的不断变化单页面应用已经非常难维护十几个团队提出的各种定制化需求。

CIMS 作为生产板块的核心系统,需求方来自 IT 的各个团队,包括:应用运行团队、需求架构团队、生产调度团队、服务器团队、网络团队、通讯团队、安全团队等十几个团队,对接集团内的十几个系统,针对如此多的需求和对接工作,项目组考虑过重写前端的可能性,但是由于前期积累下来的个性化需求修改较多,如果贸然重写前端,填过的坑可能还要再填一次。同时也考虑过采用 CS 形式的小程序来满足各个团队的个性化需求,但是考虑到后期小程序的升级维护成本和分发等问题,此方案也被放弃。最终项目组决定在 CIMS 系统中使用前端插件的形式进行个性化扩展,这也就是 CIMS 系统微前端的设计雏形。

CIMS 项目的演进历史

以下是项目组在最近一年的系统演进过程中完成的来自不同需求方的需求图表,在人员还有略微减少的情况下,大家可以通过这个任务完成曲线看到,项目组从 17 年下半年的平稳运行,到 17 年底 18 年初的任务挤压,再到如今的任务加速完成,系统的架构调整起到了非常重要的作用:

为了能够更好的完成不同业务团队提出的不同需求,系统进行了以下系统演进:

微服务之前的系统演进,在这里就不做赘述,有很很好的文章可以参考。针对从微服务架构演化到微前端进而完成系统全面微服务化的架构演进,CIMS 项目组通过如下几步完成:

  • 完善了 OpenAPI 和 Webhook 接口,实现 pull 和 push 模式;同时开发了开放平台,模块开发者可以直接通过注册个人的开发者账号完成独立应用的开发。
  • 开发了一套独有的智能动态路由组件,并完成了功能闭包。对轻应用进行动态智能引流。
  • 开发了一套独有的应用商店系统,对轻应用进行前台化的控制与管理。
  • 实现了统一认证中心,针对独立应用进行二级权限认证。
  • 与集团容器平台对接,为不同轻应用的独立部署提供必要条件。
  • 对现有页面进行框架修改,达到无缝嵌入功能。
  • 改造完成后,在用户无感知的情况下,下图中叠加的三个页面使用了 VUE、AngluarJS 以及一个页面即有 VUE 又有 AngluarJS 的前端设计方案,每个应用都是一个 E2E 的独立程序完成独立功能,业务数据通过 OpenAPI 和 WebHook 获取,同时通过智能动态路由进行路由转向。针对某一个团队的个性化需求,再也不用整个大前端打包发布了。

总 结

在过去的几年,大量地前端项目已经使用 Angular、Vue、React、Ember 等框架重写。使用哪种框架,对于一个前端项目来说,差别并不大。从零启动一个前端项目是一件容易的事,但是问题的关键在于,我们不可能不断地重写前端项目。

于是,对于前端项目来说问题变成了,如何去维护一个前端项目。如果一个项目中的前端开发人员水平参差不齐,但是没有辅以有效的代码改善方式,如 CheckStyle、Code Review、测试 等等。那么,未来它必是一个痛苦的遗留系统。

微前端的提出与尝试, 是前端技术发展的必然趋势。非常荣幸的是太平洋保险 CIMS 项目引领了这一趋势,相信在不久的将来,会有更多的系统不约而同的进行微前端的尝试与实践,为了可以让后来者可以更好的少走弯路,项目组也在努力的提炼现有技术套件,争取早日可以完成业务无关性抽象。将微前端技术以标准框架的形式,对外输出给更多的项目与组织。

感谢覃云对本文审校。

2018-06-30 16:462618

评论 1 条评论

发布
用户头像
希望有更详细的文章,我们公司的一个项目目前快崩溃了,就如文末说的,前期开发追求快,人员水平参差不齐,又没有有效的代码改善方式,项目业务逻辑又超级复杂…积重难返的感觉,又没有资源和时间,现在苦不堪言……微前端不知道能不能解决这种问题,用微前端方式重构
2018-11-09 23:47
回复
没有更多了
发现更多内容

从训练到推理丨焱融存储蝉联 IDC SDS 文件市场增速第一

焱融科技

文件存储 软件定义存储 AI存储 全闪存 IDC报告

CodeBuddy 焕新升级: 软件开发智能体 Craft 重磅发布

CodeBuddy

腾讯云 腾讯 AI编程 CodeBuddy

海信三筒洗衣机全系配置及价格公布,疯狂宠粉!科技创新引领产业升级

新消费日报

CAD缩放后有符号不显示怎么办

极客天地

CAD中的草图绘制功能

极客天地

LLM实现text2SQL实战总结

数由科技

人工智能 设计原则 LLM text2sql

天润融通AI Agent重塑零售连锁行业客户服务竞争力

天润融通

如何合理规划Elasticsearch的索引|得物技术

得物技术

索引 Elastic Search 容量设计

前端热更新:无声引擎驱动中国互联网的数字化转型

xuyinyin

代码成为 "乐高积木"——AI 时代的开发革命

代码制造者

#AI编程

字节跳动开源 Godel-Rescheduler:适用于云原生系统的全局最优重调度框架

字节跳动开源

云原生 全局最优调度 多策略协同 高吞吐执行 生产级稳定性

使用 Node.js、Express 和 React 构建强大的 API

数据追梦人

API 接口开发与合理利用:构建高效、安全、可维护的数字桥梁

Noah

如何使用 Databend Cloud 化简大数据架构?| Data Infra NO.24 回顾

Databend

优化 Apache 日志记录的 5 个最佳实践

运维有小邓

日志管理系统 Apache 日志

线上线下畅玩无阻,陪玩系统小程序源码是怎样做到的?

DUOKE七七

php vue.js MySQL uniapp

CAD如何利用两点间的中点解决镜像中心线问题

极客天地

用 SQL 还是 NoSQL?Apipost 的回答是:两个都要!

数据追梦人

Typescript AI 通义灵码 VSCode插件安装与功能详解

阿里巴巴云原生

程序员业务能力进阶:技术与业务的深度融合

代码制造者

低代码 #程序员

CST联合Isight进行天线DOE设计

思茂信息

cst cst电磁仿真 CST Studio Suite

阜博集团完成对 PEX 的收购

财见

Cision宣布获得2.5亿美元新资金

财见

【HarmonyOS 5】如何开启DevEco Studio热更新调试应用模式

GeorgeGcs

调试 热更新

「高盛」最新人形机器人研报:主流人形机器人公司梳理和商业化瓶颈(附报告)

机器人头条

科技 大模型 人形机器人 具身智能

域名转移会影响域名解析吗?

国科云

MCP Server 开发实战 | 大模型无缝对接 Grafana

阿里巴巴云原生

阿里云 云原生 Grafana

阿里云 Elasticsearch Serverless 检索增强型8.17版免费邀测!

阿里云大数据AI技术

大数据 elasticsearch 阿里云 检索 serveless

Typescript AI 通义灵码 VSCode插件安装与功能详解

阿里云云效

typescript

ERP系统生产模式(ATO、MTS、MTO、ETO、CTO)你了解多少?!

积木链小链

数字化 ERP 智能制造 生产模式

凌晨 GPT - 4.1霸气登场,性能狂飙还降价

GPU算力

openai ChatGPT ChatGPT4 LLM模型 #大语言模型

太平洋保险CIMS系统微前端实践_架构_黄超_InfoQ精选文章