如何评价Dooring低码/零码搭建平台？

大家好，我是徐小溪。之前一直在分享一些可视化低代码的实践，也围绕H5-Dooring零代码搭建平台导出了很多技术文章。最近2.7.0版本迭代成功。下面就来详细分享一下Here上门零码搭建平台的技术方案。
H5-Dooring开源版本可视化低码技术合集H5-Dooring在线体验Dooring无码产品技术进化两年前，我设计了第一个开源版本的H5-Dooring，经过两年的迭代，github star已经到了6.5k，我也找到了很多志同道合的合作伙伴来研发Dooring的建筑产品，比如3360。
image.png-dooring |可视化建筑解决方案米兔-editor |开源图片编辑器v6.dooring |可视化建筑平台dooringx |可视化建筑框架这几年在技术设计和产品规划方面也总结和探索了一些经验和做法。接下来，我将与您分享H5-Dooring的技术架构设计和演变。
image.png
基础设施协议的标准化我们都知道，任何低代码或零代码的基础设施产品都非常重视基础设施协议。这些产品通常设计一种向上兼容、可扩展的DSL结构，实现页面组件的标准化配置，支持组件的向上扩展。
image.png上图是我为V6.Dooring做的可视化大屏建筑平台的编辑器架构图，这里的底层建筑协议可以看作是建筑基础，也就是我们常说的“经济基础决定上层建筑”。在设计H5-Dooring楼宇平台之前，我也参考了很多标准化的软件数据协议，其中对我启发最大的是ODATA，这是微软在2007年发起的一个开放协议，主要由以下几部分组成：3360
核心协议：主要定义了开放数据协议的核心语义和行为image.png。
URL规范：主要定义了一系列推荐的(非强制性的)规则image.png，用于构造在OData服务中访问数据和模型的URL。
“通用格式定义语言(CSDL)”:它定义了image.png OData服务的EDM模型的XML表示。
“ABNF”:定义了构建OData请求和响应URL的“ABNF”。image.png为了规范和扩展可视化平台的组件数据，这里我分享一下H5门的架构设计。
Image.pngSchema分为两部分：
编辑数据组件可编辑属性数组配置组件实际消耗的数据编辑数据详细说明编辑数据是组件属性可编辑项的数组，每个属性包含以下字段：
属性名name:属性名中文显示属性类型：的可编辑类型isCrop(可选)。cropRate(可选范围)(类型为’ Radio ‘或’ Select ‘时的选项数组)后期可能会扩展(详细结构参考Dooring开源版本)。key和name都可以根据组件属性的语义来确定。这里值得一提的是那种类型。不同的属性有不同的值类型，所以我们编辑的项的类型也不同。所有类型如下：3360
上传组件文本文本文本框RichText富文本文本区域多行文本数字输入框数据列表列表编辑器文件列表文件列表编辑器交互数据交互设置颜色颜色面板多文本多文本选择选择下拉框单选单选单选单选框Sw Itch开关卡片拾取器卡片面板表格编辑器Pos坐标编辑器表单设计器有关更详细的介绍，请访问dooring开发文档。
详细解释config config本质上是一个对象，即一个组件可以公开的一组属性，与editData数组中每一项的key一致，如下图：所示。
{ cpName: ‘Header ‘，logoText: ‘ ‘，fontSize: 20，color: ‘rgba(47，84，235，1)’，height: 60，fixTop: false，Menulist: [{ID :’ 1 ‘，Title :’ Home ‘，Link 3360’/’}，{ ID : ‘ 2 ‘，Title 3360 ‘产品介绍
Image.png可以在官方文件中体验：低代码组件的情况。
建筑格局的多样化当初设计H5-Dooring的时候，为了让用户的建筑成本最小化，我使用了智能网格布局来构建页面。用户只需要像搭积木一样在二维空间中选择合适的组件，就能快速做出3360页。
虽然这样可以降低用户的搭建难度，满足部分受众的搭建需求，比如简单的官网和活动页面的制作，但下面是搭建3360的一个代表性例子。
但对于平台方来说，为了满足更多场景下的页面深度制作，需要提供不同场景、不同行业的组件素材，这将给研发带来巨大压力；d(尽管新组件一直在增加)。另一方面，目前很多H5活动制作平台基本都是以自由布局的模式搭建，这样做的好处是可以最大程度还原设计稿，以满足更加灵活的搭建需求。缺点是使用成本高于网格布局模式，会涉及到图层的概念。当然，经过综合评估，确实需要给部分用户提供自由布局的模式，所以在技术层，我设计了一个既兼容网格布局又兼容自由布局的构建方案。用户在建设时，可以轻松选择适合自己的建设模式3360。
同时，为了满足image.png自由布局下组件的分层管理，我设计了图层管理面板和图层操作来快速管理页面元素。当然，图层管理面板对网格布局也有一定的积极作用，比如组件的快速操作。
可扩展插件系统提出了可视化构建平台的统一构建协议和构建模式。这两个核心要素完成后，我们就可以轻松设计我们的插件系统了。
从image.png插件系统的本质来说，核心价值是在页面操作的全周期中为页面赋能，页面的本质是数据(即DSL集)。
所以只要image.png有标准的数据规范，我们的定制插件就可以轻松赋能页面，类似于各种技术中的中间件。这里有一个3360的例子。
{ ‘ page config ‘ : { ‘ allowOverlap ‘ : ‘ freedom ‘，’ isLogin’: false，’ bgColor’: ‘rgba(16，20，29，1)’，’ bgSize’: ‘100% ‘，Title ‘ 3360 ‘ H5-门宁官网’ }，’ TPL’ 3360 [{‘ID’ 3360′ 276059 ‘，’ item’ 3360 btnColor’: ‘rgba(20，54，226，100)’ } }，’ h’: 23，’ type’: ‘XButton’ }，’ point’: { ‘w’: 24，’ h’: 23，’ x ‘ : 0 0，’ y’:’ i’: ‘276059，’ moved’: 有故事，dooring可视化编辑器有无限可能。快来。’到ollie ~ ‘，’ color’ :’ rgba (60，60，60，1)’，’ fontsize’ 3360 14，’ indent’ 3360 0 0，’ lineheight’ 3360 1.8，’ textalign’ 3360′ left ‘，’ 255，255，0)’，’ padding’: 0，’ radius ‘ : }，’ h’: 36，’ type’: ‘LongText’ }。如果要对页面元素进行统计分析，或者实现编码、国际化、PSD分析转换等功能，只需要对数据结构进行分析处理即可。
因此，image.png表示，在H5-Dooring平台上实现定制插件是非常容易的，也是低码或无码规划的关键环节。
可扩展的组件编辑器H5上门平台的组件编辑器主要用于编辑组件属性，如：
基本样式交互设置，动画设置，当然还有全局数据源配置，如下所示
同时，因为我们的组件数据协议在image.png是高度统一的，所以扩展属性配置非常容易。我们只需要根据数据协议添加属性。
同样，“v6.dooring”在image.png也采用了类似的架构，所以我们很容易扩展组件的属性：
关于image.png视觉大屏搭建平台的技术实践，可以参考我的另一篇文章，从零设计到视觉大屏搭建引擎。
多航站楼支撑image.png。由于门禁技术栈采用React并实现了标准的数据协议层，我们可以使用Taro这样的跨平台框架来实现多终端搭建。对于我们常用的移动、Pad、PC等媒体，编辑器目前还提供了快速切换模式3360。
因此，image.png可以很容易地实现不同目的的建设。实现原理本质上是切换画布大小，同比例更新元素平衡。
图层管理，让设计更有效率。图层管理模块也是进门后上线的功能，支持自由布局。因为我们页面中组件的数据结构包含统一的物理信息3360
级别、类别、大小、颜色等。外观事件/交互/动画image.png，因此我们可以仅通过分析页面的组件集来容易地在页面中呈现元素层信息3360。
有了image.png的图层概念，我们其实可以做很多有用的事情，比如：
选择多个组件、编辑组件、删除组件、锁定组件和开门将迭代更多功能，以提高基于层能力构建pin的效率。
低代码组件模板生态在上门的迭代中，把大部分精力花在了优化用户构建体验和协议标准化上。我也为组件素材的丰富做了一些设计，最近发布了一个低代码组件库的原型3360。
Image.png可以轻松实现像write React组件这样的低代码组件，并支持在线实时编辑。一个基本的例子如下：
从’导入样式。/index . less ‘；从“react”导入React，{ memo，use state }；从“@ant-design/icons”导入{ menu outlined }；从“”导入{ IHeaderConfig }。/schema ‘；const Header=memo((props : IHeaderConfig)={ const { CP name，bgColor，logo，logoText，fontSize，Color，showMenuBtn，menuColor，height，}=propsconst [showMenu，setShowMenu]=use state(false)；const toggle menu=()={ setShowMenu(！showMenu)；};返回(
{logoText}
{showMenuBtn(
)} );});导出默认标题；通过这种标准化的方式，我们可以为门禁平台提供更丰富的部件材料。除了基本的素材组件，为了从更大的粒度上提高用户构建的效率，我提供了模板功能，我们可以将重复的块和可重用的页面保存为模板3360。
Image.png可以很容易地在编辑器页面中保存页面为模板，并自动生成海报封面：
基于image.png网页生成封面的方法也很简单。我这里使用dom-to-image作为库，当然也可以使用html2canvas进行构建。
表单设计者的数据收集和分析能力我之前写过一些关于表单编辑器实现的想法。在这里，我想给大家介绍一些核心思想。
动态表单开发的一般思想” 1。静态配置列表“静态配置列表是最传统的表单配置方法之一。基本思想是用父表生成配置项，然后实现表单配置。类似于下面的方式：
早期的网站配置和这个方案差不多。比如自定义网站的主色调，网站的某些组件是否可见，都是比较简单的方法。但缺点是每增加一个配置属性，开发者都要重写一个字段配置代码。这种方式在表单开发上非常不灵活，对代码层的依赖性很强，所以只适用于小型配置系统。比如个人网站，简单的自定义表单。”2.基于json schema的动态表单配置“基于json schema的动态表单配置有两种实现方案，一种是支持在线修改json文件实现定制，另一种是完全不需要代码就可以操作，但前提是提供一套通用的表单模板。类似于下面的情况：
该方案可以实现基本的表单自治。这也是本文的主要方案。至于在线写json文件的方案。作者之前也有成熟的方案。具体可参考：二次封装一个基于json编辑器可实时预览的jsoneditor组件(react版本)。”3.支持在线编码的混合表单设计“支持在线编程的混合表单设计方案是终极方案，也是目前无代码平台流行的思路之一。一方面提供基于“json schema”的动态表单配置。对于一些需要在线设计组件方案的强定制模式，它采用在线编程，实时封装成动态组件。最后，根据平台的构件规约实现构件库。如下图所示：
使用“react-codemirror2”或“react-monaco-editor”插件可以实现在线代码编辑。至于线上包装，我们完全可以用“nodejs”来实现。笔者在网上下载“门口”项目的代码时就使用了这个方案。有兴趣的可以看看。
可视化中的表单引擎可视化领域一方面强调图形(可视化)的设计，另一方面强调动态表单。例如，如果我们想愚蠢地改变数据、属性、交互等。一幅画，我们需要通过形式的桥梁来实现它：
因此，我们需要设计一个适合公司产品的“表单引擎”，根据图形组件的类型，动态渲染不同的表单配置。这个思路也是表单设计者要解决的问题之一。在下面的文章中，我们将详细介绍实现过程。
从零开始实现一个动态表单设计器。在实现表单设计器之前，我们先梳理一下思路和需求。在作者最初的草图中，它是这样的：
我们可以从草图中提取以下任务信息：
定义一套表单组件库，确定表单的全局属性配置，实现表单操作凝乳(添加、删除、检查、更改)。我们将几种常用的表单组件总结如下：
单框复选框单行文本多行文本下拉框文件上传日期框数值输入框这些基本满足我们日常的开发需求。其次，我们还可以开发数据源表单组件和列表组件，比如dooring实现的那些：
类似于彩色面板，我们可以根据更多的业务需求自行定制。完成表单组件库后，我们需要根据配置项进行动态渲染。还有两种实现思路，一种类似于多条件判断，如下：
{项目。type==’ number’} {item。type==’ text’} {item。type==’ textarea’}虽然这是可行的，很多成熟的系统都采用这种方案，但是一旦表单比较多，比如一个页面中有几十个甚至上百个表单项，那么我们就会呈现“m”* * *。另一种方式，作者似乎更优雅，可以把复杂度降低到O(n)，这是作者常用的对象方法。思路是这样的：“把表单组件的类型作为对象的属性，属性值就是对应的表单组件，所以遍历的时候只需要对应对象的具体类型就可以了。”代码如下：
//维护表单控件，提高表单的呈现性能。const base form={ ‘ text ‘ :(props)={ const { label，placeholder，onchange}=props return}，Number ‘ 3360(props)={ const { label，placeholder，onchange }=props return } }//动态呈现表单{formdata.map ((item，I)={ LetFormItem=base form[item . type]return
}}}是不是很优雅？后期只需要维护“BaseForm”中的表单组件，也可以基于“BaseForm”封装表单，实现动态删除、编辑等功能。如下所示：
Image.png的打包代码如下：
接下来，让我们看看表单的全局属性。通过实际分析，我们可以知道该表单有如下外观：
标题表单背景图片表单背景颜色提交按钮样式，所以它们应该是表单设计的共同属性，如下图所示：
image.png的上述形式是由“H5门”设计的。当然，我们可以用它来设计更多定制的表单页面。比较的最后一个要求是api定制。一般公司可能需要在自己的平台上收集用户的输入数据。这时候我们就有必要主动提供一个api表单提交接口。正如作者在上面所展示的，实现非常简单，即可以再配置一个api文本框。
使用H5门开发一个表单设计平台。在H5编辑器“Dooring”的实现中，我们可以做抽象，每个页面组件都可以看作一个具体的表单组件，如下图所示：
我们可以使用“开门”功能来拖放表单平台、设计样式、输入数据等等。有兴趣的朋友可以基于“门”的设计思路，转型成为自己的形态设计平台。关于数据采集的能力，可以参考我的另一篇文章，前端如何一键生成多维数据可视化分析报告。
在支持协作之前，H5门使用socket实现双向通信。不同用户想要如何协作构建，可以通过共享的json文件或者socket来实现。不过最新市场上也有非常好的协作方案。也可以参考一下。我们目前正在确定这件作品的功能设计方案。
代码输出能力目前，Dooring支持两种代码输出模式：
生成代码生成源代码image.png以上是我们实时在线打包下载代码需要做的工作流程。由于nodejs是单线程的，为了不阻塞进程，我们可以使用父子进程通信和异步模型来处理复杂耗时的任务。为了通知用户任务的完成状态，我们可以使用socket进行双向通信。在当前的场景中，在代码被编译和压缩之后，通知浏览器，以便浏览器可以显示下载状态弹出窗口。有三种状态：进行中、完成和失败。对应的界面如下图所示：
至于为什么没有下载失败，不要问我。如果你要求，你永远不会失败。以上是“H5上门”实时编译下载的工作流程设计。至于更实际的在线需求，我们也可以参考上面的设计来实现。接下来，笔者将详细介绍实现过程。
2.“NodeJS”如何使用父子流程。如果我们想要实现一个自动化的工作流，一个需要考虑的关键问题是执行任务的时机和方式。因为用户需要等到H5页面打包编译压缩后才能下载代码，而这个过程需要一定的时间(8-30s)。所以我们可以确定这是一项耗时的任务。当我们使用“nodejs”作为后台服务器时，由于“nodejs”本身是单线程的，所以当用户请求传入的“nodejs”时，“nodejs”必须等待这个“耗时任务”的完成，才能处理其他请求，这会导致页面上的其他请求也要等待这个任务的完成才能继续进行。因此，为了有更好的用户体验和流畅的响应，我们不得不考虑多进程处理。好在nodejs设计支持子流程，我们可以把耗时的任务放到子流程中进行处理，等子流程处理完了再通知主流程。整个过程如下图3360所示。
“nodejs”有三种创建子流程的方法。这里，笔者简单介绍一下“叉”的方式。使用方式如下：
//Child.js函数Computed Total (arr，CB){//耗时计算任务}//与主进程通信//监控主进程信号process.on (‘message ‘，(msg)={Computed Total (bigdataarr，(flag)={//向主进程发送完成信号process.send(flag)，})});//main . jsconst { fork }=require(‘ child _ process ‘)；app.use(async (ctx，next)={ if(CTX . URL===’/fetch ‘){ const data=CTX . request . body；//通知子进程开始执行任务，传入数据constraes=await createPromiseFork(‘。/child.js ‘，Data)}//创建异步线程函数createPromiseFork (child URL，Data) {//Load子进程const res=fork(childUrl) //通知子进程开始工作Data RES . send(Data)return new promise(reslove={ RES . on(‘ message ‘)，F={ RES love(F)})} } } await next()}()})在H5门线打包的工作流中，我们会使用“child_process”的“exec”方法解析并执行命令行指令，至于亲子流程的更多应用，你可以自己去探索。
3.使用“child_process”的“exec”来解析和执行命令行指令。在上面介绍的“上门”工作流程中，我们知道为了实现实时打包，我们需要一个“H5模板”项目作为打包的主控。当用户点击下载时，页面的“json schema”数据会被传输到“节点服务器”。“节点服务器”将“数据清洗”json模式，最后生成“template.json”文件并将其移动到“H5模板”主服务器。这时，主获取数据源，打包编译，最后生成可执行文件。以上过程很关键，这里我画一个总的流程图：
为了实现上述过程，我们需要两个关键环节：
用户配置的数据被处理以生成json文件，然后被移动到“H5模板”主服务器，以在主服务器中自动执行包编译脚本。第一个环节很容易实现，我们只需要使用“nodejs”的“fs”模块就可以将文件生成到指定的目录下。在这里，笔者重点介绍第二个环节的实施。当我们把json数据生成“H5模板”的时候，可以打包，但是这个过程需要自动处理，所以不能像之前启动项目一样手动执行“npm start”或者“yarn start”。我们需要程序自动帮助我们执行这个命令行指令。笔者在查“nodejs API”，突然发现了“child_process”的“exec”方法，可以用来解析指令。这正好可以满足我们的需求，于是我们开始实施。代码如下：
import { exec } from ‘ child _ process ‘ const outwork dir=resolve(_ _ dirname，’./h5_landing’)const fid=uuid(8，16)const cmdstr=` CD $ { outwork dir } yarn build $ { FID } `//.exec相关代码const file path=resolve(_ _ dirname，’./H5 _ landing/src/assets/config . JSON ‘)const RES=WF(file path，data)exec(cmdStr，function(err，stdout，Derr){ if(err){//错误处理} else {//成功处理}})上面的代码我们不难理解。我们只需要定义打包后的指令串(方式和命令行操作几乎一样)，然后把第一个参数传入“exec”，exec会帮我们解析字符串，执行相应的命令行指令。执行完成后，我们可以根据回调函数中的参数值(第二个参数)来判断执行结果。整个过程是异步的，所以我们不用担心阻塞。为了实时反馈进度，我们可以使用“socket”将进度信息推送到浏览器。
4.“http://socket.io”实现了消息的实时推送。上面提到的“exec实现解析并执行命令行指令”还有一些细节可以优化，比如代码执行过程和执行状态的反馈。因为我们使用异步编程，请求不会一直等待。如果不采取优化措施，用户就不可能知道代码是什么时候打包编译的，代码是否编译失败。因此，此时将搁置几个常用案例：
请求客户端长时间轮询postmessage消息，推送websocket双向通信。显然，使用websocket双向通信更适合这个项目。这里我们直接用社区里流行的“http://socket.io”。由于官网上有很多介绍，这里就不一一解释了。让我们直接看看代码在业务中的使用情况：
//节点端exec (cmdstr，function (err，stdout，stderr){ if(err){ console . log(‘ API Error 3360 ‘ stderr))；Io.emit (‘htmlfail ‘，{result3360’ error ‘，message 3360 stderr })} else { io . emit(‘ html success ‘，{result3360dest，message 3360 stderr } } })//浏览器端constsocket=io ( //.省略其他业务代码使用EFFECT (()={socket.on (‘connect ‘，function(){ console . log(‘ connect ‘)})；socket.on(‘htmlFail ‘，function(data){ //.});socket.on(‘disconnect ‘，function(e){ console . log(‘ disconnect ‘，e)})；}，[])这样我们就可以实现服务器任务流的状态实时反馈给浏览器。
5.使用“jszip”在服务器上压缩文件，支持前端下载“zip”包实现前端下载功能，其实很简单，因为用户配置的H5项目中包含了各种资源，比如“css、js、html、image”，所以为了提高下载性能和方便性，我们需要将整个网站打包，生成一个“zip”文件供用户下载。原理是用“jszip”压缩目录，然后把压缩后的路径返回给前端，前端用A标签下载。至于如何实现目录遍历压缩和遍历读取目录，这里就不说了。有兴趣的话可以参考nodejs的其他文章。
场景应用跌跌撞撞迭代了两年多。目前大部分的场景应用，比如3360，基本都可以用Dooring来搭建。
官网H5营销页面网络简历问卷调查信息流页面活动聚合页面等。后期会拓展更多场景，持续迭代，满足更多用户的深度定制需求。
目前，敲门已经完成了后期规划阶段的几个关键能力，
多模式构建能力和编码能力数据源(动态数据源和静态数据源)表单设计能力组件/模板应用流程国际化多终端构建(PC、H5、iPad)将从构建效率和资源生态两个维度不断迭代，如3360。
导入PSD移动进度控制营销组件，丰富智能模板，推荐参数化自动生成页面，以应用为单位搭建应用平台，埋点，搭建监控系统。