面向中后台复杂场景的低代码实践思路

1. 第十六届 D 2 前端技术论坛面向中后台复杂场景的低代码实践思路偏左

2. 方案背景动态标注生成交互界面策略编排生成逻辑代码 Next

3. 方案背景复杂视图 / 复杂逻辑问题

4. 理不清的业务规则，逻辑逐渐杂乱业务规则多趋向黑盒化看不懂改不动，幻想if/else搞定一切 • 业务规则由多个责任人掌握 • 业务场景多变化快，迭代频繁 • 业务固有复杂度以及历史包袱

5. 流程节点说明 6 流程提示指引等易用性交互将开发复杂化说明文档 ID 名称状态易用性相关遮罩高亮失败 ? 交互细节多请参考*** 成功请联系@XXX 成功确定好用不好用复制/粘贴加速腐化，容易干扰业务功能 • 内容运营需要解释的内容多 • 易用性交互形式多，并不限于图文 • 易用性需求排期低于功能需求，平台越来越难用

6. 你中招了吗？

7. 复杂视图复杂逻辑动态标注策略编排

8. 动态标注生成交互界面面向复杂交互视图的方案

9. 中后台页面示例典型中后台交互流程节点说明 6 流程说明文档 ID 名称状态遮罩高亮请参考*** 失败 ? 成功请联系@XXX 成功确定好用不好用

10. 页面按功能划分业务功能交互辅助内容交互流程节点说明 6 流程说明文档 ID 名称状态遮罩高亮请参考*** 失败 ? 成功请联系@XXX 成功确定好用不好用

11. 方案核心目标所有类型交互业务功能交互辅助内容交互 ProCode开发专注ProCode开发低/无代码配置面向：前端面向：前端面向：运营 / UED / PD

12. 方案实施效果需要加提示说明点击出现弹窗说明点击出现文档流程说明中需要加气泡提示加下划线及问号提示 Step引导首次进入页面时，新手引导，提供视频、PPT播放需要加复杂的流程图移入出现文档展示相关解释识别出关键词或术语几乎所有的辅助类交互近400个，都通过配置完成

13. 动态标注方案实践

14. 分解交互界面，找到辅助类交互 Step 1 将辅助类交互分解成各个组件，分别配置展示样式、内容等等容器类部分体验优化辅助内容类交互提示说明指引交互界面术语解释 … 交互组件通用(div) / 弹窗 / 消息条 / 气泡 / 通知内容类按钮 / 文本 / 图标 / 图片 / SVG / Markdown 场景类步骤向导 / 关键词 / 视频播放 / PPT播放 … 外部能力反馈调研 / 工单 / 知识库 / 机器人问答 … StepByStep引导配置化提示消息嵌入式文档嵌入式PPT / PDF 交互组件 … 业务功能交互引导面板嵌入式视频演示配置化弹窗/弹层配置化向导

15. Step 2 将交互组件按规则动态渲染到界面 ① 元素点击 / 移入 / 移出 click, mouseenter, mouseleave 用户行为捕捉 ② 节点生成 / 销毁 mutationObserver 交互界面 ③ 页面URL / 停留时间改变 popstate, hashchange 辅助内容类交互是找到插入位置交互组件业务功能交互交互组件 DOM查询 CSS Selector / XPath ? 否创建交互组件实例渲染至指定位置是更新交互组件实例 ReactDOM.render(交互组件, target)

16. Q: CSS选择器/XPath太专业，用户不会配怎么办？用户不会配置CSS选择器或XPath，而且配置好的规则可能会因为改版而无效解法 1. 配合技术特征，利用视觉特征相似度做模糊匹配； 2. 用户只需要选择出视觉特征和偏差范围。匹配大小匹配位置匹配边框/颜色匹配颜色生成匹配结构匹配文本扩展XQuery支持视觉模糊匹配示例

17. Step 3 配置交互组件，通过URL触发动作 ia:/ia/frame?url=yuque.antfin.com/... 内嵌外部页面交互界面 ia:/ia/robot/chat?send=套餐怎么配向机器人提问辅助内容类交互 ia:/helpdesk/ticket ia:/ia/kb/view?id=491 提交工单打开知识库文档交互组件业务功能交互 ia:notice?content=! **注意啦!** 显示消息交互组件 ia:copy?content=需要复制的文本内容复制内容 ia:event?type=click&id=btn1 转发点击事件，代替用户点击#btn1元素 ia:notice?type=dialog&content=![](http://g.alicdn.com/test.jpg) 打开弹窗，内容为markdown(一幅图片)

18. Q: 如何用URL完成比较复杂的交互动作？ Step 1. 提示用户即将开始服务 ia:notice?content=欢迎使用新手引导您有什么想问我的吗欢迎使用新手引导常见问题 Step 2. 2秒后，向机器人提问“常见问题” ia:robot/send?content=常见问题 … 新人指南 … Step 3. 若首次使用，则紧接着提问“新人指南” ia:robot/send?content=新人指南

19. Q: 如何用URL完成比较复杂的交互动作？解法不可控？串不起来？ 1. 使URL可控，按设定执行 @delay=2s 延迟2秒后url生效 @if=condition condition成立时url生效 2. 串联URL，让排队执行 ia:url1;:url2;:url3… <a href=“ia:notice?content=欢迎使用新手引导;:robot/send?content=常见问题&@delay=2s;:robot/send?content=新人指南&@if=!counter.scene”>我是新手</a>

20. 策略编排生成逻辑代码面向复杂交互逻辑的方案

21. 方案核心目标所有交互逻辑 ProCode开发前端所有交互逻辑低/无代码配置开发：前端 / 后端使用：产品技术角色

22. 方案实施效果一例典型高复杂度表单 3种场景，33个状态，82条逻辑规则开发进行到5工作日时风险，转用策略编排，用时~2工作日编译产出代码：~3000行

23. 面向复杂交互逻辑的方案简介高研发成本高验证成本逻辑复杂状态多 / 难预测确定状态来源，明确状态为何改变，可快速验证联动 / 条件多高效的方法论指导，可管理每个状态的联动及条件逻辑黑盒易返工技术更迭 / 代码腐化由规则直接产生可读性好、具备延续性、技术栈解耦的专业代码

24. 复杂交互逻辑问题转变为解决复杂条件复杂联动下的状态管理问题

25. 决策编排复杂条件代码示例流程编排方式经典if…else嵌套结构类BPM方式，偏重复杂流程表达 if (构成三角形) { if (a=b) { if (b=c) { if (a=c) return else return } else { if (a=c) return else return } } else { if (b=c) { if (a=c) return else return } else { if (a=c) return else return } } } else return 等边三角形非法非法等腰三角形非法等腰三角形等腰三角形不规则三角形非三角形

26. 决策编排复杂条件示例代码决策表决策编排方式卫述句式化简条件结构 DMN方式，偏重复杂逻辑表达决策表转为决策树 if (构成三角形) { if (a=b && b=c if (a=b &&!b=c if (!a=b && b=c if (!a=b &&!b=c if (!a=b &&!b=c } if (!构成三角形) && a=c) &&!a=c) &&!a=c) && a=c) &&!a=c) return return return return return 等边三角形等腰三角形等腰三角形等腰三角形不规则三角形 return 非三角形 return 非法构成三角形 a=b b=c a=c 目标状态〇〇〇〇等边三角形〇〇 ⨉ ⨉ 等腰三角形〇 ⨉ 〇 ⨉ 等腰三角形〇 ⨉ ⨉ 〇等腰三角形〇 ⨉ ⨉ ⨉ 不规则三角形 ⨉ - - - 非三角形 - - - - 非法

27. 决策编排复杂联动示例代码决策表决策编排方式经典联动逻辑利用两张决策表表达逻辑为状态增加触发事件 // 当A的值改变时计算C onChange(() => { if (A && !B) { C = 0 } else { C = 1 } }, [A]) // 当B的值改变时计算C onChange(() => { if (B && !A) { C = 2 } else { C = 3 } }, [B]) A B C 〇 ⨉ 0 ⨉ - 1 - 〇 1 A B C ⨉ 〇 2 - ⨉ 3 〇 - 3

28. 决策编排状态分治管理贷款类型公积金商业贷款还款方式等额本息等额本金贷款利率 3.5% 贷款期数 ________ 累计利息待计算自由还款计算

29. 策略编排方案实践

30. Step 1 定义要策略编排的对象元数据定义了即将策略编排的对象导入后端接口定义自行定义元数据

31. Step 2 进行策略编排将逻辑关系、联动关系，以策略编排的形式完成

32. 调试逻辑及联动 Step 3 测试驱动开发，保证规则在发布前经过充分验证元数据将元数据生成模拟表单，供在线验证策略规则将策略生成测试用例，标记验证结果

33. Step 4 将策略编译为专业的源码输出代码要规范严谨，注释详尽易懂可将源码实时编译，前端直接引入可将源码提交到git仓库，保证延续性可将源码构建发布到cdn / npm 可发布为api作为web服务

34. Next 一体化赋能

35. thanks