面向中后台复杂场景的低代码实践思路
?简介:现实中,业务场景多,迭代频繁,变化快到跟不上,规则可能由多人掌握,无法通过一个人了解全貌; 还有业务所在行业固有的复杂度和历史包袱,这些问题都会让我们感到痛苦。 除了逻辑问题,我们还关注易用性交互开发的问题。
作者 | 偏左
来源 | 阿里技术公众号
一 中后台前端研发复杂度背景
做中后台前端开发,会经常碰到复杂交互和复杂逻辑问题:
现实中,业务场景多,迭代频繁,变化快到跟不上,规则可能由多人掌握,无法通过一个人了解全貌;
还有业务所在行业固有的复杂度和历史包袱,这些问题都会让我们感到痛苦。
除了逻辑问题,我们还关注易用性交互开发的问题。
易用性交互的形式很多,不但会放大整体功能开发难度,而且很容易干扰到业务功能,让本来已经很复杂的开发工作更加复杂,加速了整体腐化。
本身排期就已经低于功能需求了,再加上这些问题,导致大家都不爱去做,长此下去,平台越来越难用。
那么问题逐渐显现,如何面对中后台复杂场景中最深刻的两个问题:即复杂交互、复杂逻辑。
二 复杂交互解法
1 思路
首先是使用动态标注生成交互界面,来解决复杂交互问题:
那么我们方案的核心目标就是:将业务功能交互,还是由前端通过procode开发完成,而这些辅助内容交互,就可以由低代码配置去完成了。
想法比较直接,那么真实的效果如何呢?
2 实践
接下来是实战部分:
关键流程可以描述为,首先捕捉用户的行为,如元素点击、移入移出,或是节点生成、销毁、或是URL改变了等等。
当匹配这些行为时,找到组件插入或更新的位置,然后渲染出来,这个时候组件会按预设的规则动态的标注到页面指定位置上。
比如,当用户进入某个页面时(行为是URL改变),我们给指定区域(可能是一个选择器指定的),插入一张流程图。
向机器人提问、提交工单、显示消息、打开弹窗、复制内容等等
通过给组件配置url来完成不同的动作
这样就完成整个易用性交互的标注和动作过程。
3 相关问题
那么问题来了,现在都是一些动态渲染技术,状态变了那么页面结构可能也变了呀,那组件也丢失了。没有关系,当DOM变化的时候,我们仍然是在监听的,只要检测到DOM树变化或关键属性变化,我们就重新执行一次渲染。
第二个问题是,这些规则都太专业了,CSS选择器、XPath,这些对于非技术同学来说使用成本非常高,而且可能因为一个很小的页面改动就会导致配置失效。
这类问题我们的实践方案是,可以通过视觉特征的相似度去做模糊匹配,使用者只要去勾选出相应的特征和偏差范围,就可以自动生成脚本去做匹配,这里我们是通过扩展了XQuery形成了自己的模糊查询方式。
标注的问题解决了,但是复杂的交互动作怎么做呢?这里有个例子说明一下:
试想一个场景,一个系统,对于新用户、老用户,需要有不同的引导方式
在每个环节中,我们都是通过url来产生动作,但是怎么串起来呢?
在我们的定义中,url可以被串联顺序执行,也可以加上@if,条件执行,还可以加上@delay延时执行,这样就可以将所有一系列的url组织成一个url,并在两种场景去分别触发。
三 复杂逻辑解法
接下来要面对更难的一个问题,复杂逻辑,通过策略编排生成逻辑代码。
方案的核心目标,是将所有的交互逻辑从ProCode开发,转为低/无代码配置,但这个核心目标的前提并不是要用低代码来替代procode,而是因为procode写复杂逻辑很难,所以要使用简单的低代码实现。
在我们实际业务的实践中有一例典型的高复杂度表单,一个表单三种场景,每种场景的各个字段都有联系,一共有33个状态,82条逻辑规则。当时是以procode开发,到第5个工作日时就因为各种错漏返工无法继续了,而转用策略编排,我们用了近2个工作日就解决了这些逻辑写作问题。
这听起来有些不可思议,但是这种方案其实是可以高效的替代常规编码的。
1 思路
先认识下我们要面对的问题。
而问题的本质和解法有三点:
- 状态多难以预测和验证:我们的解法是,要确定状态的来源,明确状态为什么改变了,还要能快速验证这个状态的来龙去脉。
- 联动多 / 条件多:我们需要一个高效的方法论指导,可以管理每个状态的联动及条件
- 技术更迭,代码腐化问题:如果代码是由规则生产出来的,那就没有问题了
综上,复杂交互逻辑的问题,已经被转变为了复杂条件、复杂联动下的状态管理问题
2 决策编排
先看一下决策编排是怎么解决复杂条件的:
这可以几乎等价的使用流程编排方式来完成,可以看到使用这种方式,其实是没有得到化简的目的的,因为编排这个流程本质上跟编码没有区别。
通过这种决策表编排的方式,我们是可以完成复杂条件编排的,但是逻辑不仅仅是条件还有联动,联动是有触发条件的,但决策表仅能描述条件关系,那么接下来来看联动部分是怎么编排解决的。
这里给出的是一个经典的联动逻辑,可以转换为2张等价的决策表,这里,我们进一步将决策表转换为等价的决策树表示,并为决策树标识出了接受联动事件的节点,这样我们就通过决策树同时完成了联动及条件逻辑的编排。
再以一例来说明,这是一个贷款利率计算器:
以上就是通过决策树的编排来解决复杂逻辑问题的方案思路。
3 实践
那么具体的实践是怎样的呢?
首先,需要定义出策略编排的对象:
第二步,按照决策树编排方案,将所有对象状态的逻辑关系、联动关系分治、编排出来,这样所有逻辑都成为决策树了;
最后一步,有了元数据可以生成类型定义,有了决策树,可以生成逻辑代码。
四 总结
再回头去看两个方案,一个是面向复杂交互,另一个是面向复杂逻辑,其实这两个问题每个都能单独拿出来深入去聊,联系并不那么紧密,而在实践上也确是被分为两个平台去单独求解,割裂感比较重,无法为同一个业务提供统一的解决方案。所以接下来,我们打算是寻求一种方式能够将两种方案结合起来,作为一个整体去服务同一个业务。
原文链接
本文为阿里云原创内容,未经允许不得转载。
?