京东开源项目之列表解决方案Drip-Table

前言

根据全球领先的信息技术研究和顾问公司Gartner的最新预测，2021年全球IT支出将达到4万亿美元。那么中国作为亚太地区的经济大国与IT强国，中国的应用开发市场将会引来一个爆发期，未来几年内的增速都会超过全球平均水平。而研发资源有限，各公司都更着重考虑节省人力成本和提高人力效率，而大部分应用都离不开列表布局列表需求与日俱增，类型复杂多样，而研发资源有限，现有开发模式已难以满足日益增长的需求。因此京东零售iPaaS前端研发团队推出一种通过LowCode方式搭建web列表的技术方案Drip-Table，实现可视化搭建列表，节约开发人力。

随着近几月的不断优化迭代，框架已趋于稳定，目前已对外开源。

• 源码地址：https://github.com/JDFED/drip-table
• 官网地址：http://drip-table.jd.com

使用场景

1、无编程基础的用户想搭建自定义列表应用。

2、开发者高效创建列表，定制化需求可通过少量代码实现。

如何使用

先通过动态图片先给大家来露个脸～。

也可直接打开Drip-Table案例进行列表搭建。

架构方案介绍

列表整体流程如下：首先使用Drip-Table-Generator可视化搭建工具搭建列表，配置组件属性，如果不能满足业务场景，配置自定义组件，然后在线编写带嵌入模板数据的渲染逻辑，最后生成JSON Schema协议数据。通过Drip-Table渲染器动态渲染列表，最终实现业务方不经过开发，可直接完成列表相关业务需求。

Drip-Table-Generator

Drip-Table-Generator是一种可视化搭建列表解决方案。

Drip-Table-Generator的基础能力

那么一个好的可视化搭建列表方案需要具备哪些基础能力呢。主要包含以下5点：

1.HTML Tree 编辑 （样式编辑）

编辑页面可见元素, 能自由修改页面结构样式

2.Component Tree 编辑 （组件编辑）

组件列表中选择组件, 通过拖拉的方式嵌入到页面中

3.Custom Development （定制开发）

研发可介入开发自定义组件,满足定制化的场景

4.Data 编辑 （数据编辑）

可视化的编辑页面的 数据部分, 如文本、URL

5、Dynamic Logic 编辑 （逻辑编辑）

可自由添加业务判断逻辑的能力,如校验规则

列表组件以及配置

基础组件

基础组件为列表常用通用组件，包含文本、图文、标签等组件。

业务组件

业务组件通常只服务于特定业务，研发可以根据Drip-table-generator暴露的API方法，添加定制化业务组件。

自定义组件

自定义组件解决了无法操作数据字段以及无法校验语法和逻辑的问题。搭建工具或者通过在线代码编辑器允许用户编写LowCode代码生成业务组件，然后进行语法检查，还能利用预览功能进行业务逻辑校验；另外，代码编辑器支持通过嵌套模板来进行数据操作。

Json Schema协议定义

采用国际规范(Understanding JSON Schema)，定义了全局以及列表项的Json数据格式。通过配置项，我们可以决定开启或关闭某些功能，或者设置表格样式等。

Drip-Table

Drip-Table是一种基于Json Schema的渲染动态列表解决方案。
架构主要分为四块JSON Schema定义，分别为Columns schema、Configs Schema、Refs、EventCallback。还支持Antd-design和Drip-design主题包。

• Columns schema定义列表组件的数据规范。
• Configs Schema定义列表全局配置。
• Refs暴露列表实例参数。
• Event callback定义列表框架事件回调。

成功案例

投放平台中低代码项目使用Drip-Table搭建素材列表，目前已搭建72种素材列表，高效支持双十一等集团大促需求，线上使用稳定，节约研发人力75%。

后续发展

Drip-table将专注于列表垂直领域，集成业界通用能力，赋能给各项业务，节约研发资源。
欢迎大家使用Drip-table和参与共建，也希望在github上点个Star支持我们一下～。

参考材料

• Drip-Table源码地址:https://github.com/JDFED/drip-table
• Drip-Table官网链接:http://drip-table.jd.com
• Drip-Form官网链接:https://dripform.jd.com
• Leo源码地址:https://github.com/JDFED/leo
• Drip-Desgin官网链接:http://drip-design.jd.com
• Micro-App官网链接:https://github.com/micro-zoe/micro-app