html开发工具
-
2023年2月17日发(作者：)html铺满整个页⾯_页⾯可视化搭建⼯具技术要点
页⾯可视化搭建⼯具,是互联⽹公司中常见的运营⼯具,实现了运营⼈员快速⽣成和发布页⾯,提升页⾯上线效率;且⽆需开发⼈员介⼊,节省
开发⼈⼒.
页⾯可视化搭建⼯具搭建出的页⾯⽰例:
但从零开始设计和开发出这种⼯具并不简单.作者维护的页⾯可视化搭建框架pipeline,提供了页⾯可视化搭建的核⼼功能,免去从零实现页
⾯可视化搭建⼯具的困难.
活动页⾯开发之痛
活动页⾯特点
前端业务中,经常需要开发产品介绍页/营销页/活动页/图⽚展⽰页等页⾯.这类需求有以下⼏个特点:
页⾯类似:页⾯布局和业务逻辑较固定.
需求⾼频:每周甚⾄每天有多个这种需求.
迭代快速:开发时间短,上线时间紧.
开发性价⽐低:开发任务重复,消耗各⽅的沟通时间和⼈⼒.
活动页⾯常规开发流程
活动页⾯常规开发流程图
流程
1.运营/产品提出页⾯需求.
2.⾛项⽬流程进⼊开发环节.
3.开发根据设计稿完成页⾯开发.
4.测试进⾏页⾯测试.
5.运维进⾏页⾯上线.
6.运营/产品进⾏页⾯验收.
痛点
多⽅参与,反复沟通,串⾏流程串⾏流程.
页⾯上线周期长,⽆法快速响应活动需求.
⼈⼒陷⼊重复⼯作泥潭,忙碌⽽低效.
更优的流程
对于⾼频和重复的活动页⾯开发,业界⼀般将页⾯做成配置化,配置⼯作从开发⼈员交接给产品/运营等需求⽅;开发和设计⼈员只需提供配置
化页⾯⽀持.更优的活动页⾯⽣成流程依靠页⾯可视化搭建系统来实现.
现.
更优的活动页⾯开发流程图
流程
1.运营/产品提出页⾯需求.
2.运营/产品在页⾯可视化搭建系统中选取合适的页⾯模板进⾏页⾯搭建.
3.页⾯⾃动化发布上线,页⾯需求完成页⾯需求完成,流程完结.
4.如果运营/产品没有找到合适的模板.
5.开发进⾏页⾯模板开发,并将页⾯模板添加到页⾯可视化搭建系统中.
6.运营/产品继续流程2.
同时,随着页⾯可视化搭建系统中的页⾯模板不断丰富,新的页⾯需求对开发⼈员的依赖逐渐减低,可由运营/产品直接完成.
页⾯可视化搭建⼯具
更优的活动页⾯开发流程依靠页⾯可视化搭建系统实现,重点是要有页⾯可视化搭建⼯具提供技术⽀持.页⾯可视化搭建⼯具通过填写配置数
据表单,拖拉页⾯组件等可视化的页⾯编辑⽅式,实现页⾯的⽣成或修改.
但从零开始设计和开发出页⾯可视化搭建⼯具并不简单,有⼏个需要了解和关注的技术点.
页⾯可视化搭建⼯具的技术要点
从技术⾓度,设计和开发⼀个页⾯可视化搭建⼯具时,需要考虑以下⼏个技术要点:
页⾯组件化
页⾯模板
页⾯可视化编辑
组件层级关系
页⾯打包
实时预览
页⾯组件开发
页⾯组件化
组件化的优点
页⾯的基本单元是HTML元素,但是HTML元素⽆法包含业务逻辑,且由HTML元素直接组合出页⾯,过于繁杂和低效.
页⾯较好的组织⽅式是组件化,如上图所⽰.组件是对HTML元素、元素布局和样式、业务逻辑的封装.通过组件封装业务逻辑,并通过组件
属性(Props)向外暴露组件的配置字段.采⽤页⾯组件化,复杂的页⾯可视化搭建可以转化为2个较简单的操作:
组件树组合,页⾯可视化搭建变成页⾯组件的可视化组合.
组件配置编辑,将对页⾯内容的编辑转化为对组件的配置属性(props)修改.
页⾯前端框架
页⾯组件化需依靠前端框架来实现.页⾯可视化搭建⼯具的架构⽅式对页⾯前端框架有限制:需选择页⾯可视化搭建⼯具⽀持的前端框架.如:
页⾯可视化搭建⼯具只⽀持基于vue的页⾯,那页⾯组件化的前端框架只能选择vue.
但是前端技术团队选⽤的前端框架,⼀般已⽤于⽀持现有业务,并沉淀了⼀定数量的技术组件和业务组件.如果需要针对页⾯可视化搭建⼯具
进⾏前端框架的切换,成本将会很⼤.
所以理想的页⾯可视化搭建⼯具,应该和页⾯的前端框架解偶,如下图所⽰.技术团队在某前端框架中沉淀的技术组件和业务组件,可在页⾯可
视化搭建⼯具的页⾯中复⽤.
技术难点1:页⾯可视化搭建⼯具与页⾯前端框架解偶.
当然,前端业务已选⽤了某前端框架,开发专门⽀持该前端框架的页⾯可视化搭建⼯具,也是⾼效实现⽬标的选择.
页⾯模板
页⾯模板包含完整的业务逻辑,有助于快速⽣成业务页⾯.不同的页⾯模板适⽤于不同的业务功能,从模板库中选择合适的页⾯模板并派⽣出
默认业务页⾯,再对默认页⾯进⾏可视化编辑,从⽽⽣成⽬标业务页⾯.
云凤蝶的页⾯模板列表:
模板带有页⾯的默认数据;对于组件化的页⾯,模板是从组件库中选取部分组件,并带有各个组件的默认配置数据.
如上图所⽰,页⾯组件库中有组件A,组件B,组件C,组件D,…,组件X等.页⾯模板⼀由组件库中的组件A,组件B和组件C组成,实现了⼀个完
整的业务功能;页⾯模板⼆由组件库中的组件A,组件B和组件X组成,完成另⼀个完整的业务功能.
页⾯编辑
页⾯由页⾯组件组合⽽成,页⾯的编辑其实是对页⾯组件进⾏重新组合,并编辑各页⾯组件的内容.页⾯编辑包含2个部分:编辑页⾯组件和编
辑页⾯内容.
编辑页⾯组件
组件树
使⽤组件化的⽅式来组织页⾯,页⾯可以认为是⼀棵组件树,如下图所⽰,树中的节点为页⾯组件,页⾯组件可以包含⼦组件.
在代码编写上,通过组件标签的组合来声明⼀棵组件树,并在打包时⽣成页⾯资源,在运⾏时加载页⾯资源渲染出页⾯.
react和vue的组件树声明⽰例:
编辑页⾯组件的⼀个可⾏⽅式是:动态地给页⾯源码添加组件,然后重新打包⽣成页⾯.如通过可视化的⽅式替换Left组件为NewLeft组件
后,对源码的组件树声明做替换,将Left标签替换为NewLeft标签.
动态组件
⼀些前端框架⽀持动态组件,可以根据组件树声明动态渲染出组件,⽽⽆需在构建前就定义好页⾯的组件树结构.对动态组件页⾯实现可视化
组件编辑时,可以只编辑组件树声明⽂件,然后将组件树声明传⼊提前打包好的页⾯中进⾏渲染.采⽤动态组件可以避免重新打包的耗时,快速
⽣成新页⾯.
Vue根据组件树声明动态地渲染组件⽰例如下图,vue动态组件使⽤compontent关键字来声明,并通过is属性来决定实例化的具体组件.对
于react,组件是⼀个js对象,直接在jsx中按照组件名称返回对应组件就可以了.
编辑页⾯内容
组件化页⾯的页⾯内容编辑,是对页⾯中各个组件的组件属性(Props)进⾏配置.
组件配置数据
⼀个组件包含组件属性(Props),组件状态(State),组件HTML模板(Template),组件业务逻辑(Javascript),组件样式布局(Style)等⼏个部
分.
组件的配置数据通过组件暴露的Props注⼊到组件中,在组件内部Props作为常量分发给State,Template,Javascript,Style等其他组
件内容,由组件内容渲染出视图.
组件差异化
组件是业务内容的呈现载体,不同的业务内容,封装在不同的业务组件中.所以页⾯模板中的组件是差异化的,差异点体现在组件的Props,
State,Template,Javascript,Style等组件内容上.在编辑不同组件内容时,组件配置数据的数据结构是也是差异化的.
如下图⽰的页⾯包含3个组件:头部组件,间隔区组件和天⽓组件.头部组件的配置数据为头部标题和头部图⽚等;间隔去组件的配置数据为间
隔提⽰⽂本等;天⽓组件的配置数据为城市名称.不同的组件需要不同的配置数据.
需要为各组件差异化的配置数据定义数据结构和字段类型,理想的配置数据格式为JSON,因为其格式灵活,⽀持数据嵌套,且前端友好.
组件配置表单
页⾯可视化搭建⼯具的主要使⽤⼈员是运营/产品,如果让运营/产品⼈员直接编辑⽂本格式的组件配置数据,操作不友好并且容易出错.需提
供可视化的编辑⽅式—使⽤Form表单来填⼊配置数据.Form表单是页⾯中数据交互的基本形式,⾮开发⼈员使⽤也没有技术门槛.使⽤
配置表单来填⼊配置数据有2个好处:
配置表单交互功能完善,容易使⽤.
配置表单可以添加校验逻辑,避免填⼊错误的配置数据.
如上图所⽰,由于组件配置数据的差异化,组件配置表单也是差异化的,需为组件库中的每个组件提供相应的配置表单.如果为每个组件都编写
⼀个表单页⾯,⼯作量较⼤;对于复杂的配置项,表单页⾯的编写⼯作量可能会⼤于页⾯组件的开发⼯作量.需要重点考虑提供配置表单的⽅
式.
技术难点2:如何⽤最简单的⽅式⽣成配置数据编辑表单.
组件层级关系
组件树定义了组件间⽗⼦兄弟的层级关系,⽗⼦组件通过数据流和事件进⾏关联:数据从⽗组件的State传递到⼦组件的Props;⼦组件的变
更触发Event通知⽗组件.
层级关系对数据流和布局的影响
页⾯可视化搭建⼯具编辑组件树时,会修改组件数据流.⽽不同组件的Props和State是异构的,在编辑组件树时,需要处理不同组件产⽣层
级关系后对数据流的影响.如下图,⽗组件的State只包含⼦组件A的Props,将⼦组件B挂载为⽗组件的⼦组件,⽗组件没有⼦组件B的
Props,会导致⽆法渲染⼦组件B.
同理,不同的组件有不同的样式布局,编辑组件树时,需要处理不同组件产⽣层级关系后带来的布局影响.
如下图,⼀个⽗组件为⾏内组件,给其添加⼀个块级组件作为⼦组件,渲染后可能会导致⾏内组件被块级组件撑开.
所以设计页⾯可视化搭建⼯具的组件树编辑功能时,需要重点关注组件树的层级关系,解决组件间数据依赖和组件间布局适配问题.页⾯可视
化搭建⼯具需要制订组件嵌套的规则和约束,通过组件嵌套规则来确保可视化编辑后的组件树正常渲染.
技术难点3:如何组织页⾯组件的层级关系.
使⽤组件嵌套的搭建⼯具⽰例:
不嵌套的前端框架组件
可以想象,组件的嵌套会加⼤页⾯可视化搭建⼯具的架构设计和开发难度.
我们注意到,营销活动的主要平台是移动端,移动端页⾯的常⽤的布局策略是:宽度铺满,⾼度滚动.如果前端框架组件都设置为铺满宽度,页
⾯展⽰时组件只需在浏览器垂直⽅向上顺序排列,则组件组合时不需要嵌套—所有组件互为兄弟节点.
这种铺满页⾯宽度的组件,⾮常适合搭建移动端页⾯的场景:在承载页⾯逻辑的同时,使得页⾯的编辑更加简单,使⽤者只需处理组件的顺序,
⽆需处理组件的嵌套.
在移动端,使⽤⾮嵌套组件层级规则的页⾯可视化搭建⼯具有:阿⾥云凤蝶、pipeline等.
阿⾥云凤蝶图⽰:
可视化搭建PC端中后台系统页⾯的⼯具,同样可以采⽤不嵌套组件层级规则,如阿⾥的飞冰:
页⾯预览
页⾯实时预览是页⾯可视化搭建⼯具的必要部分,使⽤⼈员可以在通过页⾯预览来查看和验证可视化编辑的效果.
页⾯预览⽰例:
⽤户的可视化编辑包括修改组件树和修改组件配置数据.如下图,⽤户修改页⾯后,需要重新渲染页⾯组件,得到新的预览页⾯.
实现页⾯预览有两种⽅式:页⾯挂载页⾯挂载和后台渲染后台渲染.
页⾯挂载
页⾯挂载指在编辑器前端页⾯的某个元素节点(div)上渲染出⽤户编辑的效果.页⾯挂载流程图如下:
使⽤页⾯挂载的预览⽅式,编辑器前端页⾯需要提供组件库组件渲染环境(组件库前端框架);为实现前端渲染,编辑器前端源码需引⼊组件库
组件源码,后续组件库更新,编辑器需要同步更新.页⾯挂载⽅式有以下特点:
实现页⾯预览技术⽅案可⾏,实时渲染速度快.
为实现渲染,编辑器的技术选型需和组件库前端框架⼀致.
编辑器源码和组件库源码耦合.
组件库组件渲染后的代码逻辑和样式布局,可能会污染编辑器页⾯.
后台渲染
后台渲染指在后台进⾏⽤户编辑结果页⾯的渲染和⽣成,编辑器前端页⾯通过iframe加载和展⽰结果页⾯.后台渲染流程图如下:
使⽤后台渲染的预览⽅式,编辑器前端页⾯并不需要渲染组件库的组件;甚⾄不需要组件源码,只需知道各个组件的描述信息.后台渲染有以下
特点:
可以实现编辑器和组件库前端框架的分离.
可以实现编辑器和组件库各组件的分离.
可以避免预览页⾯的逻辑和样式污染编辑器环境.
要求后台和组件库提供页⾯后台渲染能⼒,并要求后台渲染速度快,⽤户需要”实时”预览.
难点4:如何实现组件库的快速后台渲染,从⽽实现编辑器和组件库前端框架的分离.
页⾯构建
页⾯构建是组件化前端源码⽣成页⾯资源的必要环节:在开发时需要进⾏开发构建来进⾏页⾯调试;在可视化编辑后可能需要重新构建来⽣成
预览页⾯;在发布前需要进⾏⽣产构建.
在可视化搭建页⾯时需要“实时”预览,要求页⾯页⾯构建效率⾼,实现快速的构建和打包.更进⼀步,后台渲染其实和服务端渲染很像,能否
借鉴服务端渲染的技术思路.
⾃定义模板和组件开发
页⾯可视化搭建⼯具在业务中的落地,需要根据不同的业务场景进⾏业务组件和页⾯模板的⾃定义开发.这对页⾯可视化搭建⼯具提出3个要
求:
页⾯可视化搭建⼯具要⽀持业务现有的前端框架.
避免后续组件和模板⾃定义开发时的⼯作量和割裂感.我们是希望复⽤现有前端框架组件,⽽不是⽤另⼀个前端框架重写⼀遍.
组件和模板的编写⽅式需遵循较简单的编写约定,避免开发⼈员难上⼿和写起来不舒服.
⾃定义模板和组件和在开发模式下进⾏调试和测试.
页⾯可视化搭建⼯具必然会对页⾯模板和页⾯组件的编码⽅式进⾏限定.这要求就页⾯可视化⼯具在页⾯模板和页⾯组件上的约束较少,
减少对前端框架代码组织⽅式的⼊侵点.
理想的活动页⾯可视化搭建⼯具
页⾯可视化搭建⼯具,需要对页⾯做⼀些约定和约束,在可视化搭建时遵循⼯具约定和约束来编辑页⾯.从页⾯可视化搭建⼯具的技术要点中,
可以归纳出活动页⾯可视化搭建⼯具的理想形态.
概述
运营页⾯搭建⼯具,实现基于模板的页⾯⽣成;将页⾯的逻辑功能封装在组件内,声明页⾯配置数据并提供配置表单,通过对配置表单的数据填
充,进⾏少量页⾯编辑就可以完成业务页⾯搭建.
不嵌套的组件
在编辑⾃由度的选择上,选⽤不嵌套的组件.各组件铺满页⾯宽度,在页⾯⾼度⽅向顺序排列.解决组件嵌套带来的数据流问题.不嵌套的组件如
下图各个红框框起来的部分所⽰.
配置表单⾃动⽣成
配置表单的作⽤是⽣成和约束JSON配置数据,业界已有对JSON进⾏描述和⾃动⽣成表单的⽅案—JSONSchema.按照JSON
Schema规范对JSON数据进⾏描述,可以动态渲染出配置表单;且JSONSchema可以对编辑后的数据做格式校验,避免编辑错误.这⽐
编写⼀个表单页⾯更加简单和⾼效.
JSONSchema的语法并不是很精简,云凤蝶的Schema语法等⽅案更简洁,但是云凤蝶的语法没有开源的表单⽣成库⽀持,在开源实践上
还是JSONSchema最佳.
理想活动页⾯搭建⼯具特点
采⽤组件化和页⾯模板实现页⾯⽣成效率的提升.
采⽤不嵌套的组件层级简化数据流和样式布局.
采⽤JSONSchema声明配置数据,⾃动⽣成配置表单.
采⽤后台渲染,使编辑系统与组件前端框架解耦.
在遵循编辑系统约定下,组件可以⾃由拓展,前端框架可以⾃由选择
页⾯可视化搭建框架Pipeline
简介
Pipeline是⼀个开源的页⾯可视化搭建框架,主要由笔者在维护.Pipeline意为流⽔线,期望pipeline像⼯⼚流⽔线⼀样可以⾼效地组装活
动页⾯.
所谓框架,是它实现了页⾯可视化搭建的基本功能,解决了页⾯可视化搭建的基本难点,可以让开发者快速拥有页⾯搭建的能⼒,并⽀持私有部
署和⼆次开发.
项⽬信息:
项⽬地址:/page-pipepline
体验地址:/pipeline-editor/dist/#/
项⽬⽂档:/page-pipepline/pipeline-document
功能Demo
可视化编辑
如动图所⽰,pipeline的可视化编辑能⼒有:
可视化修改页⾯全局配置,如修改页⾯主题颜⾊.
可视化修改页⾯组件内容,如修改组件的图⽚和替换组件⽂本.
实时预览页⾯编辑效果,即刻获得搭建后的页⾯.
页⾯⽀持⽤户交互.
组件编辑
如动图所⽰,pipeline的组件编辑能⼒有:
动态增删页⾯组件.
可视化的组件拖拽,拖拽组件库组件插⼊到页⾯组件列表中.
组件可以包含业务逻辑(⽹络请求和⽤户交互).
⽀持的前端框架
Pipeline实现了编辑器和页⾯前端框架的分离,可以⽀持不同的前端框架.所谓⽀持的前端框架,就是对某个前端框架按照pipeline的约束规
则进⾏组件编辑⽅式和⼯程构建⽅式的改造,使得前端框架页⾯可以在pipeline中可视化搭建.
⽬前已经⽀持Vue,React,和Omi,理论上可以⽀持任意前端框架.
框架特点
开源页⾯可视化搭建框架.
⾃定义页⾯可配置字段.
组件动态增减,组件拖拽.
从页⾯模板快速⽣成业务页⾯.
模板⼯程/编辑器/后台服务解偶.
模板⼯程前端框架⽆关:⽀持vue和react等.
⽀持⾃由拓展页⾯组件,不限制组件样式布局,接⼝调⽤等.
前端⼯程约束少,不限制使⽤其他技术(Redux,SSR,UI库等).
与云凤蝶的对⽐
阿⾥云凤蝶是⽬前市场上可见中最棒最棒的页⾯可视化搭建服务,pipeline的很多⽅⾯和云凤蝶相似,做个简单对⽐:
云凤蝶pipeline云凤蝶pipeline商业化解决⽅案,直接可⽤开源系统,基础的页⾯搭建框架,需要⾃⾏部署⽣成的页⾯,上传的图⽚等只能托管在阿⾥,也限定
域名资源落地和周边功能需要⾃⾏搭建,但是可以100%掌控所有资源配置表单功能⽐较完善配置表单⽐较基础,需要提升模板前端框架采⽤
Nunjucks前端框架采⽤没有约束,已经⽀持vue和react等,业务迁移成本低隐藏了模板的构建处理过程,提供制定的IDE采⽤webpack
构建,模板开发与正常前端项⽬开发⼀致不⽀持⾃定义页⾯级别的配置项⽀持⾃定义页⾯级别的配置项
总的来说:云凤蝶是完整的商业化页⾯可视化搭建系统,适合偏业务运营的公司;pipeline是开源的页⾯可视化搭建框架,适合需要⾃建页⾯
可视化搭建系统且有技术⼈员⽀持的公司.
下⼀步⼯作
完善技术实现⽂档,使⽤⽂档,系统部署⽂档和模板开发⽂档.
提供对更多前端框架的⽀持.
提供更加丰富的可视化交互⽅式.
总结
本⽂讨论了活动页⾯开发的痛点,总结出页可视化搭建⼯具的7个技术要点和4个技术难点,并整理出理想的运营页⾯可视化搭建⼯具,最后介
绍页⾯可视化搭建框架pipeline。