Dooring无代码搭建平台技术演进之路

大家好, 我是徐小夕, 之前一直在分享可视化低代码的一些实践, 围绕 H5-Dooring 零代码搭建平台也输出了很多技术文章, 最近2.7.0 版本也顺利迭代完成, 这里详细分享一下 H5-Dooring 无代码搭建平台技术方案.

• H5-Dooring 开源版本
• 可视化低代码技术集合
• H5-Dooring在线体验

Dooring无代码产品技术演进

两年前我设计了H5-Dooring的第一个开源版本, 之后陆陆续续迭代了两年, github star已达到6.5k+, 也找到了很多志同道合的小伙伴, 一起研发Dooring系的搭建产品, 如:

• h5-dooring | 可视化搭建解决方案
• mitu-editor | 开源图片编辑器
• v6.dooring | 可视化大屏搭建平台
• dooringx | 可视化搭建框架

从技术设计和产品规划上, 这几年也总结摸索出了一些经验和实践, 接下来我就和大家一起分享一下H5-Dooring 的技术架构设计与演进.

底层搭建协议标准化

我们都知道任何低代码或者零代码搭建产品都非常注重底层搭建协议, 这些产品通常会设计一套向上兼容且可扩展的DSL结构, 来实现页面元件的标准化配置, 并支持元件的向上扩展.

上面这张图是我在设计 V6.Dooring 可视化大屏搭建平台的编辑器架构图, 这里的底层搭建协议可以认为是 搭建基础, 也就是我们常说的 “经济基础决定上层建筑”.

在设计H5-Dooring 搭建平台前, 我也参考了很多标准化软件数据协议, 给我启发最大的就是 ODATA, 它是微软于2007年发起的开放协议, 主要由以下几部分组成:

• 核心协议: 主要定义了开放数据协议的核心语义和行为

• URL规范: 主要定义了一系列推荐（非强制）采用的构建用于访问OData服务中的数据和模型的URL的规则

• 通用格式定义语言（CSDL）: 它定义了OData服务的EDM模型的一种XML格式的表现形式

• 扩展的巴科斯范式（ABNF）: 定义了构建OData请求和响应URL的巴科斯范式

为了让可视化搭建平台的组件数据标准化且可扩展, 这里我分享一下H5-Dooring的Schema设计.

Schema 分两部分:

• editData 组件可编辑属性的数组
• config 组件真正消费的数据

editData 详解

editData 是 组件属性可编辑项的数组, 每一项里面包含了如下字段:

• key 属性名
• name: 属性名的中文显示
• type: 属性的可编辑类型
• isCrop(可选)
• cropRate(可选)
• range(type 为’Radio’或’Select’时的选项数组)
• 后期可能会扩展(详细结构可参考Dooring 开源版本)

key和name 都可以按照组件属性的语义来定, 这里值得一提的是 type. 不同属性的值类型不同, 所以我们编辑项的 type 也不同, 所有的类型如下:

• Upload 上传组件
• Text 文本框
• RichText 富文本
• TextArea 多行文本
• Number 数字输入框
• DataList 列表编辑器
• FileList 文件列表编辑器
• InteractionData 交互设置
• Color 颜色面板
• MutiText 多文本
• Select 选择下拉框
• Radio 单选框
• Switch 开关切换
• CardPicker 卡片面板
• Table 表格编辑器
• Pos 坐标编辑器
• FormItems 表单设计器

更详细的介绍可以访问 dooring 开发文档

config 详解

config 本质上是一个对象, 也就是组件所能暴露出来的属性集合, 和 editData 数组每一项的key 一致, 如下:

{cpName: 'Header',logoText: '',fontSize: 20,color: 'rgba(47,84,235,1)',height: 60,fixTop: false,menuList: [{id: '1',title: '首页',link: '/'},{id: '2',title: '产品介绍',link: '/'},]} 

我们通过以上的设计规范, 就可以轻松制作一个可实时编辑的低代码组件:

可以在Dooring官方文档体验: