WeX5王洁:轻混解决跨端问题 H5实现高性能复杂交互

HTML5DW讯 近日,由HTML5梦工场举办的“2016·iWeb峰会·上海站”圆满落幕。此次峰会主办方设置有“主题峰会”、“游戏专场”、“工具专场”、“数字营销专场”四大板块。WeX5应用开发工具首席技术运营官王洁在“工具专场”演讲中称,真正解决应用开发的跨端问题不但需要用混合模式,还应该是“轻架构”的混合模式,即真正的HTML5 App。

王洁.jpg

WeX5应用开发工具首席技术运营官王洁

重混架构瓶颈很明显

王洁谈到,在app早期,所有的开发者,尤其是前端开发者,在开发App时,由于安卓和苹果的操作系统技术框架完全不同,所编写的代码无法“一码两用”。此时,混合模式开发即Hybrid app开发成为比较自然的选择。但早期的混合架构属于“重混”模式,虽然有其优点,但缺点也非常明显。

当时,网络速度比较慢,手机硬件配置也有限,尤其是Web的运行性能确实有比较大的瓶颈,以至于用户打开一个页面都不是很方便,高性能的Web交互更是难以实现。此时,“重混”架构这种依赖Native UI的混合框架,本着“Web不够,就Native来凑”的核心思路,的确提升了交互体验,但同时也带来了无法回避的显著缺点:Web和Native技术的交叉混杂让开发者的编程和调试都很不方便;尤其是无法直接运行在微信这类超级App平台之上,更是“重混”App的致命硬伤。 

轻混适时走到台前

王洁进一步表示,现如今,移动设备性能越来越好,各移动浏览器对HTML5标准的支持越来越完善,“HTML5已经可以实现高性能的复杂交互”;同时,随着各种智能终端和微信等轻应用平台的强势崛起,彻底跨端已经成为App开发更为迫切的需求, 而要实现真正跨端(跨Android、iOS、微信甚至其他轻应用平台),Hybrid APP就必须坚持几个原则:UI部分必须用纯Web技术,完全采用H5技术;在底层的设备接口上,确实是JS无法完成的原生部分,需要Native技术来弥补的,也必须坚持Native技术不去侵入UI。这样一个框架就是“轻混”Hybrid APP框架。“轻混”框架才是真正的HTML5 APP框架,在技术上更轻量,成本更低、也更容易推广,能真正做到只需一次开发就能跨Android、iOS和微信等各种端发布。“轻混”才是Hybrid APP技术发展的必然方向。

如何构建轻混框架?

王洁以WeX5应用开发工具为例详细解释了轻混架构的构建思路:HTML5 APP这种轻混框架,首先要有个外壳,然后在其中内置一个浏览器,在浏览器里面提供网页运行环境,同时在这个外壳上提供很多插件,可以让网络通过JS进行操作;微信也是这种架构。简而言之,具体进行HTML5 App这种“轻混”架构设计时,要解决两个框架问题,一个是HTML5框架,一个是Native框架。

关于Native框架,即外壳的选择,王洁表示,WeX5开发工具选择的是Cordova。首先,Cordova是事实上的国际主流方案。包括微软/IBM/英特尔等业内国际主要厂商在内都采用的是Cordova。其次,Cordova的插件框架是开放的,很容易定义,除了它已经自带很多插件以外,开发者很容易为自己的原生硬件引入一个新的Cordova插件。另外还有一个重要原因,Cordova本身就是典型的干净轻混架构,是不侵入UI的,只负责原生这部分。

而在页面框架即是HTML5框架的选择上,王洁介绍到,WeX5采用了SPA单页应用框架。在SPA单页应用框架中,整个页面框架由一个外壳管理页面和多个页面片段组成,每个页面其实都是由外壳页面用Ajax技术动态加载的页面片段。Ajax技术大大提升了页面的加载速度,在单页框架中可以轻松实现流畅的多页转场动画。在组件框架的实现技术上,为彻底解决页面组件动态创建HTML导致页面多次渲染的性能瓶颈,WeX5采用了组件静态编译技术,在页面编译时生成所有静态组件的HTML片段,大大提升了复杂页面的加载速度。“SPA单页框架”结合“组件静态编译技术”,达成了WeX5可视化设计的复杂交互页面可以在运行时“极速秒开”。