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

相关推荐
ZJ_.4 分钟前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营8 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood34 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端36 分钟前
0基础学前端-----CSS DAY9
前端·css
joan_8540 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列（11）-- Web 无障碍开发指南
前端·html·html5
m0_748235612 小时前
从零开始学前端之HTML（三）
前端·html
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play