水滴低代码渠道简介

京东水滴渠道面向企业内部后台管理体系场景,供给可视化建立等低代码装备、构建及布置才能。

水滴画布作为水滴低代码的核心才能之一,具有灵敏、易用的特色,用户能够经过简略迁延拽的方法,在不需求具有前端常识的前提下,即可建立出抱负的页面。下面将为咱们介绍水滴低代码画布的规划与完结。

低代码画布的概念及类型

画布的概念: 用户能够向画布中增加物料,并对物料进行拖/拉/拽布局,建立出自己想要的页面。
这个概念延伸于艺术家的画板,画家在绘画的过程中,会将颜料进行调色,并在画布中进行绘制。而低代码渠道用户在页面建立的过程中,需求选择相应的物料,在画布中运用迁延拽的方法放置到正确的方位,并对物料进行一些属性装备来达到最抱负的展现作用。用户的建立过程与艺术家的绘制方法十分的类似,因而这个概念也来源于此。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结
画布的类型: 低代码画布能够依据事务场景的不同可分为多种类型,现在首要的类型有以下几种:

  1. 页面类型:用于网页的建立,包含 web 页面及 H5 页面
  2. 流程类型:用于流程图的建立,包含审批流程及函数流程
  3. 数据大屏类型:用于数据报表与可视化剖析东西的建立

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

水滴低代码画布现在首要用于页面的建立,也是本次需求介绍和解说的画布的类型 – 页面类型

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

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

画布特色 京东内其他渠道 Retool 水滴
面向用户 前端开发 普通用户 普通用户
是否可拖动
宽高拖拽 宽度 宽度 宽度 + 高度
布局 block grid absolute + grid
装备杂乱度 杂乱 简略 简略
UI复原度
上手成本

经过调研的状况和一些才能的比照,咱们能够发现:京东内其他渠道运用了 Block 块布局、Retool 运用了 Grid 网格布局,这些布局特性在带来页面自适应才能的一起,也会丢掉物料自定义宽高的适配才能,使得一旦需求固定宽高和自适应内容高度的时候,就会让展现的作用不够抱负。
京东内其他渠道和 Retool 都对此做了一些弥补和取舍,例如京东内其他渠道将前端的布局装备展现了出来,让用户自己去调整,在增加了布局场景的一起,也提高了非前端用户的运用门槛。而 Retool 则在精准建立方面做了一部分的退让,为了提高易用性,做了一些强制性的束缚。

水滴画布的研制目标

水滴画布面向的人群有运营、产品、测试、开发人员等,这些人群中有些是有前端的根底,而大部分都不具有前端的常识,所以在规划画布的过程中,要尽或许地下降用户的学习成本和上手成本。于是,咱们选取了以下几种功用特性,并做出了开发的目标:

  • 布局: absolute肯定定位布局 + grid网格布局
  • 拖拽:
    1. 支撑物料宽度和高度的拖拽、缩放;
    2. 支撑物料在画布中灵敏定位
  • 目标:
    1. 简略易用 – 拖拽建立无限制,自由灵敏;
    2. 操作流畅 – 确保用户频频操作过程中的页面性能;
    3. 掩盖面广 – 支撑展现、内容、工作台、管理等 B 端常见场景。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

水滴画布的规划方案

水滴画布 drip-layout 给出了一种新的低代码画布的规划方案,将建立层和烘托层分离,并且经过算法转化层来适配建立页在不同屏幕下的展现作用。

  • 首先在建立层取得物料的在页面中的定位信息 – layouts 和 物料的个性化布局装备 – config。
  • 经过算法转化层来适配页面在不同屏幕下的方位/宽高信息 – layouts。
  • 烘托层依据算法转化后的layouts信息,对页面内的一切物料进行烘托、展现。烘托层的画布会在浏览器视口巨细产生改变时,进行回流到算法转化层,从头布局核算、动态适配页面巨细。

下图展现了水滴画布的方案规划:

京东低代码渠道:浅谈水滴拖拽画布的规划与完结
在建立层的物料拖拽和缩放的交互上,运用了 react-grid-layout 底层库,并将 grid 网格的 row col 巨细都设置成了 1,使得以肯定定位的方法迁延拽后的物料定位信息 layouts,单位都精确到了 1px。最后在烘托层,依据实在页面的宽高,对烘托区域进行 grid 网格划分,并依据核算层转化后的方位信息 layouts,将物料运用 grid 的方法进行布局烘托。

水滴画布的完结架构

下图展现水滴画布的一些底层库的选取,和供给的一些才能,以及在核算层运用的一些首要的算法:

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

水滴画布核算层完结算法

容器自适应物料高度 – moduleResizeObserver

在大多数场景下,物料在页面中需求能够依据本身的实在高度进行展现,例如表格的一页数据全展现、表单内容的动态删减导致模块高度改变。这些动态的高度,都需求实时地体现在画布中,那么就需求动态监听物料的框高的改变,并将实在宽高展现在画布中。
这里运用了浏览器的 ResizeObserver api,对物料的宽高实时监听,下面是完结的逻辑代码:

京东低代码渠道:浅谈水滴拖拽画布的规划与完结
京东低代码渠道:浅谈水滴拖拽画布的规划与完结

页面扩张状况自适应 – 固定宽度模块的收缩对相邻模块的影响

在一些大屏幕下,页面的宽度巨细是要比画布中的宽度要大,画布就需求被拉伸扩展。在这种状况下,画布内的弹性模块就能够直接被等比拉伸,固定模块由于宽度需求坚持固定,就会空出空间(下图紫色区域),那么相邻的模块就会遭到影响。遭到的影响首要有以下几种状况:

  • 相邻为弹性模块,能够被直接拉伸,来填充空间
  • 相邻为固定模块,且对齐方法相同,则会被影响,因而需求平移相同的距离
  • 相邻为固定模块,且对齐方法不相同,则不会被影响
    【ps】: “对齐方法”是用来确定在页面产生形变的状况下,模块在画布的水平轴上的对齐方法
    京东低代码渠道:浅谈水滴拖拽画布的规划与完结

由于模块之间的影响具有传染性,经过深度优先遍历的方法,处理了一切固定模块,及其相邻的模块,来消除固定模块的收缩带来的影响。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

页面紧缩状况自适应 – 固定模块的拉伸对相邻模块的影响

在一些屏幕下,页面的巨细是要比画布中的宽度要小,画布就需求被紧缩。画布内的弹性模块能够被直接等比紧缩,固定模块由于宽度需求坚持固定,就会产生必定份额的膨胀(下图紫色区域),那么相邻的模块就会遭到揉捏。相邻模块遭到的影响首要有以下几种状况:

  • 相邻为弹性模块,则会被直接紧缩
  • 相邻为固定模块,由于宽度固定,遭到揉捏之后,需求进行等距离的平移
  • 所以当前行的全体宽度不够,那么右侧的模块需求进行换行处理
    【ps】: “对齐方法”是用来确定在页面产生形变的状况下,模块在画布的水平轴上的对齐方法
    京东低代码渠道:浅谈水滴拖拽画布的规划与完结

由于模块之间的影响具有传染性,经过深度优先遍历的方法,处理了一切固定模块,及其相邻的模块,来消除固定模块的拉伸带来的影响。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

鸿沟处理

由于 JavaScript 在进行数值核算时,存在精度丢掉的状况,或许会导致两个紧密相邻模块的核算结果,在定位上呈现穿插的状况。这种定位穿插的状况,又会在画布的鸿沟碰撞检测处理下,呈现画布布局错乱的问题。可是假如运用保留 n 位小数的方法进行精度核算,又会导致相邻模块之间由于取整导致小数位丢掉,然后模块间会呈现缝隙的视觉作用。
精度丢掉核算场景:A.x + A.w === B.x => 1.3 + 1.6 === 2.9 => 结果:false
因而水滴画布做了一些假定:假如两个模块鸿沟之间的距离小于 1px,则对两个模块的鸿沟之间进行粘合,来消除 JavaScript 精度丢掉带来的影响。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

水滴画布的几种通用布局展现

现在水滴画布归纳了惯例页面建立场景中,首要运用的几种根底布局类型。在现已支撑的组合组件的嵌套才能下,用户能够对物料进行简略地排列、组合和布局装备,就能够建立出丰厚、精细化的页面场景。下图是这些根底布局场景的烘托作用:

  • 左右布局场景(左边固定,右侧自适应)

    京东低代码渠道:浅谈水滴拖拽画布的规划与完结

  • 右左布局场景(右侧固定,左边自适应)

    京东低代码渠道:浅谈水滴拖拽画布的规划与完结

  • 左中右布局场景(左右两侧自适应,中间居中固定)

    京东低代码渠道:浅谈水滴拖拽画布的规划与完结

  • 高度自适应场景(表格高度跟随内容的巨细自适应,将表格数据一页全展现)

    京东低代码渠道:浅谈水滴拖拽画布的规划与完结

  • 一屏展现场景(高度支撑百分比设置,让物料撑满页面可视区域)

    京东低代码渠道:浅谈水滴拖拽画布的规划与完结

  • 组合嵌套,精细化建立(支撑组合的概念,组合的布局才能承继外部画布,构成嵌套结构)

    京东低代码渠道:浅谈水滴拖拽画布的规划与完结

水滴画布的建立/烘托作用展现

建立页面的操作场景

从图中能够看出,用户经过简略的迁延拽,就能够快速地建立出自己想要的页面作用。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

杂乱页面的烘托作用

现在水滴低代码渠道现已完结了页面自举的才能,渠道历史开发的页面,现已运用建立化的方法进行了代替,下图展现的是渠道主页建立的作用。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

未来规划

1. 辅佐建立

在建立场景运用肯定定位布局的方法,给用户的操作带来了很大的开放性,但随之而来的问题就是建立精确度的确保。很多状况下,用户需求手动调整模块的间隔,以及模块之间的对齐。这样势必会带来用户操作次数的增加,一起也会形成精准度的丢掉。

因而,参阅咱们日常运用 PPT 的行为方法,水滴画布会给用户在建立过程中供给一些辅佐建立东西,并帮助用户主动完结一些细节上的操作。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

2. 布局模板

经过沉积建立过程中常用的页面布局,物料模块会新增一些布局模版的物料,让用户能够一键增加自己想要的布局场景,快速建立页面。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

3. 拓展布局装备项

增加更多的语义化布局装备项,来适配特别场景的建立。由于现在对一些通用的布局场景做到了掩盖,后续会在开发和用户建立的过程中,沉积更多的特别场景的布局才能,增加布局装备项,使得布局场景掩盖的才能愈加广泛。

京东低代码渠道:浅谈水滴拖拽画布的规划与完结

结束

水滴画布采用了不同于主流的低代码建立和布局的方法,给出了一种新的低代码画布的规划方案。可是依然存在不少有待改善的当地,比方各种功用模块内容的丰厚、下降学习及上手门槛等等。本着灵敏、易用的研制目标,水滴低代码画布会持续加强画布的才能,不断提升用户的建立体验。

水滴低代码渠道现在还在京东内部运用,等待未来与咱们见面!后续有新的规划感悟和研制进展,水滴团队也会持续给咱们带来分享~

最后,欢迎咱们来了解水滴前端团队的开源项目,多多 star:水滴表单,水滴表格,MicroApp微前端