六合开奖现场,马报图,2018今晚开什么码,天下彩免费资料,彩霸王,香港赛马会官方网

最近更新

推荐

Dreamweaver 死了 页面可视化搭建工具仍旧历久弥新

2018-06-05 11:07

  但是现在已经很少人使用 Dreamweaver 了, 其主要原因是页面承载的内容已经和页面源码分离, 由后端接口返回再渲染到页面, 静态页面网站无法承载大量的动态内容.

  Dreamweaver 死了, 但是页面可视化搭建工具依然广泛需要和使用, 所以这个话题依然值得探讨.

  页面可视化搭建的操作对象是页面. 页面是一份 HTML 文档, 不管是静态页面还是动态渲染出来的页面, 在页面上看到的内容, 都是 HTML 文档的一部分.

  对 HTML 文档的实例化和操作, 通过文档对象模型(DOM)来实现, 也可以说页面是一个 DOM. 本文没有严格区分 HTML 和 DOM 这两个概念, 以下行文都用 HTML 这个概念.

  HTML 使用一种树形结构来表示页面, 树的每个节点为一个页面元素或文本节点, 一个页面元素可以包含多个页面元素节点或文本节点. 页面元素通常称为标签, 页面元素类型由 HTML 规范定义.

  从前端开发的角度, 可以认为页面是由 HTMLTree 和 Data 组成, HTMLTree 是页面元素的树形结构, Data 是页面元素的属性或文本节点. 下图中蓝色框所示的节点可以认为是数据.

  为什么从前端开发角度会说页面是 HTMLTree + Data? 举一个常见场景来说明: 在开发新页面时, 我们是可以复制已有页面(好吧, 我就是这样的前端工程师), 然后只修改页面 HTML, 或者只修改数据, 或同时修改 HTML 和数据, 从而完成新页面的开发.

  浏览器请求静态页面, 网络返回的 HTML 源码就是页面渲染完成后的 HTML. 静态页面的源码和页面渲染结果一致:

  当下, 前端页面更多的是有动态逻辑的页面, 在页面中引入和使用动态脚本(Javascript)对页面进行修改和控制.

  浏览器请求动态逻辑页面, 网络返回的 HTML 源码与页面渲染完成后的 HTML 有差异. 动态逻辑页面的源码和渲染结果有差异:

  页面渲染后是一棵 HTML 元素构成的树, 页面的可编辑粒度为 HTML 规范定义的 HTML 元素.

  使用 Web Components 组合 HTML 元素, 实现了功能封装和可复用的页面组件. 在流行的前端框架中, 都提供了组件化的功能, 从前端框架的视角看, 页面是由组件树组成. 这些组件内部自身的 HTML 元素结构、样式和功能逻辑, 并通过组件的 props 获取外部传入的数据, 实现了功能封装和复用.

  有了对页面组成的认知基础, 可以对页面可视化搭建有更多的讨论: 页面可视化搭建是什么? 为什么需要?

  页面可视化搭建, 是用可视化交互的方式对页面的 HTMLTree, Data 和 DynamicLogic 进行增删和修改, 从而实现页面的生成. 页面可视化搭建工具是实现页面可视化编辑的软件工具.

  用页面可视化搭建工具来搭建页面与前端工程师在页面上搬砖, 都是搭建页面, 区别在于实现页面搭建的方式. 做个简单对比:

  任何工具的存在都是更高效地解决问题. 页面可视化搭建工具, 用于解决页面生成的效率问题.可能前端工程师会觉得最有效率的页面生成方式是打代码, 但有搭建页面需求的不只是前端工程师. 而可视化页面搭建工具, 恰恰是面向就缺一个前端工程师的人员, 用于提升他们生成页面的效率.

  页面小白不需要任何页面相关的知识, 不需要了解 HTML/JS/CSS 这些概念, 只要像使用 Word 一样在 H5 制作工具上操作, 就可以做出一个挺漂亮的页面. H5 制作工具很多, 其中 百度H5 做很好不错.

  大多数互联网公司需要做许多的活动页面来承载运营业务. 运营活动页面的特点是: 页面功能大同小异、时间紧、下线快、研发性很比低. 前端工程师无法持续开发无穷无尽的活动页面, 需要采用活动页面可视化搭建工具, 由运营人员/产品人员直接生成活动页面. 研发人员的工作转变为提供满足活动页面业务需要的活动模板.

  在公司内部, 需要做许多的中后台支持系统, 这些系统的管理端一般用 web 页面承载. 那么问题来了, 中后台系统的前端工程, 怎么保障可用性、可性和页面呈现一致性? 这些系统与后台逻辑强关联, 一般由后台开发人员开发; 后台开发人员写代码逻辑是没有问题的, 但是其前端开发能力相对较弱. 所以需要增强他们开发前端页面的能力, 前端开发能力由前端服务化提供.

  前端服务化的第一种方式是提供一套组件库, 如 饿了么的 Element. 组件库一般由前端开发人员封装成模板工程, 模板工程提供公共样式和函数库, 并对编写的代码做校验和约束, 一定程度上降低了前端开发难度, 统一后台人员代码风格. 此时后台开发人员的开发方式为: 在代码中用组件页面, 然后写代码逻辑.

  前端服务化的第二种方式, 是提供页面可视化组装系统, 这个系统输出组装后的前端工程源码. 这样的系统比提供组件库和模板工程的方式走得更远: 通过可视化生成模板工程, 后台开发人员不需要在代码中前端页面, 不需要关注前端组件, 只需要编写代码逻辑. 这种方式可以参考阿里的 ice.

  前端服务化的终极方式, 是直接提供一个开发的 IDE, 将动态逻辑的书写也在 IDE 中完成. 如 美团外卖前端可视化界面组装平台 乐高(), 前端服务化页面搭建工具的死与生().

  更加广泛来说, 为页面小白/运营人员/产品人员提供的页面可视化生成工具, 也是赋予以上人员前端开发的能力. 所以页面可视化搭建, 本质上是前端服务化的一部分. 前端服务化总结, 可以看百度的 前端即服务-通向零成本开发之.

  有了前文对页面的基础认知, 终于进入了本文的正题 -- 页面可视化搭建工具. 前面已经零星讨论过页面可视化搭建工具的定义, 再总结一下: 页面可视化搭建, 是指用可视化交互的方式(对比编写代码的方式), 实现页面的修改或生成; 页面可视化搭建工具, 增强了使用者的前端开发能力, 提升了使用者修改或生成页面的效率.

  思考一个更具体的问题: 当我们讨论页面可视化搭建工具时, 怎么进行描述和讨论? 换个角度提问题: 可以从什么维度对页面可视化搭建工具进行描述和区分?

  下文会对页面可视化搭建工具的区分维度做介绍, 并对每个区分维度提供示例(这些示例不会展开讨论, 且在不同维度下会多次使用同个示例).

  页面可视化搭建工具的系统功能是指该工具在解决特定页面可视化搭建问题上提供的核心能力. 页面是由 HTMLTree, Data 和 DynamicLogic 三部分组成, 一个页面可视化搭建工具提供的能力是编辑页面组成部分之一或多部分. 对基于组件的页面, 其可编辑单元为组件, 此时采用 ComponentTree 概念取代 HTMLTree.

  这类页面搭建工具专注于可视化地编辑页面 HTMLTree 部分, 一般可以对页面做度较高的编辑. 其关键功能在于高度: 几乎可以编辑页面可见的所有元素, 能修改页面结构、页面元素样式和页面数据, 采用类似 Word, Photoshop 的可视化编辑方式. 这类工具一般只适用于生成逻辑比较简单的页面, 其中原因后续会讲. 常说的 H5 制作工具就是指这类工具.

  这类页面搭建工具针对组件化的页面, 主要实现 ComponentTree 的可视化编辑. 其核心功能在于页面布局设计: 在 UI 组件列表中选择合适的组件, 通过拖拉的方式将组件嵌入到页面中, 生成带布局和样式的页面.

  这类页面搭建工具专注于可视化地编辑页面的 Data 部分, 如图片URL、按钮文本、按钮跳转链接等. 这类搭建工具主要针对 HTMLTree 比较固定、能承载复杂业务逻辑的页面. HTMLTree 固定的常见方式是页面组件化, 只需修改页面组件的 Data 就能快速地生成页面. 其核心功能在于快速搭建承载业务逻辑的页面. 通常营销活动页面就采用这种方式来可视化搭建.

  这类页面搭建工具支持在界面上输入逻辑代码, 实现页面 DynamicLogic 编辑, 如后台接口请求逻辑, 业务判断逻辑等. 这些逻辑代码需要有合适的插入点, 一般在事件钩子中提供插入点, 如页面 onload、网络请求状态变更、按钮事件、数据变更等. 做到可以支持编辑 DynamicLogic 是超牛逼的事情, 这类工具对页面的理解最深入, 对开发者的技术能力、前端架构能力和开发能力都要求很高.

  页面可视化搭建工具的面向客群是指工具的的使用客群. 不同的使用客群, 其对页面技术的认知程度、搭建页面的有所不同, 所以可以从工具的面向客群来区分不同工具.

  前端小白是不具有前端知识的人群, 他们对页面可视化搭建工具的是交互性越高越好. 最适合他们的工具是像 Word, Powerpoint, Photoshop 等具有丰富交互功能, 且所见即所得的页面搭建工具. 同时他们也不关心页面最后用什么方式托管到互联网上, 页面编辑完成后要帮他们在公网上托管页面, 并提供页面链接, 方便前端小白将页面发给自己的女朋友.

  运营、产品人员没有开发人员页面开发、逻辑编程的能力, 他们的是可以快速搭建活动、产品页面. 活动、产品页面是承载着业务逻辑的: 如包含领取优惠券功能、背景音乐播放功能、产品购买功能等. 运营、产品对页面可视化搭建的另一个是快速: 一天好几个活动, 怎么快怎么来. 面向运营、产品的可视化搭建工具, 需要将页面的逻辑功能封装在页面区块内, 支持通过点击来选择区块, 然后在表单中编辑区块所需数据, 只对页面进行少量编辑就完成业务页面搭建. 如领取优惠券的页面, 运营、产品只要在表单中填入优惠券的 ID, 然后就快速生成领取该优惠券的页面, 不需要关心优惠券在页面上如何展示和被领取的具体逻辑.

  中后台开发人员具有逻辑编程能力, 但其前端开发能力比较弱. 中后台开发人员的是, 在开发中后台系统的 Web 管理端时, 不需要进行重度的前端页面结构和样式开发, 可以专注在逻辑和数据处理上. 这要求页面可视化搭建工具提供页面搭建的区块, 对区块进行可视化组合来输出一个基本的前端页面; 并在页面搭建工具上提供业务逻辑编写的输入点, 或将基本前端页面源码导出到 IDE 中供中后台开发人员进行业务逻辑的开发.

  页面可视化搭建工具的编辑度, 是指页面可编辑单元的粒度. 前端页面的可编辑单元为 HTML 元素; 从前端页面组件化的角度, 页面可编辑单元为组件. 不同的编辑度的选择, 是可视化搭建工具在不同业务场景下编辑度与编辑效率的平衡.

  编辑度为 HTML 元素的页面搭建工具有以下特点: 可编辑的元素丰富、页面结构灵活、可视化编辑效率较低、业务逻辑封装度较低. 这类工具的可编辑单元为 HTML 元素, 可以编辑元素的文本、样式和行为, 可编辑的元素较丰富; 并且可以组合各种 HTML 元素到页面中, 生成的页面结构灵活; 从生成页面的角度, 编辑出一个页面需要从基本的 HTML 元素开始搭建, 可视化编辑的工作量较大; 一个业务功能的实现, 通常需要渲染多个 HTML 元素, 而这类工具可以增删业务所需的 HTML 元素, 这导致无法固定地承载业务功能, 所以这类编辑工具生成的页面, 业务逻辑封装程度较低.

  编辑度为前端框架组件的页面搭建工具有以下特点: 可编辑的元素依赖搭建工具包含的组件, 可视化编辑效率较高、业务逻辑封装度较高. 这类工具的可编辑单元为前端框架的组件, 这些组件需要开发并导入到页面可视化搭建工具中; 组件的渲染结果包含了多个 HTML 元素, 所以从生成页面的角度, 编辑出一个页面只需要组合组件, 可以较快速完成页面生成; 组件本身承载了特定的业务功能, 所以这类编辑器生成的页面, 业务逻辑封装程度较高. 对于嵌套的组件, 需要重点解决组件数据流和组件布局适配.

  移动端的页面, 常用的布局策略是: 宽度铺满, 高度滚动. 如果前端框架组件都设置为铺满宽度, 页面展示时组件只需在浏览器垂直方向上顺序排列, 则组件组合时候不需要嵌套, 所有组件互为兄弟节点. 这种铺满宽度的组件, 非常适合搭建移动端页面的场景: 在承载页面逻辑的同时, 使得页面的编辑更加简单, 使用者只需要处理组件的顺序, 不需要处理组件的嵌套.

  页面可视化搭建工具, 需要对页面做一些约定和约束, 在可视化搭建时遵循工具约定和约束来编辑页面. 更全面讨论页面可视化搭建工具时, 不只是关注工具本身的功能, 还需要关注工具的依赖和约束, 如页面可视化搭建工具的组件化方式、模板组织方式、编辑功能实现方式等. 从工具开发的角度说, 页面可视化搭建工具是需要架构设计的, 不同工具的区分, 其实是不同的页面可视化搭建框架间的差异.

  在互联网公司中, 广泛运用页面可视化搭建工具来支持运营活动页面的生成, 本章我们只探讨运营页面搭建工具的理想框架.

  页面可视化搭建框架的核心是实现页面的可视化编辑. 运营页面搭建工具, 声明页面配置数据并提供配置表单, 通过对配置表单的数据填充, 实现基于模板的页面生成. 如图所示:

  对页面的可编辑部分, 需要准确描述可编辑部分所需的配置数据; 配置数据是异构的, 不同页面、不同区块的配置数据各不相同. 所以需要对不同页面、不同区块定义各自配置数据的数据结构和字段类型. 理想的配置数据格式为 JSON, 因为其格式灵活, 前端友好; 理想的配置数据描述格式为 JSON Schema, 因为其支持表单动态生成和数据校验.

  组件是对 HTML 元素、元素布局和样式、业务逻辑的封装, 通过组件化的方式, 将页面的搭建为对组件的组合, 大大减低了运营页面生成的编辑工作量, 实现快速搭建承载业务逻辑的运营页面.

  模板是带有默认数据的页面; 对于组件化的页面, 模板是从组件库中选取部分组件, 并带有各个组件的默认数据. 采用模板生成页面, 只需对模板进行少量编辑即可实现页面快速生成.

  编辑系统和组件解偶,组件只需要遵循编辑系统的组织约定, 其具体开发过程和承载的逻辑与编辑系统无关, 支持拓展页面组件. 编辑系统与模板采用的前端框架解偶, 在遵循编辑系统约定下, 可以选择不同的前端框架.

  支持页面 Data 编辑, 面向运营、产品人员, 编辑度为无嵌套的组件.

  支持 ComponentTree 编辑, 面向中后台开发人员, 编辑度为无嵌套的组件.

  使用物料-区块, 非前端开发人员可以快速搭建出可用、符合规范的页面.

  支持 DynamicLogic 编辑, 面向中后台开发人员, 编辑度为可嵌套的组件.

  在美团内部支持了许多业务页面, 没有公网服务, 了解该系统只能通过其介绍文章.

  页面布局结果看起来比较乱, 自定义组件写法比较诡异; 没有融合业务逻辑, 不支持在框架中写页面的代码逻辑.

  支持 ComponentTree 编辑, 面向中后台开发人员, 编辑度为可嵌套的组件.

  支持 ComponentTree 编辑, 面向中后台开发人员, 编辑度为可嵌套的组件.

  了页面可视化搭建框架支持 DynamicLogic 的可行性和设计架构.

  全文结束, 本文对页面可视化搭建的思考和讨论可能还不够完整, 欢迎讨论和补充.

  今天的网站开发已经大不同以往,有很多的东西会对进入此领域的人造成困惑,这就是我们写这系列文章的原因—...

  Linux 的好处之一是它提供了多种方式来处理。你可以打开任件管理器或按下 Ctrl+F,你也可...

  一般LCD显示模块包括三部分:控制器、驱动器和液晶显示屏,同时提供外部引脚供嵌入式处理器连接。以TR...

  瑞萨电子株式会社今日宣布,推出其最新研发的血压监测评估套件,以扩充其健康产品线。该血压监测评估套...

  本文总结了日志、JSON解析、单测、XML解析、字节码处理、数据库连接池、集合类、邮件、加密、嵌入式...

  人们学习HTML和CSS最常见的原因是开始从事web开发。但并不是只有web开发人员才要学习HTML...

  制作 GUI 应用不是一项困难的任务,但需要时间和耐心。幸运的是,UNIX 和 Linux 都带有大...

  我从一篇pix2code论文和另一个应用这种方法的相关项目中获得灵感,决定把我的任务按照图像标注方式...

  RIGOL DS1000系列数字示波器采用的是320×234分辨率的TFT液晶显示器,通过液晶的驱动...

  今天我们主要介绍的数字后端概念是Shape Blockage(形状阻碍物)。主要是用于在Design...

  EETOP网友很多是IC设计相关的,特别是从事IC验证的,经常会编写脚本,以前用的最多的应该是Per...

  超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程...

  JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解...

  HTML文档一般包括两部分:头部区域和主体区域。 HTML文档基本结构由3个标签负责组织:、和。 其...

  运用Dreamweaver的过程中,熟练的使用快捷键,制作网页时能达到事半功倍的效果,在这里我们把D...

  最近在做一个GUI的项目,想试着用FPGA实现一个简单的GUI。硬件基本模块和整个硬件系统已经完成设...

  让我们先回答第二个问题,这个比较简单。每一个程序员都必须了解这个行业的确切态势。基于这样的事实,他们...

  引言 软件系统的用户接口有两类,即命令驱动方式的 交互式问答接口和事件驱动方式的图形用户接口 (GU...

  随着半导体技术和信息技术的飞速发展,各式各样的嵌入式系统产品已经渗入到人们生活的每一个角落。小到手机...

  目前,在GUI自动化测试中,很多软件体系都采用回放技术。这种技术要求测试者通过鼠标和键盘的点击进...

  本文详细地描述了基于MiniGUI的嵌入式系统用户界面关键问题的解决方案,即无抖动动画的实现方案和功...

  近年来手持式设备、消费类电子产品得到了飞速的发展。随着这些产品用户的增多,对其用户界面也提出了越来越...

  ASIX Window GUI的原型系统,并在PDA应用中采用了该GUI。为了方便应用程序员的开发,...

  本文基于Matlab中的GUI设计了跳频OFDM系统,界面设计友好,能够动态地改变系统参数进行仿真,...

  动态HTML,什么是动态HTML 动态超文本标记语言 (DHTML) 大大降低的网络和服务器负载动...

  HTML有什么特点和好处?HTML大全 HTML文档制作不是很复杂,且功能强大,支持不同...

  HTML,HTML标准有哪些? HTML是一种用来网页制作的简单标记语言。但它并不是一种程序语言,...