项目重构总结（3）- 画布流程图重构

[silence717]

为什么从这里开始？架构师同学问我的时候，我说从流程画布开始，因为这是我们最重要模块的主要核心。线上用户对于流程图的吐槽和需求是最多的，如果把它放到后面，只怕重构这个事情推动到最后，整个人会处于一个比较疲惫的状态，不会再有这么大的心劲。事实证明：这是我做的最正确，最刺激的一个决定。

架构设计是由我们架构师所做，我只是搬砖到这里。

老系统技术

JQuery + mxGraph

新架构设计

angularjs + gojs + mobx + mmlpx + typescript (按字母顺序排名)

目标

提供一个可复用的流程图组件，且组件结构自顶向下拆解后能保证每一部分独立且简单易用。

总览

用函数的方式表示，流程图组件架构大概如下：

const flowDiagram = workspace(createDiagram(flowchart(flowLoader(id))), createPalette(palette(repeatNodeGroup(paletteLoader())))) 

组织架构

顶层 workspace 作为容器组件，与 mmlpx 组件建立数据关联，通过 props 将数据分发至下层的展示型组件。

展示型组件与容器组件之间的交互遵循 props down, events up 原则。

画布及节点调色板调用 canvas 库绘图（目前是 gojs ），理论上这一层需要做到可替换。

mmlpx 架构

重重困难

• typescript + AngularJs1.x + mobx 全新技术组合方式的适应与开发。
• 开发人力只有架构师同学加我，人力严重不足，开发工作量巨大。
• 对于业务了解的不够深入，很多逻辑无从得知，只能翻看老代码，严重影响开发进度。
• 后端api接口相当不合理，里面为了适配，做了层层的数据转换（其实这是可以预见的，前端这么烂，后端又能好到哪里去）。
• 产品经理支持力度不够，对于不合理的设计还要保持线上，争吵无数。
• 与老系统的融合，遇到了很多意想不到的坑，添加适配。
• 灰度上线，部分用户不习惯新版本，要求回退（这对于我们打击不小）。可能和我们的2B的项目有关，很多用户已经习惯了老版本的东西，不愿意接受新的事物。

开发时间

2个人，从开发到上线，经历了3个月吧。

结果

在灰度发布上线之后，1000多家客户，有7家执意使用老版本，就因为小小功能的变更，这也充分说明用户习惯的问题，不要随便去更改一个用户已经完全习惯了的产品设计。收到这些反馈之后，我们又开始了二轮画布优化的开发，开发到上线差不多一个月，最终让客户完全接受了我们新版本的功能，也收到一些正向的反馈，实在是为之开心。

这是咨询我们的运营同学，在优化版本上线以后，有没有用户要求回退，或者有没有什么吐槽的点：

是不是有一种开心的感觉？
得到这个讯息之后，我便可以安心的开始下一步的重构了。