京东低代码平台：浅谈水滴拖拽画布的设计与实现

水滴低代码平台简介

京东水滴平台面向企业内部后台管理系统场景，提供可视化搭建等低代码配置、构建及部署能力。

水滴画布作为水滴低代码的核心能力之一，具备灵活、易用的特点，用户可以通过简单拖拉拽的方式，在不需要具备前端知识的前提下，即可搭建出理想的页面。下面将为大家介绍水滴低代码画布的设计与实现。

低代码画布的概念及类型

画布的概念： 用户可以向画布中添加物料，并对物料进行拖/拉/拽布局，搭建出自己想要的页面。这个概念延伸于艺术家的画板，画家在绘画的过程中，会将颜料进行调色，并在画布中进行绘制。而低代码平台用户在页面搭建的过程中，需要选择相应的物料，在画布中使用拖拉拽的方式放置到正确的位置，并对物料进行一些属性配置来达到最理想的展示效果。用户的搭建过程与艺术家的绘制方式非常的相似，因此这个概念也来源于此。

1.页面类型：用于网页的搭建，包含 web 页面及 H5 页面
2.流程类型：用于流程图的搭建，包含审批流程及函数流程
3.数据大屏类型：用于数据报表与可视化分析工具的搭建

水滴低代码画布目前主要用于页面的搭建，也是本次需要介绍和讲解的画布的类型 - 页面类型。

主流低代码画布的调研情况

在开发水滴画布之前，就京东内其他低代码平台和国外的主流低代码平台 Retool 做了调研。下面将对这些低代码平台的画布能力做一个分析，并和水滴画布进行对比。

画布特点	京东内其他平台	Retool	水滴
面向用户	前端开发	普通用户	普通用户
是否可拖动	✅	✅	✅
宽高拖拽	宽度	宽度	宽度 + 高度
布局	block	grid	absolute + grid
配置复杂度	复杂	简单	简单
UI还原度	中	中	高
上手成本	高	低	低

通过调研的情况和一些能力的对比，我们可以发现：京东内其他平台使用了 Block 块布局、Retool 使用了 Grid 网格布局，这些布局特性在带来页面自适应能力的同时，也会丢失物料自定义宽高的适配能力，使得一旦需要固定宽高和自适应内容高度的时候，就会让展示的效果不够理想。京东内其他平台和 Retool 都对此做了一些弥补和取舍，