换掉bpmn-js，让前端更熟悉工作流业务

前言

看到这个标题可能有些同学会奇怪，bpmn.js不是工作流系统前端最普遍的方案吗？为什么我们需要换掉bpmn.js。这里我们站在前端的角度先明确一下工作流、工作流管理系统、工作流引擎、BPMN规范、bpmn-js的关系。

工作流

工作流的概念在百度百科和wiki上描述的都比较抽象，我们可以大致理解为做一些事情的时候，我们把做事情抽象为几个步骤，然后再合理的组织这些步骤，最终通过组织好的步骤来做这些事情。例如我们早上起来做的事情看做一项工作流，可以拆分为上厕所、洗手、刷牙、吃饭这些步骤。有的人“上厕所->洗手->吃饭->刷牙”；有的人“刷牙->上厕所->吃饭->洗手”。这里可以看到“组织步骤”的不同，最后表现的效果也不同。我们把事情的拆分、组织、执行、最后到管理都搬到计算机上面来，就可以叫做工作流。

工作流管理系统

这个就是我们平时开发的系统，这些系统大多是以流程为中心，用图形化的方式来表示工作流。既然是图形化，那就需要画图，现在大多数系统都把画图搬到网页上来，所以才需要我们前端参与进来。

工作流引擎

这个一般是后端用来执行我们组织的步骤的引擎，决定着我们上厕所后是吃饭还是洗手。工作流引擎有很多，最常见的有Activiti、Camunda BPM、Flowable。

BPMN规范

翻译成中文是业务流程建模符号，是一个组织定的行业标准。前面提到可以通过画图的方式来描述一个事情怎么做，但是不同的人画的图不一样，不同的工作流引擎对图产出的数据也不一样。为了让图更好的被人和机器理解，就有一个组织就提出了一个标准，从图上节点、连线的具体含义到提交给工作流引擎的数据格式，都有给出了具体的定义。国内的资料大家可以看这个文档：前言 | AWS BPMN2 Activity参考指南 。目前大部分开源的工作流引擎都支持BPMN规范，下面截的是wiki上的资料：

bpmn-js

这个很好理解，就是一个开源的实现BPMN2.0规范的web建模器。需要注意一下，bpmn-js虽然名字中有bpmn，但是并不是提出BPMN规范的官方组织开发的。所以不代表工作流引擎支持BPMN规范，前端就一定要用bpmn-js。我们也可以基于BPMN规范重新开发一套符合自己业务的流程设计器。

为什么我选择换掉bpmn-js

从上面的介绍中，我们可以发现bpmn-js天然满足BPMN规范，而绝大多数工作流引擎也是支持BP