作者:凌乙来源:淘系前端团队
背景介绍
近年来,关于低代码(LowCode)和无代码(NoCode)的讨论在前端社区内越来越火,简单的说低代码就是通过编写少量代码的方式完成应用的开发及上线,而无代码则更进一步,不需要编写代码通过配置的方式即可完成整个应用的开发。目前集团内部的低代码平台已经有很多,比如iceluna,宜搭,乐高,云凤蝶等等,而通用的无代码搭建平台还处在探索阶段。
低代码和无代码
首先不管是低代码还是无代码,都是针对特定场景或者细分领域的,比如运营的活动页,中后台的表单,表格页面等,因为只有在这些场景下,前端交互相对收敛,能够沉淀出足够多的组件物料,从而通过可视化的方式拖拽组件就能够直接搭建出页面。
目前我所在的团队正在研究面向营销域的中后台前端解决方案。通常来说,中后台解决方案的核心目标是提效,提效包括两个方面,一方面是对研发人员的提效,另一方面是对用户的提效,提效的核心抓手在于生产关系的变更,由前端开发向后端,视觉,产品各方面参与发展,从而降低前端研发的门槛,提高生产效率。提效解决的不是20%的个性化增量需求,而是解决让“非前端”参与进来,解决80%的通用需求。中后台的提效路径大部分走的都是ProCode-LowCode-NoCode方式。
表面上看,从ProCode-LowCode-NoCode看起来好像只有很小的差别,好像只有代码量多少的问题,但整个过程已经从量变发生了质变。ProCode和LowCode主要面向的还是一些需要有前端编程能力的人,而NoCode则代表“非前端”也能够参与的前端的页面搭建中来,这里面不是说完全不需要代码,因为今天哪些算“代码”其实比较难界定,比如用户编写一个配置文件,这个文件是json格式的,那到底能不能算“代码”?所以,NoCode的意思不是说没有代码,而是说在于用户学习门槛和学习成本的降低,普通用户不需要经过艰难的学习就可以做到以前程序要编码才能实现的事情。
iceluna低代码平台的痛点问题
iceluna作为集团内优秀的低代码搭建平台,主要解决中后台页面快速搭建的场景,经过几年的探索,基本能够实现页面UI的可视化搭建,但是针对业务逻辑还是需要手动编码来实现。这对非前端开发人员的上手门槛还是比较高的。下面这张图是最近针对iceluna的用户(前端,后端和测试)做的一个调研分析,可以看到逻辑代码和数据绑定的学习成本也是用户在问卷中提的最多的。
因此在这个财年,我们尝试去用可视化逻辑编排的方式解决逻辑相关的问题,解决低代码中最后一点需要编码的部分,实现无代码化的研发模式,从而进一步降低用户的学习和使用门槛。
可视化逻辑编排
首先我们来通过一个逻辑编排的示例来看一下如果一段代码通过编排的方式呈现出来之后会带来怎么样的体感:
如上图所示,原本晦涩难懂的代码逻辑通过流程图的形式表达出来以后,产品的逻辑变得非常直观。可读性和可维护性也变得非常高。再也不用担心在接手其他人的项目时,注释不规范,文档不全的问题,逻辑编排生成的逻辑图谱就是天然的产品文档。
逻辑节点抽象
可以看出,要形成这样的逻辑图谱,本质上就是需要对不同逻辑节点进行组合和串联,真正的逻辑由封装在节点中的函数完成。那么这里就产生了两个问题,首先是如何抽象逻辑节点,抽象出的逻辑节点能不能被复用直接决定了用户编排的成本,如果需要不断的定制个性化逻辑节点可能就失去了编排的意义;其次是逻辑节点的的颗粒度大小也非常关键,如果封装的逻辑颗粒度太大,大到一个功能服务,那么可能就变成了业务流程编排;如果颗粒度太小,小到一个表达式级别,那么对于有编程基础的同学来说,可能直接写代码效率反而更高。
通过对中后台营销域的部分业务代码进行梳理,发现中后台的页面大都是以表单、列表,详情为主,而其中90%的业务逻辑基本上都围绕在表单(校验,取值,赋值,提交),对话框(显隐、提示),发送请求,消息提示,数据处理,路由跳转,条件判断等,相对比较收敛。同时iceluna作为集团内优秀的低代码搭建平台,在上层封装了很多非常好用的api,屏蔽了大部分前端语法层面的差异,比如状态赋值,页面刷新,接口调用,一些常用的工具函数(时间处理)等,为逻辑节点的抽象提供了极大的便利性。
通过分析归类,最后沉淀了10个左右的逻辑节点,如下图所示,同时每一个逻辑节点最终本质上都是对应一段执行函数,并接收一个参数作为入参,返回一个参数作为出参。
编排协议
由于是可视化编排,自然也避免不了编排的协议,为了避免重复建设最大程度的复用集团内已有的编排方案,最终计划采用LF通用可视化逻辑编排的协议来实现iceluna中的逻辑编排。
技术架构图
技术难点
自动化布局
从一开始调研我们就发现大部分的编排产品,都是让用户自己进行拖拽,连线等操作去完成,但是通过前面对逻辑代码的分析,如果我们将异步回调操作使用async/await的方式转换成同步的写法,那么逻辑代码大部分都可以看作是一种串行式的执行过程,偶尔叠加一些if/else的分支判断,这样也非常符合人们常用的思维模式,理解起来非常直观。所以从编排的角度说,就是将不同的逻辑节点和分支判断节点串联起来,布局上不需要太多的灵活性,同时连线操作也显得比较多余,因此我们将拖拽连线全部改成添加节点的方式,然后自动连线即可。
采用这种自动布局的方式会大大简化用户的操作,用户只需