潘征:HTML5移动页面构建平台技术架构

7月19日,由HTML5梦工场主办的第四届HTML5峰会暨攻城师嘉年华(iWeb峰会)首站在上海开幕,会上百度高级研发工程师潘征发表了《HTML5移动页面构建平台技术架构》主题演讲。

以下是演讲实录:

HTML5移动页面构建平台技术架构 (1).001

首先感谢一下坚持到最后的各位,我今天给大家带来的是,H5移动页面构建平台技术架构。刚才木疙瘩的嘉宾说得比较清楚,截止到我截这个图的时候,市面上的工具达到40款之多。这一类页面制作工具的架构。如果自己公司想对1/40产品进行优化的话,可以借鉴我们的经验。

HTML5移动页面构建平台技术架构 (1).002

我们有类似功能的平台,这个平台没有开放。我们可以看一下截图,首先登录有一个Legend编辑页,经过各种调研,最后来到一个发布页,点击发布之后我们就产生了H5移动页面,这个是我们内部平台实现的功能。

HTML5移动页面构建平台技术架构 (1).003

我们为什么要做这样的平台,撇开市面上有很多问题不谈,这个平台对我们内部的意义,我们首先进行历史的回顾。去年7-8月期间,微信朋友圈迎来了一次H5热潮,大家对当时大热的游戏神经猫非常的熟悉,在这一次热潮当中,我们部门做了两个有代表性的案例。其中一个疯狂手指,就是无脑小游戏,另一个是移动互联网趋势报告,做了这两个案例之后,我们百度内部逐渐认识到H5这个东西在宣传方面的作用。H5这个市场需求变化也逐渐从原本需要精良优质、精良策划、轰动性大流量传播,逐渐转换到短平快、紧跟热点、小流量多次传播。H5这个对很多人来说都很新鲜,当时无论你做得好坏,都可以在微信里面进行病毒式的传播。

HTML5移动页面构建平台技术架构 (1).004

HTML5移动页面构建平台技术架构 (1).005

HTML5移动页面构建平台技术架构 (1).006

但是H5对于企业的一套宣传方案来说,已经变成一个不可或缺一部分,所谓企业整套宣传方案,举例来说,比如说宝马公司出了一款新的汽车,马上在他宣传这款汽车的时候,他的宣传方案肯定包括递推、传统电视广告、PC端宣传、H5宣传,那么H5担任的角色就是企业一套宣传方案中的其中一部分。很多传统企业做整套宣传的时候,没有把H5考虑在内的,但是现在H5对于每次宣传来说,都已经算是一个标配的一部分,所以这个就是去年7月份到现在H5在整套宣传方案中的一个地位的变化。

HTML5移动页面构建平台技术架构 (1).007

HTML5移动页面构建平台技术架构 (1).008

HTML5移动页面构建平台技术架构 (1).009

HTML5移动页面构建平台技术架构 (1).010

总的来说,Legend平台对我们的意义首先是H5移动页面对质的需求下降,对量的时效的需求上升,现在你做了精品的话,传播效果不会造成太大的轰动,目前H5这个,基本上你是一个标配,但是大家都不会非常期望你每发一个都会引起轰动的效果,所以对量的也就上升了。我们起到减少FE的重复劳动,告别切图工的生活。传统中,当然我们做H5的时候,需要FE和UE紧密合作,我们做这个工作的时候,到最后两三天都有UE指着我的屏幕说这里调快一点,那里调慢一点,我就跟着他的话不断调。现在UE调其他的东西,他可以自己动手,让UE可以直接实现设想的动效创意,避免沟通损失。最后当PM想要“改下这个按钮的颜色我看看”时,这种情况作为FE是非常讨厌的,现在我们内部利用这个平台,如果说PM想要改一点什么,看看不爽再改回来的时候,他自己去操作,现在我们工作流程相关UE和FE把一个层面做90%的程度,剩下的交给PM自己去做自己想要的效果。

HTML5移动页面构建平台技术架构 (1).011

HTML5移动页面构建平台技术架构 (1).012

HTML5移动页面构建平台技术架构 (1).013

HTML5移动页面构建平台技术架构 (1).014

进入我们今天的主题,对于内部来说,整个平台技术架构,首先我说这个数据格式,对于整个平台来说,他分为两个状态,一个就是说从数据库把这个数据读出来做一个编辑的状态,最后是我把这个发布之后,外面的人看到的状态。他是统一的格式,在我们系统里面是大的数据结构存储,这个结构大家可以看一下,包括一些时间和永无信息,以及最总要的data,他包括attrubutes和pages,pages也就是每一页特有的属性和相关组件,包括页面上的音频的组件。

HTML5移动页面构建平台技术架构 (1).015

HTML5移动页面构建平台技术架构 (1).016

HTML5移动页面构建平台技术架构 (1).017

编辑时数据通信流程很简单,都写明了我就不细讲了,运行就是访问一下H5,然后解析一下。对于编辑器技术要点,,用Directive实现模块划分,这三个部分都是通过同一份数据。

HTML5移动页面构建平台技术架构 (1).018

HTML5移动页面构建平台技术架构 (1).019

HTML5移动页面构建平台技术架构 (1).020

我们在开发的,左边这个列表以及中间的区域是由两个不同的人开发的,这两个不同人分别开发不同的组件。

HTML5移动页面构建平台技术架构 (1).021

利用Angular的双向数据绑定来实现UI和数据的同步,利用Angular数据绑定,当数据比较大的时候,可能一次copy操作需要花费几百毫秒,我们的方法是事件稀释+数据精简,数据精简主要就是把一些不会发生变化的部分给精简掉,通过这样的方式减少Angular耗费的时间。

HTML5移动页面构建平台技术架构 (1).022

HTML5移动页面构建平台技术架构 (1).023

HTML5移动页面构建平台技术架构 (1).024

第二个,就是QSON Schema的作用,通过一系列配置生成右边修改属性用的面板,当我点到页面的主件的时候,右边可能会调大小,这个面本都是不一样的,如果是一个图片的话,他需要修改的图片的链接属性,对于各不相同的面板我们不能手动编写,我们就用了JSON Schema来编写。

HTML5移动页面构建平台技术架构 (1).025

HTML5移动页面构建平台技术架构 (1).026

最后是我们部门的jdists,基于代码块粒度的打包框架。举一个简单的例子,比如说一个表单组件,当我编辑的时候,希望它是disabled的,为了区别这两个状态,我会在代码里面加上这样一行判断,如果他在编辑状态我就设为disabled,我直接点发布之后,这段短码在发布之后是没有用的,所以在代码里面通过这个框架以及相应的数字标签对代码进行一些洗。

HTML5移动页面构建平台技术架构 (1).027

HTML5移动页面构建平台技术架构 (1).028

HTML5移动页面构建平台技术架构 (1).029

HTML5移动页面构建平台技术架构 (1).030

HTML5移动页面构建平台技术架构 (1).031

这个采用的一些技术方案,最后回答之前展示过的问题,市面上已经有很多类似产品,我们为什么还要自己开发这样的平台,已经写明了我就不念了。

最后由于我没有带礼物,只好舍身卖一下萌,算是给大家的福利。我的分享就到这里。

HTML5移动页面构建平台技术架构 (1).032