水珠低代码平台介绍京东商城水滴平台

水珠低代码平台介绍

京东商城水滴平台面对公司内部后台管理界面情景，给予数据可视化构建等低代码配备、搭建及布署水平。

水珠画板做为水珠低代码的核心竞争力之一，具有灵便、实用的特征，用户可以通过简易拖拉拽的形式，在没有必须具备前端知识前提下，就可以构建出理想化页面。下边将给大家介绍水珠低代码画板的设计与实现。

低代码画板这个概念及种类

画板这个概念： 用户可向画板中加入原材料，并且对物料进行拖/拉/拽合理布局，构建出自己喜欢的网页页面。
这一概念拓宽于艺术家绘图工具，美术家在美术绘画的过程当中，会把色浆开展上色，并且在画板内进行制作。而低代码平台客户在网页页面构建的过程当中，必须选择相应的原材料，在画板中应用拖拉拽的形式放置到恰当位置，并且对物料进行一些特性配备来实现理想的视觉效果。客户的构建过程与艺术家制作方法十分的类似，因而这一概念也源于此。 画板的种类： 低代码画板也可以根据需求场景的差异可以分为各种类型，目前主要的种类有以下几点：

1. 网页页面种类：用以网页的构建，包括 web 网页页面及 H5 网页页面
2. 步骤种类：用以流程表的构建，包括申请流程及函数公式步骤
3. 数据大屏种类：用以数据分析表与大数据可视化工具的使用构建

水珠低代码画板现阶段主要运用于界面的构建，都是此次必须讲解和讲的画板的种类 - 网页页面种类。

流行低代码画板的走访情况

在研发水珠画板以前，就京东商城内别的低代码平台与国外的主力低代码平台 Retool 进行了调查。下边将会对这种低代码平台的画板水平做一个剖析，并与水珠画板进行比较。

通过调研的具体情况一些水平对比，我们可以发现：京东商城内其他网站用了 Block 块合理布局、Retool 用了 Grid 网格布局，这种合理布局特点在产生网页页面自适应能力的前提下，还会遗失原材料自定宽强的兼容水平，促使一旦必须固定不动宽高与响应式具体内容极高的情况下，就会使展现的实际效果不足理想化。
京东商城内其他网站和 Retool 都对于此事做了一些填补和选择，比如京东商城内别的平台将前端的合理布局配备展现了出去，让消费者自己去调节，在增强了合理布局情景的前提下，也提升了非前面用户的使用门坎。而 Retool 即在精确构建层面进行了一部分的让步，为了保证便捷性，做了一些强制性管束。

水珠画板的研发目标

水珠画板面对的群体有经营、商品、检测、开发者等，这种人群里有的是有前端的基本，而大多数并不具备前端的专业知识，因此在规划画板的过程当中，要尽量地减少客户的培训成本与上手成本费。因此，大家选用了以下这些功能特点，并给出了开发设计目标：

• 合理布局： absolute相对定位合理布局 grid网格布局
• 拖动：
  1. 适用原材料宽度和极高的拖动、放大；
  2. 适用物料在画板中灵便精准定位
• 总体目标：
  1. 简单实用 - 拖动构建不受限制，随意灵便；
  2. 实际操作顺畅 - 确保客户经常操作中页面特性；
  3. 覆盖范围广 - 适用展现、具体内容、操作台、体系等 B 端普遍情景。

水珠画板设计方案

水珠画板 drip-layout 得出了一种新的低代码画板设计方案，将构建层及3D渲染层分离出来，同时通过优化算法转换层来兼容构建页在各个显示屏中的视觉效果。

• 在构建层得到物料在页面上的位置信息 - layouts 和 物料人性化合理布局配备 - config。
• 根据优化算法转换层来兼容网页页面在各个显示屏中的部位/宽高比信息内容 - layouts。
• 3D渲染层依据优化算法变换后layouts信息内容，对网页页面内的所有物料进行3D渲染、展现。3D渲染层画板会用浏览器视口尺寸变化时，开展逆流到优化算法转换层，再次合理布局测算、动态性兼容页面大小。

下面的图展现了水珠画板的方案策划：

在构建层的物料拖动和放大的互动上，用了 react-grid-layout 最底层库，并把 grid 网格图的 row col 尺寸都设置了 1，促使以相对定位的形式拖拉拽后的物料位置信息 layouts，企业都精准到 1px。最终在3D渲染层，依据真正界面的宽高比，对3D渲染部位进行 grid 拓扑优化，并依据测算层变换后定位信息 layouts，将原材料应用 grid 的形式进行合理布局3D渲染。

水珠画板的实现架构设计

下面的图展现水珠画板的一些最底层库的选择，和所提供的一些水平，及其在预估层所使用的一些关键的算法：

水珠画板测算层完成优化算法

器皿响应式原材料相对高度 - moduleResizeObserver

在大部分场景中，物料在页面上必须可以根据自身真正相对高度进行宣传，比如报表的一页数据信息全展现、表格具体内容动态化删剪造成控制模块相对高度转变。这种动态变化相对高度，都要即时地表现在画板中，那就需要动态性监视物料框强的转变，并把真正宽高比展现在画板中。
这儿用了浏览器 ResizeObserver api，对物料宽高比即时监视，以下是达到的逻辑代码：

网页页面扩大状况响应式 - 固定不动总宽模块收拢对邻近模块危害

在一些显示屏下，界面的总宽尺寸是比画板里的总宽要大一些，画板就值得被拉申拓展。在这样的情况下，画板里的弹力控制模块就能直接被等比拉申，固定不动控制模块因为总宽需要保持固定不动，便会多出室内空间（下面的图蓝紫色地区），那样邻近的控制模块就会受到影响。受到的影响主要有以下几种状况：

• 邻近为弹力控制模块，能够被立即拉申，来补充室内空间
• 邻近为固定不动控制模块，且对齐方式同样，往往会被危害，所以需要移动同样的间距
• 邻近为固定不动控制模块，且对齐方式各不相同，则不会被危害
  【ps】: “对齐方式”就是用来明确在网页页面产生弯曲的情形下，控制模块在画板的水准轴上的对齐方式

因为控制模块间的危害具备感染性，根据深度优先遍历的形式，解决了全部固定不动控制模块，以及邻近的控制模块，来消除固定不动模块收拢造成的影响。

网页页面缩小状况响应式 - 固定不动模块拉申对邻近模块危害

在一些显示屏下，界面的尺寸是比画板里的总宽要低，画板那就需要被压缩。画板里的弹力控制模块能够被立即等比缩小，固定不动控制模块因为总宽需要保持固定不动，也会发生一定比例的澎涨（下面的图蓝紫色地区），那样邻近的控制模块也会受到挤压成型。邻近控制模块受到的影响主要有以下几种状况：

• 邻近为弹力控制模块，往往会被直接缩小
• 邻近为固定不动控制模块，因为总宽固定不动，遭受挤压成型以后，要进行等之间的距离移动
• 因此现阶段行总体总宽不足，那样右边的控制模块要进行自动换行解决
  【ps】: “对齐方式”就是用来明确在网页页面产生弯曲的情形下，控制模块在画板的水准轴上的对齐方式

因为控制模块间的危害具备感染性，根据深度优先遍历的形式，解决了全部固定不动控制模块，以及邻近的控制模块，来消除固定不动模块拉申造成的影响。

界限解决

因为 JavaScript 在开展数值计算方法时，存有精密度遗失的状况，可能会致使2个密切邻近模块数值，在定位上发生交叉式的现象。这类精准定位交叉式的现象，又会在画板的边界路径规划解决下，发生画板合理布局紊乱问题。可是如果采用保存 n 位低的形式进行精密度测算，又造成邻近控制模块中间因为求整造成小数位遗失，进而控制模块间会有间隙的视觉效果。
精密度遗失测算情景：A.x A.w === B.x => 1.3 1.6 === 2.9 => 结论：false
因而水珠画板做了一些假定：如果两个控制模块界限之间的差别低于 1px，则是对2个模块界限之间黏合，来消除 JavaScript 精密度遗失造成的影响。

水珠画板这几种通用性合理布局展现

现阶段水珠画板总结了基本网页页面构建场景下，主要使用这几种基本合理布局种类。在已鼓励的组成部件的嵌入水平下，用户可对物料进行简单的排序、组成和布局配备，就能构建出丰富多彩、精细化网页页面情景。如图是上述基础合理布局场景下的渲染效果：

• 上下合理布局情景（左边固定不动，右边响应式）

• 右左合理布局情景（右边固定不动，左边响应式）

• 前后左右合理布局情景（左右两边响应式，正中间垂直居中固定不动）

• 相对高度响应式情景（报表相对高度追随具体内容大小响应式，将表格数据一页全展现）

• 一屏展现情景（相对高度适用百分数设定，让原材料撑满网页页面可视性地区）

• 组成嵌入，精细化管理构建（适用组合定义，组合合理布局水平传承外界画板，产生嵌套结构）

  

水珠画板的构建/渲染效果展现

构建界面的实际操作情景

由图中可以看到，客户通过简单的拖拉拽，就可以快速地构建出自己喜欢的网页页面实际效果。

繁杂界面的渲染效果

现阶段水珠低代码平台已经完成网页页面自举电路能力，服务平台历史时间开发设计页面，已经使用构建化的方式展开了取代，下面的图展示的是平台首页构建的实际效果。

整体规划

1. 协助构建

在构建情景应用相对定位规划的方法，给用户的实际操作带来很多开放式，但接踵而来的问题在于构建精准度的保障。大多数情况下，用户需要手动式调节模块间距，及其控制模块间的两端对齐。那样必定会产生客户实际操作频次的提高，与此同时也会导致精确度的遗失。

因而，参照大家日常应用 PPT 的行为模式，水珠画板能给客户在构建环节中提供一些协助构建专用工具，并帮助大家自动执行一些细节方面实际操作。

2. 合理布局模版

根据沉积构建全过程常用的网页布局，原材料控制模块会增加一些合理布局模板的物料，让消费者可以一键加上自己喜欢的合理布局情景，迅速构建网页页面。

3. 扩展合理布局配置项

增加更多的语义化合理布局配置项，来兼容独特场景下的构建。但是目前对一些通用性的规划情景做到了极致遮盖，后续会在研发与用户构建的过程当中，沉积更多独特情景的规划水平，加上合理布局配置项，促使合理布局情景覆盖水平更加广泛。

末尾

水珠画板使用了有别于热门的低代码构建和规划的方法，得出了一种新的低代码画板设计方案。但依然存有许多尚需解决的问题，例如各种各样程序模块视频的丰富多彩、减少学习及入门门坎这些。秉着灵便、实用的研发目标，水珠低代码画板会持续推进画板能力，持续提升用户的构建感受。

水珠低代码平台目前正在京东内部应用，期待未来与大家见面！后面有新设计感悟和研发进度，水珠精英团队也会继续给大家带来了共享～

最终，欢迎各位去了解水珠前端团队的开源软件，多多的 star