页面可视化建立, 是一个历久弥新的论题. 更广义上讲, 页面是 GUI 的一部分, GUI 的迁延生成在各种开发东西上很常见, 如 Android Studio, Xcode, Visual Studio 等. 前端页面早在十几年前就能用 Dreamweaver, Frontpage 等东西可视化建立出来.
可是现在现已很少人运用 Dreamweaver 了, 其首要原因是页面承载的内容现已和页面源码别离, 由后端接口回来再烘托到页面, 静态页面网站无法承载许多的动态内容.
Dreamweaver 死了, 可是页面可视化建立东西仍然广泛需求和运用, 所以这个论题仍然值得评论.
Dreamweaver 操作页面示例:
文章内容
页面构成和页面组件化.
页面可视化建立东西的必要性.
页面可视化建立东西的差异维度.
业界的实践实例.
页面
页面是 HTML / DOM
页面可视化建立的操作目标是页面. 页面是一份 HTML 文档, 不管是静态页面仍是动态烘托出来的页面, 在页面上看到的内容, 都是 HTML 文档的一部分.
对 HTML 文档的实例化和操作, 经过文档目标模型(DOM)来完结, 也能够说页面是一个 DOM. 本文没有严厉差异 HTML 和 DOM 这两个概念, 以下行文都用 HTML 这个概念.
HTML 运用一种树形结构来表明页面, 树的每个节点为一个页面元素或文本节点, 一个页面元素能够包括多个页面元素节点或文本节点. 页面元素一般称为标签, 页面元素类型由 HTML 标准界说.
HTML 结构示例:
页面是 HTMLTree + Data
从前端开发的视点, 能够以为页面是由 HTMLTree 和 Data 组成, HTMLTree 是页面元素的树形结构, Data 是页面元素的特色或文本节点. 下图中蓝色框所示的节点能够以为是数据.
为什么从前端开发视点会说页面是 HTMLTree + Data? 举一个常见场景来阐明: 在开发新页面时, 咱们是能够仿制已有页面(好吧, 我便是这样的前端工程师), 然后只修正页面 HTML, 或许只修正数据, 或一起修正 HTML 和数据, 然后完结新页面的开发.
静态页面和动态逻辑页面
上一节说页面的由 HTMLTree 和 Data 组成, 评论的是静态页面.
浏览器恳求静态页面, 网络回来的 HTML 源码便是页面烘托完结后的 HTML. 静态页面的源码和页面烘托成果共同:
当下, 前端页面更多的是有动态逻辑的页面, 在页面中引进和运用动态脚本(Javascript)对页面进行修正和操控.
浏览器恳求动态逻辑页面, 网络回来的 HTML 源码与页面烘托完结后的 HTML 有差异. 动态逻辑页面的源码和烘托成果有差异:
页面组件化
页面烘托后是一棵 HTML 元素构成的树, 页面的可修正粒度为 HTML 标准界说的 HTML 元素.
运用 Web Components 组合 HTML 元素, 完结了功用封装和可复用的页面组件. 在盛行的前端结构中, 都供给了组件化的功用, 从前端结构的视角看, 页面是由组件树组成. 这些组件内部保护自身的 HTML 元素结构、款式和功用逻辑, 并经过组件的 props 获取外部传入的数据, 完结了功用封装和复用.
Vue 组件树示例:
并没有评论 CSS
在以上的章节中, 咱们并没有评论决定页面款式的 CSS. 由于凭借 Javascript 的动态逻辑, CSS 能够归入到 Data 的规模: 经过对页面元素 style attribute 的修正, 或将 CSS 特色动态添加到 <style> 标签中, 能够完结对页面元素款式的修正.
页面可视化建立
有了对页面组成的认知根底, 能够对页面可视化建立有更多的评论: 页面可视化建立是什么? 为什么需求?
是什么
如前文所论述, 动态逻辑页面分解为 HTMLTree, Data 和 DynamicLogic. 前端开发工程师开发前端页面的进程, 本质上是用编程东西(IDE)对页面的 HTMLTree, Data 和 DynamicLogic 进行增删和修正.
页面可视化建立, 是用可视化交互的方法对页面的 HTMLTree, Data 和 DynamicLogic 进行增删和修正, 然后完结页面的生成. 页面可视化建立东西是完结页面可视化修正的软件东西.
用页面可视化建立东西来建立页面与前端工程师在页面上搬砖, 都是建立页面, 差异在于完结页面建立的方法. 做个简略比照:
为什么需求
任何东西的存在都是更高效地处理问题. 页面可视化建立东西, 用于处理页面生成的功率问题.或许前端工程师会觉得最有功率的页面生成方法是打代码, 但有建立页面需求的不只是前端工程师. 而可视化页面建立东西, 恰恰是面向"就缺一个前端工程师"的人员, 用于提高他们生成页面的功率.
咱们能够从一些运用场景来窥视页面可视化建立东西的运用场合.
页面小白做 H5
页面小白不需求任何页面相关的常识, 不需求了解 HTML/JS/CSS 这些概念, 只需像运用 Word 相同在 H5 制造东西上操作, 就能够做出一个挺美丽的页面. H5 制造东西许多, 其间 百度H5 做很好不错.
如: 小陈女票要生日了, 小陈为女票做了一个有构思的生日祝愿页面:
营销活动页面建立
大多数互联网公司需求做许多的活动页面来承载运营事务. 运营活动页面的特色是: 页面功用迥然不同、时刻紧、下线快、研制性很比低. 前端工程师无法继续开发无穷无尽的活动页面, 需求选用活动页面可视化建立东西, 由运营人员/产品人员直接生成活动页面. 研制人员的作业转变为供给满意活动页面事务需求的活动模板.
如: 抽奖活动页面的可视化建立:
中后台体系开发
在公司内部, 需求做许多的中后台支撑体系, 这些体系的办理端一般用 web 页面承载. 那么问题来了, 中后台体系的前端工程, 怎样确保可用性、可保护性和页面出现共同性? 这些体系与后台逻辑强相关, 一般由后台开发人员开发; 后台开发人员写代码逻辑是没有问题的, 可是其前端开发才能相对较弱. 所以需求增强他们开发前端页面的才能, 前端开发才能由前端服务化供给.
前端服务化的第一种方法是供给一套组件库, 如 饿了么的 Element. 组件库一般由前端开发人员封装成模板工程, 模板工程供给公共款式和函数库, 并对编写的代码做校验和束缚, 必定程度上降低了前端开发难度, 一致后台人员代码风格. 此刻后台开发人员的开发方法为: 在代码顶用组件凑集页面, 然后写代码逻辑.
前端服务化的第二种方法, 是供给页面可视化拼装体系, 这个体系输出拼装后的前端工程源码. 这样的体系比供给组件库和模板工程的方法走得更远: 经过可视化生成模板工程, 后台开发人员不需求在代码中凑集前端页面, 不需求重视前端组件, 只需求编写代码逻辑. 这种方法能够参阅阿里的 ice.
阿里 ice 示例:
前端服务化的终极方法, 是直接供给一个开发的 IDE, 将动态逻辑的书写也在 IDE 中完结. 如 美团外卖前端可视化界面拼装渠道 —— 乐高（https://tech.meituan.com/waimai-lego.html）, 前端服务化——页面建立东西的死与生（https://www.cnblogs.com/sskyy/p/6496287.html）.
美团乐高示例:
前端服务化
愈加广泛来说, 为页面小白/运营人员/产品人员供给的页面可视化生成东西, 也是赋予以上人员前端开发的才能. 所以页面可视化建立, 本质上是前端服务化的一部分. 前端服务化总结, 能够看百度的 前端即服务-通向零本钱开发之路.
页面可视化建立东西差异维度
有了前文对页面的根底认知, 总算进入了本文的正题 — 页面可视化建立东西. 前面现已零散评论过页面可视化建立东西的界说, 再总结一下: 页面可视化建立, 是指用可视化交互的方法(比照编写代码的方法), 完结页面的修正或生成; 页面可视化建立东西, 增强了运用者的前端开发才能, 提高了运用者修正或生成页面的功率.
考虑一个更详细的问题: 当咱们评论页面可视化建立东西时, 怎样进行描绘和评论? 换个视点提问题: 能够从什么维度对页面可视化建立东西进行描绘和差异?
页面可视化建立东西的差异维度包括:
体系功用
面向客群
修正自在度
下文会对页面可视化建立东西的差异维度做介绍, 并对每个差异维度供给示例(这些示例不会展开评论, 且在不同维度下会屡次运用同个示例).
体系功用
页面可视化建立东西的体系功用是指该东西在处理特定页面可视化建立问题上供给的中心才能. 页面是由 HTMLTree, Data 和 DynamicLogic 三部分组成, 一个页面可视化建立东西供给的才能是修正页面组成部分之一或多部分. 对依据组件的页面, 其可修正单元为组件, 此刻选用 ComponentTree 概念替代 HTMLTree.
HTMLTree 修正
这类页面建立东西专心于可视化地修正页面 HTMLTree 部分, 一般能够对页面做自在度较高的修正. 其要害功用在于高自在度: 简直能够修正页面可见的一切元素, 能自在修正页面结构、页面元素款式和页面数据, 选用相似 Word, Photoshop 的可视化修正方法. 这类东西一般只适用于生成逻辑比较简略的页面, 其间原因后续会讲. 常说的 H5 制造东西便是指这类东西.
如: 百度H5、iH5
ComponentTree 修正
这类页面建立东西针对组件化的页面, 首要完结 ComponentTree 的可视化修正. 其间心功用在于页面布局规划: 在 UI 组件列表中挑选适宜的组件, 经过迁延的方法将组件嵌入到页面中, 生成带布局和款式的页面.
如: ice 阿里飞冰、vue-layout
vue-layout 示例:
页面 Data 修正
这类页面建立东西专心于可视化地修正页面的 Data 部分, 如图片URL、按钮文本、按钮跳转链接等. 这类建立东西首要针对 HTMLTree 比较固定、能承载杂乱事务逻辑的页面. HTMLTree 固定的常见方法是页面组件化, 只需修正页面组件的 Data 就能快速地生成页面. 其间心功用在于快速建立承载事务逻辑的页面. 一般营销活动页面就选用这种方法来可视化建立.
如: 阿里云凤蝶、开源的 pipeline
阿里云凤蝶示例:
DynamicLogic 修正
这类页面建立东西支撑在界面上输入逻辑代码, 完结页面 DynamicLogic 修正, 如后台接口恳求逻辑, 事务判别逻辑等. 这些逻辑代码需求有适宜的刺进点, 一般在作业钩子中供给刺进点, 如页面 onload、网络恳求状况改变、按钮作业、数据改变等. 做到能够支撑修正 DynamicLogic 是超牛逼的作业, 这类东西对页面的了解最深化, 对开发者的技能才能、前端架构才能和开发才能都要求很高.
如: 前端服务化——页面建立东西的死与生
体系功用组合
还有其他体系功用的组合, 能够归纳上面的典型类别来做评论.
面向客群
页面可视化建立东西的面向客群是指东西的的运用客群. 不同的运用客群, 其对页面技能的认知程度、建立页面的诉求有所不同, 所以能够从东西的面向客群来差异不同东西.
前端小白
前端小白是不具有前端常识的人群, 他们对页面可视化建立东西的诉求是交互性越高越好. 最合适他们的东西是像 Word, Powerpoint, Photoshop 等具有丰厚交互功用, 且所见即所得的页面建立东西. 一起他们也不关怀页面最后用什么方法保管到互联网上, 页面修正完结后要帮他们在公网上保管页面, 并供给页面链接, 便利前端小白将页面发给自己的女朋友.
如页面界的 Photoshop:
运营/产品
运营、产品人员没有开发人员页面开发、逻辑编程的才能, 他们的诉求是能够快速建立活动、产品页面. 活动、产品页面是承载着事务逻辑的: 如包括收取优惠券功用、背景音乐播映功用、产品购买功用等. 运营、产品对页面可视化建立的另一个诉求是"快速": 一天好几个活动, 怎样快怎样来. 面向运营、产品的可视化建立东西, 需求将页面的逻辑功用封装在页面区块内, 支撑经过点击来挑选区块, 然后在表单中修正区块所需数据, 只对页面进行少数修正就完结事务页面建立. 如收取优惠券的页面, 运营、产品只需在表单中填入优惠券的 ID, 然后就快速生成收取该优惠券的页面, 不需求关怀优惠券在页面上怎么展现和被收取的详细逻辑.
如, 开源项目 pipeline:
中后台开发人员
中后台开发人员具有逻辑编程才能, 但其前端开发才能比较弱. 中后台开发人员的诉求是, 在开发中后台体系的 Web 办理端时, 不需求进行重度的前端页面结构和款式开发, 能够专心在逻辑和数据处理上. 这要求页面可视化建立东西供给页面建立的区块, 对区块进行可视化组合来输出一个根本的前端页面; 并在页面建立东西上供给事务逻辑编写的输入点, 或将根本前端页面源码导出到 IDE 中供中后台开发人员进行事务逻辑的开发.
如: ice 阿里飞冰
前端工程师
要啥页面可视化建立东西, 抓起键盘就开端干.
修正自在度
页面可视化建立东西的修正自在度, 是指页面可修正单元的粒度. 前端页面的可修正单元为 HTML 元素; 从前端页面组件化的视点, 页面可修正单元为组件. 不同的修正自在度的挑选, 是可视化建立东西在不同事务场景下修正自在度与修正功率的平衡.
修正自在度为 HTML 元素(左)与自在度为组件(右)的示例:
修正自在度为 HTML 元素
修正自在度为 HTML 元素的页面建立东西有以下特色: 可修正的元素丰厚、页面结构灵敏、可视化修正功率较低、事务逻辑封装度较低. 这类东西的可修正单元为 HTML 元素, 能够修正元素的文本、款式和行为, 可修正的元素较丰厚; 而且能够组合各种 HTML 元素到页面中, 生成的页面结构灵敏; 从生成页面的视点, 修正出一个页面需求从根本的 HTML 元素开端建立, 可视化修正的作业量较大; 一个事务功用的完结, 一般需求烘托多个 HTML 元素, 而这类东西能够自在增删事务所需的 HTML 元素, 这导致无法固定地承载事务功用, 所以这类修正东西生成的页面, 事务逻辑封装程度较低.
如: iH5、vvveb
vvveb 示例:
修正自在度为前端结构组件
修正自在度为前端结构组件的页面建立东西有以下特色: 可修正的元素依靠建立东西包括的组件, 可视化修正功率较高、事务逻辑封装度较高. 这类东西的可修正单元为前端结构的组件, 这些组件需求开发并导入到页面可视化建立东西中; 组件的烘托成果包括了多个 HTML 元素, 所以从生成页面的视点, 修正出一个页面只需求组合组件, 能够较快速完结页面生成; 组件自身承载了特定的事务功用, 所以这类修正器生成的页面, 事务逻辑封装程度较高. 关于嵌套的组件, 需求要点处理组件数据流和组件布局适配.
如: Vue-Layout
vue-layout 示例:
不嵌套的前端结构组件
移动端的页面, 常用的布局战略是: 宽度铺满, 高度翻滚. 假如前端结构组件都设置为铺满宽度, 页面展现时组件只需在浏览器笔直方向上次序排列, 则组件组合时分不需求嵌套, 一切组件互为兄弟节点. 这种铺满宽度的组件, 十分合适建立移动端页面的场景: 在承载页面逻辑的一起, 使得页面的修正愈加简略, 运用者只需求处理组件的次序, 不需求处理组件的嵌套.
如: 阿里云凤蝶、pipeline
pipeline 示例:
抱负的页面可视化建立结构
页面可视化建立东西, 需求对页面做一些约好和束缚, 在可视化建立时遵从东西约好和束缚来修正页面. 更全面评论页面可视化建立东西时, 不只是重视东西自身的功用, 还需求重视东西的依靠和束缚, 如页面可视化建立东西的组件化方法、模板安排方法、修正功用完结方法等. 从东西开发的视点说, 页面可视化建立东西是需求架构规划的, 不同东西的差异, 其实是不同的页面可视化建立结构间的差异.
在互联网公司中, 广泛运用页面可视化建立东西来支撑运营活动页面的生成, 本章咱们只评论运营页面建立东西的抱负结构.
页面可视化建立结构的中心是完结页面的可视化修正. 运营页面建立东西, 声明页面装备数据并供给装备表单, 经过对装备表单的数据填充, 完结依据模板的页面生成. 如图所示:
可视化修正
装备数据
对页面的可修正部分, 需求精确描绘可修正部分所需的装备数据; 装备数据是异构的, 不同页面、不同区块的装备数据各不相同. 所以需求对不同页面、不同区块界说各自装备数据的数据结构和字段类型. 抱负的装备数据格局为 JSON, 由于其格局灵敏, 前端友爱; 抱负的装备数据描绘格局为 JSON Schema, 由于其支撑表单动态生成和数据校验.
装备表单生成
选用 JSON Schema, 简略生成装备表单, 只需依照 JSON Schema 对 JSON 数据的描绘, 能够动态烘托出装备表单. 而且能够选用 JSON Schema 对修正后的数据做格局校验, 防止修正过错.
如装备表单主动生成东西 json-editor:
组件化
组件是对 HTML 元素、元素布局和款式、事务逻辑的封装, 经过组件化的方法, 将页面的建立转化为对组件的组合, 大大减低了运营页面生成的修正作业量, 完结快速建立承载事务逻辑的运营页面.
如 pipeline 的页面组件化:
模板
模板是带有默许数据的页面; 关于组件化的页面, 模板是从组件库中选取部分组件, 并带有各个组件的默许数据. 选用模板生成页面, 只需对模板进行少数修正即可完结页面快速生成.
与修正体系解偶
修正体系和组件解偶，组件只需求遵从修正体系的安排约好, 其详细开发进程和承载的逻辑与修正体系无关, 支撑自在拓宽页面组件. 修正体系与模板选用的前端结构解偶, 在遵从修正体系约好下, 能够挑选不同的前端结构.
抱负的运营页面可视化建立结构
选用 JSON Schema 声明装备数据, 装备表单主动生成.
选用组件化和页面模板完结页面生成功率的提高.
修正体系与组件、前端结构、模板解耦.
在遵从修正体系约好下, 组件能够自在拓宽, 前端结构能够自在挑选.
页面可视化建立东西举例
罗列一些页面可视化搭东西, 并顺便少数点评.
阿里云凤蝶
移动建站渠道
支撑页面 Data 修正, 面向运营、产品人员, 修正自在度为无嵌套的组件.
现在制造运营、活动页面功用上最好的东西.
供给页面建立的模板, 并支撑自界说模板.
装备表单依据 Schema 生成, 装备表单操作功用完善.
ice 阿里飞冰
飞冰 – 让前端开发简略而友爱
支撑 ComponentTree 修正, 面向中后台开发人员, 修正自在度为无嵌套的组件.
运用"物料-区块", 非前端开发人员能够快速建立出可用、契合标准的页面.
页面以源码方法输出.
前端服务化的一种方法.
百度H5
构思，绝不相同
支撑 HTMLTree 修正, 面向前端小白, 修正自在度为 HTML 元素.
做 H5 的好东西, 功用上很强壮, 对动画的修正功用做到详尽.
美团外卖前端可视化界面拼装渠道 —— 乐高
支撑 DynamicLogic 修正, 面向中后台开发人员, 修正自在度为可嵌套的组件.
前端服务化的一种方法.
在美团内部支撑了许多事务页面, 没有公网服务, 了解该体系只能经过其介绍文章.
esview
Drag vue dynamic components to build your page，generate vue code.
开源项目, 仿照美团点评的乐高.
完好的可视化页面建立结构, 面向中后台开发人员.
页面布局成果看起来比较乱, 自界说组件写法比较怪异; 没有交融事务逻辑, 不支撑在结构中写页面的代码逻辑.
gaea-editor
Design websites in your browser
开源项目.
支撑 ComponentTree 修正, 面向中后台开发人员, 修正自在度为可嵌套的组件.
页面的迁延生成, 完结得很完好.
用于页面规划, 所以倾向页面元素的款式操控.
技能文章对可视化建立东西数据流有深化了解: 可视化在线修正器架构规划.
Vue-Layout
依据UI组件的Vue可视化布局、生成.vue代码的东西。
开源项目.
支撑 ComponentTree 修正, 面向中后台开发人员, 修正自在度为可嵌套的组件.
东西的运用体会作用不错.
gen
依据接口生成页面，削减重复性作业
开源项目, 用起来感觉不错.
体系中有好几个概念, 开端比较难上手.
其他
请运用要害字 website-builder, site-builder 等要害字进行查找.
VvvebJs
grapesjs
Maha
有赞微页面
X-Page-Editor-Vue
业界实践
罗列一些业界在页面可视化搭东西上的实践, 并顺便少数点评.
前端服务化——页面建立东西的死与生
支撑 DynamicLogic 的页面可视化建立 IDE.
讲解了页面可视化建立结构支撑 DynamicLogic 的可行性和规划架构.
作者在前端结构和 IDE 方面写了好几篇文章, 很深化.
腾讯IMWeb: 积木体系，将运营体系做到极致
2015年的文章! 彻底说到点上.
简略易用的、可视化的可修正页面.
通用的、简洁地组件接入机制.
组件: 开发进程和体系无关, 逻辑和体系无关.
美团外卖前端可视化界面拼装渠道 —— 乐高
把体系架构将得很清楚, 有学习含义.
对页面组成做了剖析, 论述了可视化装备的原理.
前端即服务-通向零本钱开发之路
百度的前端服务化实践, 都在这一篇.
可视化在线修正器架构规划
可视化在线修正器归于前端开发引擎, 前端进入了前端工业时代.
深化评论了组件数据流.
百度外卖怎么做到前端开发装备化
PPT 将原理和架构讲得很清楚.
运用流程图很明晰.
项目开源了 — block, 试用起来功用比较粗陋.
转转运营活动高效开发有哪些诀窍
依据组件的页面生成体系-魔方, 选用 npm 办理组件.
QQ会员: 怎么确保H5页面高质量低本钱快速生成
内部 ET 渠道, 包括活动办理的其他功用.
vue-design 桌面端页面可视化构建程序
esview — 这或许是现在最好的vue代码生成东西
总结
页面由 HTMLTree, Data, DynamicLogin 组成.
页面可视化建立东西用于提高各类人员的页面建立功率.
页面可视化建立其实是前端服务化的方法.
页面可视化建立东西需求平衡自在度和功率.
组件和模板是页面可视化建立结构的中心.
全文完毕, 本文对页面可视化建立的考虑和评论或许还不行完好, 欢迎评论和弥补.
