Liteflow逻辑编排可视化设计

王士江WangJohn2024-04-15 10:40

Liteflow是一款轻量、快速、稳定可编排的组件式规则引擎：

  • 🧬 强大的EL：简单低学习成本的EL，丰富的关键字，能完成任意模式的逻辑编排。小身材，大能量。

  • 🧩 皆为组件：拥有独特的设计理念，所有逻辑皆为组件。上下文隔离，组件单一职责，组件可以复用且互相解耦；

  • 📑 脚本支持：除了java，你还可以用多达7种脚本语言来书写你的逻辑：Java，Groovy，Js，Python，Lua，QLExpress，Aviator；

  • 🛖 规则存储：支持把规则和脚本存在任何关系型数据库，并且支持大部分的注册中心，支持zk，nacos，etcd，apollo，redis；

  • 🍃 平滑热刷：无论是编排规则，还是脚本组件，你都可以在不用重启应用的情况下进行即时刷新。实时替换逻辑；

  • ⭐️ 支持度广：JDK8~JDK17，Spring 2.X ~ Spring 3.X，统统支持。非Spring也给予了支持；

  • 🍱 高级特性：超多的高级特性，每一个都能贴合你的业务，利用高级特性让你的复杂场景瞬间变得简单且灵动；

  • 🏤 社区强大：多达几千人的使用者社区，及时给你答疑解惑。并且在国内多家一线企业中落地运用；

  • 🪁 可靠性强：对系统的额外消耗极小，性能强悍。多达1700个测试用例保障了LiteFlow的质量。

根据项目的需要，我们对Liteflow的逻辑编排进行了可视化设计，以下是我们的相关经验分享，希望能帮到有同样需求的朋友。

1、流程模型

Liteflow对可执行的逻辑流程进行建模，主要包括以下2个部分：

  • 1、逻辑组件（组件节点）："组件"的概念是从模块拆分的角度来看，每一个组件都是一个独立的可复用模块；"节点"概念是从流程角度来看，每一个组件都是可执行逻辑流程中的一个节点。组件类型包括：
    ① 顺序组件：用于THEN、WHEN；
    ② 分支组件：用于SWITCH、IF ...；
    ③ 循环组件：用于FOR、WHILE ...。
  • 2、逻辑编排：通过EL表达式进行组件编排： ① 串行编排：THEN；
    ② 并行编排：WHEN；
    ③ 选择编排：SWITCH；
    ④ 条件编排：IF；
    ⑤ 循环编排：FOR、WHILE、ITERATOR、BREAK。

2、逻辑可视化编排

将各个组件节点进行逻辑编排的结构，有如下几种：

  • 1、串行编排：THEN；
  • 2、并行编排：WHEN；
  • 3、选择编排：SWITCH；
  • 4、条件编排：IF；
  • 5、循环编排：FOR、WHILE、ITERATOR、BREAK。

以下是我们分别对Liteflow各个逻辑编排的EL表达式分析和可视化设计。

2.1 串行编排：THEN

1、文本（Liteflow EL）表达式

如果你要依次执行a,b,c,d四个组件，你可以用THEN关键字，需要注意的是，THEN必须大写。

typescript 复制代码 
<chain name="chain1">
    THEN(a, b, c, d);
</chain>

2、逻辑流程可视化

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 17,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 17,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 16,
        "callee": {
          "type": "Identifier",
          "start": 0,
          "end": 4,
          "name": "THEN"
        },
        "arguments": [
          {
            "type": "Identifier",
            "start": 5,
            "end": 6,
            "name": "a"
          },
          {
            "type": "Identifier",
            "start": 8,
            "end": 9,
            "name": "b"
          },
          {
            "type": "Identifier",
            "start": 11,
            "end": 12,
            "name": "c"
          },
          {
            "type": "Identifier",
            "start": 14,
            "end": 15,
            "name": "d"
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
        { "id": "c", "shape": "CommonComponent" },
        { "id": "d", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "a", "target": "b", "shape":"edge" },
        { "source": "b", "target": "c", "shape":"edge" },
        { "source": "c", "target": "d", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "THEN",
    "children": [
        { "type": "CommonComponent", "id": "a" },
        { "type": "CommonComponent", "id": "b" },
        { "type": "CommonComponent", "id": "c" },
        { "type": "CommonComponent", "id": "d" },
    ]
}

6、编排示例Demo

2.2 并行编排：WHEN

1、文本（Liteflow EL）表达式

如果你要并行执行b,c,d三个组件，你可以用WHEN关键字，需要注意的是，WHEN必须大写。

typescript 复制代码 
<chain name="chain1">
    THEN(
        a,
        WHEN(b, c, d),
        e
    );
</chain>

2、逻辑流程可视化

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 34,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 34,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 33,
        "callee": {
          "type": "Identifier",
          "start": 0,
          "end": 4,
          "name": "THEN"
        },
        "arguments": [
          {
            "type": "Identifier",
            "start": 8,
            "end": 9,
            "name": "a"
          },
          {
            "type": "CallExpression",
            "start": 13,
            "end": 26,
            "callee": {
              "type": "Identifier",
              "start": 13,
              "end": 17,
              "name": "WHEN"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 18,
                "end": 19,
                "name": "b"
              },
              {
                "type": "Identifier",
                "start": 21,
                "end": 22,
                "name": "c"
              },
              {
                "type": "Identifier",
                "start": 24,
                "end": 25,
                "name": "d"
              }
            ],
            "optional": false
          },
          {
            "type": "Identifier",
            "start": 30,
            "end": 31,
            "name": "e"
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
        { "id": "c", "shape": "CommonComponent" },
        { "id": "d", "shape": "CommonComponent" },
        { "id": "e", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "a", "target": "b", "shape":"edge" },
        { "source": "a", "target": "c", "shape":"edge" },
        { "source": "a", "target": "d", "shape":"edge" },
        { "source": "b", "target": "e", "shape":"edge" },
        { "source": "c", "target": "e", "shape":"edge" },
        { "source": "d", "target": "e", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "THEN",
    "children": [
        { "type": "CommonComponent", "id": "a" },
        {
            "type": "WHEN",
            "children": [
                { "type": "CommonComponent", "id": "b" },
                { "type": "CommonComponent", "id": "c" },
                { "type": "CommonComponent", "id": "d" },
            ]
        },
        { "type": "CommonComponent", "id": "e" },
    ]
}

6、编排示例Demo

2.3 选择编排：SWITCH

1、文本（Liteflow EL）表达式

如果，根据组件a，来选择执行b,c,d中的一个，你可以如下声明：

typescript 复制代码 
<chain name="chain1">
    SWITCH(a).to(b, c, d);
</chain>

2、逻辑流程可视化

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 22,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 22,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 21,
        "callee": {
          "type": "MemberExpression",
          "start": 0,
          "end": 12,
          "object": {
            "type": "CallExpression",
            "start": 0,
            "end": 9,
            "callee": {
              "type": "Identifier",
              "start": 0,
              "end": 6,
              "name": "SWITCH"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 7,
                "end": 8,
                "name": "a"
              }
            ],
            "optional": false
          },
          "property": {
            "type": "Identifier",
            "start": 10,
            "end": 12,
            "name": "to"
          },
          "computed": false,
          "optional": false
        },
        "arguments": [
          {
            "type": "Identifier",
            "start": 13,
            "end": 14,
            "name": "b"
          },
          {
            "type": "Identifier",
            "start": 16,
            "end": 17,
            "name": "c"
          },
          {
            "type": "Identifier",
            "start": 19,
            "end": 20,
            "name": "d"
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "a", "shape": "SwitchComponent" },
        { "id": "b", "shape": "CommonComponent" },
        { "id": "c", "shape": "CommonComponent" },
        { "id": "d", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "a", "target": "b", "shape":"edge" },
        { "source": "a", "target": "c", "shape":"edge" },
        { "source": "a", "target": "d", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "SWITCH",
    "condition": { "type": "SwitchComponent", "id": "x" },
    "children": [
        { "type": "CommonComponent", "id": "a" },
        { "type": "CommonComponent", "id": "b" },
        { "type": "CommonComponent", "id": "c" },
        { "type": "CommonComponent", "id": "d" },
    ]
}

6、编排示例Demo

2.4 条件编排：IF

1、文本（Liteflow EL）表达式

typescript 复制代码 
<chain name="chain1">
    THEN(
        IF(x, a),
        b
    );
</chain>

2、逻辑流程可视化

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 24,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 24,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 23,
        "callee": {
          "type": "Identifier",
          "start": 0,
          "end": 4,
          "name": "THEN"
        },
        "arguments": [
          {
            "type": "CallExpression",
            "start": 8,
            "end": 16,
            "callee": {
              "type": "Identifier",
              "start": 8,
              "end": 10,
              "name": "IF"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 11,
                "end": 12,
                "name": "x"
              },
              {
                "type": "Identifier",
                "start": 14,
                "end": 15,
                "name": "a"
              }
            ],
            "optional": false
          },
          {
            "type": "Identifier",
            "start": 20,
            "end": 21,
            "name": "b"
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "x", "shape": "IfComponent" },
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
        { "id": "virtual", "shape": "VirtualComponent" },
    ],
    "edges": [
        { "source": "x", "target": "a", "shape":"edge" },
        { "source": "x", "target": "virtual", "shape":"edge" },
        { "source": "a", "target": "b", "shape":"edge" },
        { "source": "virtual", "target": "b", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "IF",
    "condition": { "type": "IfComponent", "id": "x" },
    "children": [
        { "type": "CommonComponent", "id": "a" },
    ]
}

6、编排示例Demo

2.5 循环编排：FOR

1、文本（Liteflow EL）表达式

typescript 复制代码 
<chain name="chain1">
    FOR(5).DO(THEN(a, b));
</chain>

2、逻辑流程可视化

官方暂无。

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 22,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 22,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 21,
        "callee": {
          "type": "MemberExpression",
          "start": 0,
          "end": 9,
          "object": {
            "type": "CallExpression",
            "start": 0,
            "end": 6,
            "callee": {
              "type": "Identifier",
              "start": 0,
              "end": 3,
              "name": "FOR"
            },
            "arguments": [
              {
                "type": "Literal",
                "start": 4,
                "end": 5,
                "value": 5,
                "raw": "5"
              }
            ],
            "optional": false
          },
          "property": {
            "type": "Identifier",
            "start": 7,
            "end": 9,
            "name": "DO"
          },
          "computed": false,
          "optional": false
        },
        "arguments": [
          {
            "type": "CallExpression",
            "start": 10,
            "end": 20,
            "callee": {
              "type": "Identifier",
              "start": 10,
              "end": 14,
              "name": "THEN"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 15,
                "end": 16,
                "name": "a"
              },
              {
                "type": "Identifier",
                "start": 18,
                "end": 19,
                "name": "b"
              }
            ],
            "optional": false
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "f", "shape": "ForComponent" },
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "f", "target": "a", "shape":"edge" },
        { "source": "f", "target": "b", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "FOR",
    "condition": { "type": "ForComponent", "id": "f" },
    "children": [
        { "type": "CommonComponent", "id": "a" },
        { "type": "CommonComponent", "id": "b" },
    ]
}

6、编排示例Demo

2.6 循环编排：WHILE

1、文本（Liteflow EL）表达式

typescript 复制代码 
<chain name="chain1">
    WHILE(w).DO(THEN(a, b));
</chain>

2、逻辑流程可视化

官方暂无。

3、AST抽象语法树

typescript 复制代码 
{
  "type": "Program",
  "start": 0,
  "end": 24,
  "body": [
    {
      "type": "ExpressionStatement",
      "start": 0,
      "end": 24,
      "expression": {
        "type": "CallExpression",
        "start": 0,
        "end": 23,
        "callee": {
          "type": "MemberExpression",
          "start": 0,
          "end": 11,
          "object": {
            "type": "CallExpression",
            "start": 0,
            "end": 8,
            "callee": {
              "type": "Identifier",
              "start": 0,
              "end": 5,
              "name": "WHILE"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 6,
                "end": 7,
                "name": "w"
              }
            ],
            "optional": false
          },
          "property": {
            "type": "Identifier",
            "start": 9,
            "end": 11,
            "name": "DO"
          },
          "computed": false,
          "optional": false
        },
        "arguments": [
          {
            "type": "CallExpression",
            "start": 12,
            "end": 22,
            "callee": {
              "type": "Identifier",
              "start": 12,
              "end": 16,
              "name": "THEN"
            },
            "arguments": [
              {
                "type": "Identifier",
                "start": 17,
                "end": 18,
                "name": "a"
              },
              {
                "type": "Identifier",
                "start": 20,
                "end": 21,
                "name": "b"
              }
            ],
            "optional": false
          }
        ],
        "optional": false
      }
    }
  ],
  "sourceType": "module"
}

4、图数据格式

typescript 复制代码 
{
    "nodes": [
        { "id": "w", "shape": "WhileComponent" },
        { "id": "a", "shape": "CommonComponent" },
        { "id": "b", "shape": "CommonComponent" },
    ],
    "edges": [
        { "source": "w", "target": "a", "shape":"edge" },
        { "source": "w", "target": "b", "shape":"edge" },
    ]
}

5、参考目标格式

typescript 复制代码 
{
    "type": "WHILE",
    "condition": { "type": "WhileComponent", "id": "w" },
    "children": [
        { "type": "CommonComponent", "id": "a" },
        { "type": "CommonComponent", "id": "b" },
    ]
}

6、编排示例Demo

相关推荐
zqx_72 分钟前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己19 分钟前
javaScript基础（8个案例+代码+效果图）
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称42 分钟前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色1 小时前
【ECMAScript 从入门到进阶教程】第三部分：高级主题（高级函数与范式，元编程，正则表达式，性能优化）
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2341 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河1 小时前
CSS总结
前端·css
BigYe程普2 小时前
我开发了一个出海全栈SaaS工具，还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H2 小时前
前端的全栈混合之路Meteor篇：关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍2 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai2 小时前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑