为什么从这里开始?架构师同学问我的时候,我说从流程画布开始,因为这是我们最重要模块的主要核心。线上用户对于流程图的吐槽和需求是最多的,如果把它放到后面,只怕重构这个事情推动到最后,整个人会处于一个比较疲惫的状态,不会再有这么大的心劲。事实证明:这是我做的最正确,最刺激的一个决定。
架构设计是由我们架构师所做,我只是搬砖到这里。
老系统技术
JQuery + mxGraph
新架构设计
angularjs + gojs + mobx + mmlpx + typescript (按字母顺序排名)
目标
提供一个可复用的流程图组件,且组件结构自顶向下拆解后能保证每一部分独立且简单易用。
总览
用函数的方式表示,流程图组件架构大概如下:
|
|
组织架构
顶层 workspace
作为容器组件,与 mmlpx 组件建立数据关联,通过 props
将数据分发至下层的展示型组件。
展示型组件与容器组件之间的交互遵循 props down, events up
原则。
画布及节点调色板调用 canvas 库绘图(目前是 gojs ),理论上这一层需要做到可替换。
mmlpx 架构
重重困难
- typescript + AngularJs1.x + mobx 全新技术组合方式的适应与开发。
- 开发人力只有架构师同学加我,人力严重不足,开发工作量巨大。
- 对于业务了解的不够深入,很多逻辑无从得知,只能翻看老代码,严重影响开发进度。
- 后端api接口相当不合理,里面为了适配,做了层层的数据转换(其实这是可以预见的,前端这么烂,后端又能好到哪里去)。
- 产品经理支持力度不够,对于不合理的设计还要保持线上,争吵无数。
- 与老系统的融合,遇到了很多意想不到的坑,添加适配。
- 灰度上线,部分用户不习惯新版本,要求回退(这对于我们打击不小)。可能和我们的2B的项目有关,很多用户已经习惯了老版本的东西,不愿意接受新的事物。
开发时间
2个人,从开发到上线,经历了3个月吧。
结果
在灰度发布上线之后,1000多家客户,有7家执意使用老版本,就因为小小功能的变更,这也充分说明用户习惯的问题,不要随便去更改一个用户已经完全习惯了的产品设计。收到这些反馈之后,我们又开始了二轮画布优化的开发,开发到上线差不多一个月,最终让客户完全接受了我们新版本的功能,也收到一些正向的反馈,实在是为之开心。
这是咨询我们的运营同学,在优化版本上线以后,有没有用户要求回退,或者有没有什么吐槽的点:
是不是有一种开心的感觉?
得到这个讯息之后,我便可以安心的开始下一步的重构了。