【低代码平台】iVx和Enhancer无远的使用感受和分析

国内超棒的低代码平台整合：taowen/awesome-lowcode: 国内低代码平台从业者交流 (github.com) 

整体思路

一、iVX

iVX平台的思路可以概括为：使用无代码编程范式，保留了最基本的“顺序”“分支”“循环”的逻辑结构，将对象抽象化成为原子组件。业务逻辑蕴含在事件面板中，通过事件面板的配置进行表达。

整个平台分为三大板块前端、后端、可视化页面。前端主要实现数据获取和页面交互逻辑，后端实现数据组织和服务实现，可视化页面提供简单的展示，可以通过预览将系统编译后展示。

平台中抽象的概念为原子组件，所有的操作都在其基础上展开。配置的主要方面为对象结构组织，属性配置和事件定义也就对应着三大面板，对象树，属性面板和事件面板。

对象树是对整个系统结构的抽象，不同的原子组件可以组织成页面，页面可以组织成对象，在其中可以使用抽象出来的逻辑组件进行更高效的组织。对象树中所有层级的对象也都是组件概念，点击任一组件都会出现属性面板，在该面板上可以进行基础属性的定义，这些属性可以通过绑定变量的方式，实现动态响应。同样，组件上也可以增加事件，在事件面板中可以通过动作、条件、赋值、调用等操作完成复杂逻辑。事件面板上分为接收参数，传递参数和动作定义，动作作为根节点，其下按照顺序执行定义的条件判断或者赋值调用。

该平台的前后端整体联动，主要是通过事件和服务之间的调用展开的。前端可以定义事件组，进行参数的定义，动作的确认和服务的选择。后端可以定义服务，同样进行参数定义，服务的确认和数据返回变量更新。

1.1 界面功能

页面居中是整体大画布，左侧是小图标集合的组件库、逻辑库和变量库，点击组件图标，会在右侧树上目前聚焦的对象下新增组件。右侧的对象树会具有隐含的父子关系和上下关系。一般以容器对象作为父对象，父对象包括其孩子形成一个整体，显隐等性质对于整体产生影响。点击右侧组件会出现组件属性面板，可以进行基础静态属性的配置。图标 代表事件，点击后弹出事件面板。

区域1代表动作，确定该事件触发的动作，可以增加区域2（条件区域），在其中定义额外的条件。下方可以定义多个分支条件，类似于else if的作用，或者直接跟上回调处理。也可以两者结合进行复杂逻辑的实现。

使用平台基本的设计方式是，整个项目包含多个功能模块，将每个功能模块分为一个对象组，页面容器作为父对象，对象组的顶部首先定义整个列表数据获取的动作流，包含请求参数、数据回调和信息筛选。顶部还包括该模块所需变量定义，在后续的子对象中可以引用变量，进行条件判断，进行灵活的逻辑实现。

1.2 操作方法

1.2.1 案例一

期望功能：

某模块列表，初始展示该模块所有信息。设计搜索项，根据搜索项内容筛选数据。列表内某一项数据由多个属性组织显示。

操作方式：

在动作组中定义登录成功事件，成功后触发导航栏信息更新动作，如下图所示：

在导航栏信息更新动作中，获取到所有的模块数据更新对象数组中的数据，组织的方式是筛选出符合目前权限的数据，放入数组，再将编号为0的数据放在第一位，并且初始化当前序号变量为0，则登陆成功后默认进入首个模块。

头部导航设置不同的功能模块，通过判断当前序号的值，判断目前显示的页面。在“可见”属性中链接对象树中的变量，添加判断条件。

导航栏上绑定点击事件，可以更新当前序号的值，以此来控制展示的页面。同时该事件中增加判断条件，在该实例中条件为“当前序号”===4，当满足此条件时，触发动作组来更新列表中需要的数组变量。

导航点击会员列表时，将页面重复使用的判断变量重置，并且启动数据库服务，为其传递所需参数，获取返回值，进行数据组织返回到页面。在数据库服务返回的数据赋值后，向对象数组中增加一列数据，设置列名。在列表组件中，通过判断当前列名方式自定义显示的数据，操作过程如下图所示：

后台可以分为数据库和服务。数据库部分主要进行数据表结构的设计，值的维护，而服务则是接收前端传递的参数，查询所需的数据，进行数据处理再返回给前端。数据处理的部分同样使用了事件面板的格局和设计思想，不过将其根节点由动作改为服务。鉴权成功的情况下，根据传入参数进行条件判断和数据筛选，输出时可以计算输出行数和列数据。

查询条件通过组件的组织，每个组件绑定对应的变量，在查询按钮上绑定事件，该按钮上点击动作触发时，调用信息更新的动作组，通过赋值的方式提供当前各组件的值，在动作组内接收参数处对应定义好接收的参数，确保能够获取到值。当按钮触发时，将参数传递给信息更新动作，再触发数据库的服务，传递参数，数据库服务就能够根据参数进行数据筛选并返回。

预览效果：

点击头部导航的会员列表模块，下方显示出会员列表信息，同时有一列名为测试，下面的数据通过自定义，结合了会员来源和姓名数据，中间以/隔开。输入查询条件点击查询后可以按照条件筛选数据。

二、无远

2.1 设计思路

无远使用流程图的方式来描述系统组成和交互逻辑。页面的设计主要围绕2个元素，帧和窗口。

一个帧下可以包括多个窗口，可以设定某个窗口为主窗口，它会最先被加载，如果没有进行主窗口定义，则最先加载和帧直接连接的窗口。一个帧下的多个窗口可以进行复杂功能的实现，而页面可以承载多个帧。帧与帧之间依靠事件动作相连。因此如果从帧的角度看整个页面，体现了页面上的所有主动的交互动作，并且能够清晰的为页面上想体现的功能进行分区。在每个帧上使用几个窗口集中进行某一些功能实现。

窗口的主要作用是设计页面样式和组织组件。无远平台的组件概念定义的较大，没有将它拆解的很详细。比如列表、表单、树的整体可以作为一个组件，一个窗口中一般只承载一个这样的组件，所以每一个窗口实现的功能比较单一，很多小功能点隐含于该组件中。窗口中唯一可以添加的控件是按钮，所以整个窗口就是对于组件和按钮的组织。它可以提供变量，也可以触发事件和动作。

连接所有的帧和窗口的线称为连接线，如果在线上绑定了动作和事件，则该线成为了动作线。平台抽象出了5中动作类型，在动作线上可以进行设置，同时可以进行条件表达式的自定义。

2.2 界面功能

无远平台的操作界面比较的简洁明了，左侧树结构可以进行文件夹和页面的添加，页面可以展开为流程图画布，在其上进行页面和逻辑设计。画布上通过右击选择新增的元素，窗口上右键可以选择进行的操作，可以进入新页面设计窗口的样式和按钮设计，也可以定义事件或者变量，如下图所示：

 

进入窗口设计页面，直接拖动窗口确定它在页面的位置，也可以在头部或者底部添加按钮，会添加一个默认按钮，通过鼠标悬浮，点击设置图标，进入后可以选择图标、样式和设置按钮可用条件。设置的按钮，在流程图动作流的出发事件上进行体现。

在流程图页面，双击窗口，可以进行组件的选择和添加，进入组件设计面板。该面板分为三个部分，分别是sql语句编写，组件功能设置，数据信息展示，组件可配置的属性都是固化好的，面板如下图所示：

 

2.3 操作方法 

2.3.1 案例一

期望功能：

某模块列表，初始展示该模块所有信息。设计搜索项，根据搜索项内容筛选数据。列表上可以实现双击查看详情功能和新增。

操作方法：

首先创建页面，在画布上绘制流程图，初始创建一个新窗口，定义窗口名称，双击进入组件选择页面，搜索到需要的列表组件后，选中添加，加到窗口中，就可以进入组件配置面板。

在组件配置面板中，编写sql语句，从绑定的数据库中查询所需数据，通过“绑定查询”按钮，将数据绑定到组件上，并且能直观的查看所有的返回值。功能设置部分，可以进行分页、查询器等配置。

列表组件上的查询功能是集成好的，根据绑定的sql自动生成，因此只需要在组件配置中选择“多条件查询”，则自动会在列表上出现查询按钮，并且会实现所有的交互动作，实现条件查询的功能。组件蕴含的查询事件是不会向外暴露的，因此在流程图中不能在事件里选择查询动作或者事件，流程图只能选择组件暴露出来的事件，比如： 

 新增一个窗口，选择绑定的组件为表单，绘制流程图如下：

由列表窗口连接一条动作线1到表单窗口，动作类型选为弹出，触发事件选择列表暴露的双击行事件，按照此交互流程配置，双击列表行后会在页面上增加一个暗色蒙版，显示表单窗口。表单窗口底部创建一个名为关闭的按钮，则该窗口可以暴露出名为关闭的触发事件，因此可以连接一条由表单窗口到列表窗口的动作线，线上绑定动作为按回，触发为关闭。

2.3.2 案例二 

期望功能：

列表上点击新增表单，构建表单内容，某些表单项根据数据变化进行仅展示和隐藏的变化。点击弹出选择，弹出选择项动态绑定数据源，选择后的数据经过组织后返回。

操作方法：

在列表窗口顶部新增一个名为新增用户的按钮，则流程图上可以使用动作线绑定列表窗口和表单窗口，动作线上绑定触发事件是新增用户按钮。双击表单窗口进入表单详细配置，分为三个区域，如下图所示：

区域1可以查看设计表单的大致样式，区域2在初始时，可以自定行列数量，点击绘制表单改变上方表单布局，点击编辑数据源，可以输入sql语句，将获取到的数据作为表单上数据。也可以选择根据数据库表结构生成，确定加入表单的字段。在表单上点击控件后，区域3会对应展示出可配置的信息。

 

对于控件的“选项”来源，可以配置选项数据源，通过sql语句查询到想要的数据，控件可以根据获取到的值，展示可选的几项内容。获取数据成功后选择器中展现的数据如下图：

 表单内控件配置中开启辅助按钮，则表单可以向外暴露一个按钮触发事件，该按钮会放置在控件上，页面生成时，点击则会起到触发效果。想要实现点击按钮弹出选择数据，再返回到表单项中，首先需要开启辅助按钮，其次创建一个包含查询列表组件的窗口，使用动作线连接两个窗口，选择由辅助按钮暴露的事件触发，查询列表的数据通过sql语句绑定查询。

 列表窗口中，在底部创建确认按钮，向外暴露事件。表单上控件通过绑定变量的方式获得选择数据返回的值。列表组件能提供的变量如下：

在表单的控件中，绑定想要绑定的变量值，也可以使用变量用js来进行赋值，确定按钮的动作线绑定，要注意需要勾上“附带影响动作”，动作“按回”来实现选中确认后，数据返回绑定到表单上。 

 

 表单中某一项根据数据动态响应来确定可编辑还是不可编辑，通过编写条件表达式来进行控制。使用不带编号的变量，代表表单内的值，再加上条件判断，如果某一项想要隐藏，可以在设置完不可用条件后，选择不可用样式为隐藏，达到一个显隐的控制。

三、总结对比

3.1 整体设计

iVX的设计面板，本身相比于流程图类型的设计的优势在于，当存在复杂业务逻辑时，不会在视觉上同时收到“复杂”带来的混乱影响。但是iVX的设计思路逻辑化非常高，如果希望以清晰明了的方式进行系统设计，需要有较好的整体意识和较强的逻辑性，并且对于数据在系统中的流动要有比较清晰的概念。

iVX的对象树组织了所有对象，可以对整个系统的上下文一目了然，同时任一组件（对象）都可以调用整个树上的任一组件（对象），并可以使用选定对象的属性或者值，提高了很大的设计自由度。

无远平台不能像iVX那样自由地选定对象，定义事件。在该平台上实现事件的方式是受到窗口和组件限制的，基本上只能够使用组件暴露的外部事件进行交互操作，内部事件是蕴含在内部的，如果想要了解其实现方式和细节，需要去查看平台提供的介绍文档。

3.2 组件

iVX中对于组件进行了细粒度很高的抽象，组件几乎不包含业务逻辑，所有的业务在组件外，使用事件面板进行处理。在该平台上，基本能够使用的是平台自己封装的具有单一纯粹算法逻辑的组件，如果想要实现重装组件或者业务组件，需要自己封装一个小模块，控制内部逻辑和数据交互方式，确定向外暴露的数据和事件。因此对于iVX它的组件交互基本都在外部进行，不同组件会有不同向外暴露的事件，定义其外部交互时，可以从组件暴露的事件中确定触发的事件。

Enhancer提供的组件都含有其业务含义，可以实现某一类业务功能，比如它会提供日历、树、统计地图等组件，在iVX中想要使用这类组件，需要自己使用原子组件搭建页面和建立交互。无远中类似于iVX的原子组件对于窗口来说，是访问不到的，窗口只能盛放一种业务组件，该组件许多的交互是隐含的，只有一部分需要外部窗口或者整体页面参与的交互会暴露出来，原子组件都只能在封装好的业务组件中，以控件的方式加入到组件中。

两个平台内部交互的方式有异曲同工之处，基本都是通过规定好规则的配置和语句去实现内部交互。区别是划分的范围不同，ivx划分更细致范围更小，而无远则更多更贴合业务需要。

3.3 数据

对于系统整体的数据来源配置，无远是需要连接好数据，因为使用过程中，大部分的数据来源需要通过sql语句获取。iVX中可以使用数据库组件，模拟私有数据库，结合了表设计。这些数据配置，都作为外部的数据来源，而组件在交互操作的过程中会产生数据变化，也许会有中间数据，或者仅用于属性控制的变量。两个平台采用的策略不同。

无远中有一套变量命名规范，可以通过语句的方式创建变量，组件中也会提供一些预设好的变量来提供组件会产生的变量类型。iVX中则抽象出了一套变量组，比如布尔变量，对象变量等，可以自己定义其静态数据或者通过数据库获取，由于对象树对所有的数据有一个整合，因此其他组件可以对这个变量对象进行操作。组件内部交互通常涉及到样式变化、是否可操作、或者改变其他组件，这些变量在其中起到了很重要的作用。

3.4 布局层次

iVX通过一个不影响页面显示的容器对象整理对象树的结构，其中可以组织平台定义出的任何组件。会影响页面显示的只有可视组件，其下分为表格、文本、按钮等在平台工具中类似于控件的成分，在画布上，会建立页面容器，其上放置定位容器，在里面在进行更详细的页面展示的组合。

无远中一个流程图汇聚一个页面上的所有信息和交互，流程图上可以有多个帧，它主要起到组织作用。窗口进入布局设置，拖放的位置和属性配置决定了他的布局，由于组件只能由窗口承载，因此其层级是页面 > 窗口 > 组件，窗口上也可以通过动作和其他窗口进行联动。