开通VIP，畅享免费电子书等14项超值服
首页
好书
留言交流
下载APP
联系客服
2024.01.18江苏
原创徐小夕趣谈前端2024-01-1816:30发表于重庆
趣谈前端
448篇原创内容
公众号
Dooring从2020年开源第一个版本至今已经过去4年了,基于对技术和用户体验的极致追求,每一年我们都做了大量的更新迭代,期望能把用户的搭建体验做到最好,覆盖更多的使用场景.也很感谢和我一起做Dooring的小伙伴们,能让Dooring系列搭建产品在技术的潮流中不断沉淀和进化.
从用户体验到核心技术架构,我们一直在不断优化迭代,2024年Dooring会在业务场景和AI&协同能力上做进一步升级和迭代.
我画了一张图以便大家更好的了解Dooring的技术方案.
接下来我们来聊聊最新版Dooring的功能和技术实现.
目前我们常见的低代码搭建模式都是自然流布局(拖拽完全遵循文档流移动),比较符合实际开发的体验,出码比较自然,缺点就是拖拽体验比较差,搭建成本偏高,搭建自由度比较低,所以低代码产品很难避免开发的介入,对于跨界使用往往需要较高的培训使用成本.
而零代码主要面向非技术人群,可以帮助非技术用户快速搭建出专业的网页应用.目前常用的零代码搭建模式是自由布局,也就是组件可以任意移动,堆叠.它的优点是上手成本很低,搭建自由度比较高,但是如果想适应多种屏幕尺寸,开发成本就比较大了.
当然还有一种搭建模式,也是Dooring早期使用的一种模式,网格拖拽布局.我们可以使用二维网格移动来搭建页面的布局结构,优点就是元素位置可以自动适应空间,搭建成本很低,对页面适配上也有一定改善,缺点就是无法做自由度更高的元素堆叠等场景.所以网格布局更适合做设计要求没那么高的业务页面.
随着业务场景和用户使用需求的升级,Dooring在搭建上支持了双渲染搭建模式,即一套DSL可以支持网格布局和自由布局两种搭建模式,用户可以根据需求来切换搭建模式.
对于实现这两种布局方案,市面上也有比较成熟的方案,比如react-dnd,或者react-dragable,当然我们自己用vue或者react实现类似的搭建模式也完全没问题.
Schema分两部分:
editData是组件属性可编辑项的数组,每一项里面包含了如下字段:
key和name都可以按照组件属性的语义来定,这里值得一提的是type.不同属性的值类型不同,所以我们编辑项的type也不同,所有的类型如下:
更详细的代码可以参考私有化部署版的editor/src/core/FormComponents目录.
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:'/'},]}editData和config构成了一个Dooring组件的schema结构,所以我们可以发现,每一个dooring组件都具备如下结构:
当然组件的schema也可以根据自己的需求来扩展,如果在组件设计上有疑问的,可以随时和我沟通.
组件物料开发依赖于上一节说的搭建协议的设计,在开发Dooring自定义组件时我们只需要按照通用的react组件开发模式来写我们的组件即可,唯一不同的就是每一个组件都需要定义自己的schema文件,这也是低代码/零代码组件开发的通用模式.
接下来我拿Header组件来和大家介绍一下如何开发自定义的低代码组件.
importCarouselfrom'./Carousel/schema';importFormfrom'./Form/schema';importHeaderfrom'./Header/schema';importWhiteTplfrom'./WhiteTpl/schema';importIconfrom'./Icon/schema';importImagefrom'./Image/schema';importShapefrom'./Shape/schema';importLongTextfrom'./LongText/schema';importNoticefrom'./Notice/schema';importQrcodefrom'./Qrcode/schema';importTextfrom'./Text/schema';importTitlefrom'./Title/schema';constbasicSchema={Carousel,Form,Header,Icon,Image,LongText,Title,//...其他组件};exportdefaultbasicSchema;组件元信息定义组件设计好之后在编辑器中还无法看到,这是应该我们需要配置一下组件的初始化元信息,比如从组件面板拖入画布之后的组件大小,组件的名称等,具体的定义路径在:
具体定义介绍:
目前表单搭建是集成在表单组件的配置项中的,用户可以拖拽表单组件来轻松的创建表单,并可配置表单的基本校验和自定义表单提交接口.
未来我们把把表单引擎单独抽离成一个子产品,用来专门做表单搭建平台.目前已经有一个beta版本:
出码模块主要有:
原理就是通过渲染基座,通过业务流将用户搭建的页面schema注入基座工程,基座工程通过打包流将页面代码产出.
这块主要借鉴了老牌设计软件PhotoShop,我们可以便捷的在Dooring的标尺双击来生成参考线(包括x轴,y轴),我们可以把参考线拖拽到画布任意位置,来实现对元素定位的参考.
标尺设计主要是为辅助参考线,进行更精准的参考线位置和布局的规划,随着画布的缩放,参考线也会等比例缩放,保证和画布一致.
网格线的价值在于用户可以在非设计稿的情况下,精准控制元素的位置,比如对齐,排列等,我们可以通过网格布局(Dooring的设计哲学之一)的搭建模式下更快速的布局和排版页面.
在传统搭建平台里,如果没有丰富的模版支持撑,小白用户很难做出精致的页面,包括设计元素,包括色彩搭配等,所以基于这样的背景,Dooring引入了免费素材库和色彩搭配面板,方便用户做页面设计参考:
素材库里列出了我们调研之后得出的的几个常用分类:
配色方案目前提供了:
用户可以参考配色方案搭建不同色彩风格的页面.
视图控件主要是方便用户可以更快捷的调整画布和控制画布中的元素.我们都知道一旦页面中的元素变多之后,我们在查找组件或者调整页面结构的时候就会变得非常麻烦,比如页面过长,我们需要上滑动才能定位到指定位置,再比如页面元素过多,我们想快速找到某一个元素并调整,这样变得非常困难,所以Dooring基于这些痛点做了一些改进和优化.
通过Dooring提供的画布控制面板,我们可以快捷的切换画布大小,或者通过手动输入自定义尺寸的方式来改变画布大小.
为了解决上述分析的第二个问题,Dooring设计了图层管理面板.
我们可以通过图层管理面板轻松的管理画布中的组件,比如:
当然后期也会提供更强大的图层面板.
为了方便用户在画布中高效的创作,快捷键是必不可少的,所以Dooring也提供了快捷键的能力:
我们可以通过快捷键,快速的实现复制,删除,粘贴图片等功能.
目前Dooring已支持如下文件解析能力:
下图是一个文件解析的案例:
以上演示可以看到,搜索组件可以将商品组件的内容搜索出来,进而实现了组件联动.
实现方案
没错,我们用的就是CustomEvent.
事件本质上是一种通信方式，一种消息机制，我们在遇到多对象多模块场景时，使用事件进行通信是一种非常有效的方式。在多模块化开发时，可以使用自定义事件进行模块间通信。
我们使用自定义事件也很简单,就像我上面画的图一样,我们只需要具备3个条件:
接下来我们用MDN的案例来说明如何使用它:
constform=document.querySelector("form");consttextarea=document.querySelector("textarea");//创建一个新事件，允许冒泡，并提供要传递给“detail”属性的任何数据consteventAwesome=newCustomEvent("awesome",{bubbles:true,detail:{text:()=>textarea.value},});//表单（form）元素监听自定义的“awesome”事件，然后在控制台打印传递的text()方法的输出form.addEventListener("awesome",(e)=>console.log(e.detail.text()));//当用户输入时，表单中的文本区域会分派/触发事件，并以自身为事件的起点textarea.addEventListener("input",(e)=>e.target.dispatchEvent(eventAwesome));以上就实现了一下自定义事件的监听和派发,我们可以让不同的元素监听同一个事件,并进行不同的逻辑处理.
同时它的兼容性也非常好,主流浏览器都支持:
有了以上基础,我们接下来来实现一下在低代码中基于事件的组件通信模式.
上面介绍了跨组件通信,但是我们为了让业务层能更好的接入低代码或者零代码,我们需要设计统一的数据源规范.
对于数据源的设计,根据实际的业务需求,我们可以分为静态数据源和动态数据源.静态数据源是用户可以通过可视化的方式在低代码平台上创建的,比如编辑数据表格等.
动态数据源是指用户可以自定义的请求第三方的数据服务,组件消费数据源完全是动态调用的,类似于我们传统开发时使用的ajax请求.
数据源其实就是用户的一个通过可视化的方式来创建管理的数据库,我们可以静态的录入数据,也可以动态的通过接口获取数据:
然后我们在组件配置面板中就可以一键绑定数据源了:
接下来我们来实现组件通信的部分,效果如下图:
首先在搜索组件中创建事件并派发:
consthandleSearch=()=>{if(targetId){document.dispatchEvent(newCustomEvent(`search_${targetId}`,{detail:textRef.current.value}))}}为了保持事件被监听的对象可控,我们需要通过组件id来明确指定组件的监听目标,所有事件名可以用目标id+业务词来组成.
接下来我们可以在商品组件来设计统一的监听:
useEffect(()=>{consteventName=`search_${id}`;functionhandleDataChange(event:any){//将数据传递给业务函数handleSearch(event.detail);}document.addEventListener(eventName,handleDataChange)return()=>document.removeEventListener(eventName,handleDataChange)},[])这样我们就能将搜索组件的值通过event.detail方式传递给商品组件,并在搜索按钮中触发事件的执行,从而影响商品组件的业务函数的执行.
当然这只是一个简单的案例,我们还可以利用这样的机制设计更复杂的通信,比如事件队列,让一个组件依次执行一系列的事件逻辑.
Dooring为了更好的用户体验,对用户行为做了埋点统计分析:
同时还可以通过搜索来发现用户行为路径的规律,以便进行更科学的产品决策:
业务管理系统主要是为了管理平台数据资产和Saas用户的业务资产.接下来我介绍几个核心的管理模块.
给用户分配等级:
会员权益配置:
我们可以在页面管理中直观的看到页面的访问数据信息:
并且可以一键预览自己做的页面:
如果你用H5-Dooring做了一个表单页面,我们还能在页面管理中轻松看到表单的收集信息,并支持一键导出为excel:
当然如果你用H5-Dooring配置了一个活动页面(比如大转盘抽奖,九宫格抽奖活动),你也可以在这里看到活动的数据:
组件管理可以方便运营人员快速的对组件进行上架和下架,并对组件进行排序,让用户更快速的找到自己常用的组件.
同时我们还能对组件进行权限设置,让不通角色的用户拥有不同的组件操作权限.
2024年Dooring会持续优化用户体验,上线更多实用组件和模版,具体规划如下: