前言

依据寰球当先的信息技术钻研和顾问公司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