【转】支付宝“技术风云会”:HTML5引发的移动开发变革

Jym 2012-05-13

在刚刚结束的支付宝“技术风云会”论坛上,Html5再次成为5位与会者的关注焦点。会中也有人问及:native app 和mobile web app哪个将成为主流? 又或者html5应用能否替代native app?

确实,html5技术再不断的完善,也必将做更多的事情,但个人认为,native app在这几年还将是主流,它与生俱来的高用户体验、华丽的用户界面、较低的流量成本,并且能访问本地资源,但native app有着较为致命的缺点:较差的不同平台的可移植性、较高的多个版本的升级维护成本、盈利模式的局限性。而web app在很大程度上与native app 形成互补,较低的开发成本、跨平台移植、升级更新更容易等等。

所以,在未来几年web app 和 native app结合可能是一个不错的解决方案,Hybrid  App,通俗一点讲就是伪客户端或者轻量级客户端,它的展现模式还是类似于native app,但其实只有一个ui webView,内嵌了html5页面,如果觉得webView不能满足要求,可以开发一个适合自己的浏览内核,做到与客户端一样用户体验。

打个比方,现在私家车已经较为普遍,但平时我们也会使用自行车,我们可以根据不同的场合使用不同的交通工具,当然我们还可以把自己车架在私家车上以备不时之需。

Html5必将带来一场移动互联网的革命,作为htm5的参与者和受益者,我们将期待html5标准的统一和越来越多的web app应用,并给我们带来更多的商业化价值。

iPhone让Native App火热,Android让Native App普及

5年前的1月9日,苹果公司在Mac World大会上推出了iPhone手机,这款革命性的通信终端重新定义了SmartPhone,也宣告了移动互联网的到来。人们从AppStore上下载应用,享受着App带来的便捷、多彩生活。一年后,互联网巨鳄谷歌发布了Android系统,极大的降低了智能手机成本,也让Native App得到了普及。调查显示,2010年6月美国用户每天花在App和Web上的时间分别为43分钟和64分钟,而这一数据在一年后转变为81分钟以及74分钟。为什么Native App会如此受青睐?一方面是因为Native App拥有最佳的用户体验、绝对的本地设备访问能力、优异的盈利模式等优势;另一方面则是因为当时的wap站点还太弱小。

HTML5让web回归,wap站点向Mobile Web App转变

当《连线》杂志抛出《The Web Is Dead , Long Live the Internet》的论调时,迅速引起了整个行业的讨论,而大部分web支持者将希望寄托在HTML5身上。随着智能手机的普及,移动浏览器进行着竞争,基于Webkit引擎的终端覆盖了庞大的智能移动终端市场,移动设备对于HTML5的支持完全达到了可应用的水平。另一方面,Native App的高成本、低效率也让HTML5下的移动web重新得到关注。

2010年开始,淘宝、支付宝、腾讯、网易、新浪等国内互联网巨头都开始对wap进行重新的设计,HTML5触屏版陆续上线。至此,HTML5完成了移动web开发的一次变革:

  1. CSS3被用于打造wap页面,它的圆角、渐变、阴影、动画等特性让移动web拥有了接近于native的UI,整个页面焕然一新;
  2. <article>、<section>、<header>等语义化标签更容易被理解,有利于页面维护与复用;HTTML5表单实现了许多简单易用的原生属性和控件,可以轻松的构建强大的表单;
  3. 强大的Javascript API让mobile web site酷起来,复杂的交互不再停留在Native App内,Mobile Web App开始展现魅力;
  4. HTML5下app开发的高效让产品变得更加迅捷,也真正达到了手机应用的随时更新;
  5. HTML5 = iOS + Android + WindowsPhone,一套代码跨越多个平台。

不可避免的,wap的转型也给移动互联网企业带来了新的挑战:(1)产品经理、交互设计师、视觉设计师需要更多的创新适应HTML5带来的新变化;(2)生态产业链的形成需要时间,Mobile Web App如何被“发现”、“保留”、“返回”还需要进一步探讨;(3)大量的前端人才需求;(4)wap site与Mobile Web App以及不同版本Mobile Web App间的兼容开发问题,多版本适配成为新的架构挑战。

HTML5让Native App倾斜,Hybrid或许是正道

HTML5下的Mobile Web App确实拥有了可以和Native App叫板的资格,但是就像C/S和B/S模式同时存在一样,Mobile Web App与Native App谁也没法代替对方。乔布斯曾在受采访时说过:“Web是未来,虽然现阶段Native给了用户更好的体验。如果现在的开发者不有效的利用Web技术,那他就落伍了。但如果过分依赖Web,完全不用Native那也未必就是好事”。

随着业务的发展和新需求的出现,产品经理们成天贪婪的追问“你那个HTML5可以获取手机硬件信息不,什么时候能调摄像头啊?”,很可惜主流的移动浏览器并没有将这些API开放出来,web依旧需要native去做一些底层的事;相对的,native的工程师也期望自己的应用里面可以加入HTML5,提高开发的效率,适应快速的需求变化。

显然,只有将这两种模式进行融合才能应对新的挑战,HTML5让native产生了倾斜,“Hybrid”成为较好的选择。细细想来,Hybrid应用可以使用HTML5轻松呈现复杂排版内容,js也能调用移动终端底层的API,产品开发效率得到了很大的提高,并且兼容各平台,商业运作成本比较低。当然,开发一个成功Hybrid应用并不容易,需要native工程师,前端工程师以及后台开发人员的通力合作。

当我们开始构建Hybrid App的时候,如何去“Bridging the gap”是一大挑战。其实,实际操作并不如想象的那么困难。以Android为例,它的Webview中有一个addJavascriptInterface方法,通过这个方法可以将App运行过程中的java对象暴露给js调用。同样的iOS,WindowsPhone也都存在着这样的接口。

因此,对于技术实力超强的公司来说,自行实现Hybrid框架是可行的,也能在遇到问题时及时进行完善。而对于大部分公司来说,使用现有的Hybrid框架效率会更高,而PhoneGap无疑是最佳的选择。在被adobe收购并捐献给apache基金后,PhoneGap得到了更多的支持,更新速度也开始加快,它的Plugin机制更是可以满足HTML页面绝大部分的native扩展需求。“HTML5+PhoneGap”成为了主流的App开发方案。

需要清醒的是,虽然Hybrid很美好,但是在这种转型过程中同样也会遇到很多的挑战:

(1)哪些业务子应用应该使用web、哪些应该加入native;

(2)Hybrid的性能问题;

(3)多种模式下的产品及技术整合。

HTML5下的移动App架构

在HTML5的影响下,wap走向了Web App,native融合HTML页面变身为Hybrid。为了适应这种变革,支付宝无线wap以及App不断进行着调整,一种可行的架构应运而生。

这种架构的特点是:

客户端方面,融入了Hybrid框架。出于支付宝业务的特殊性,性能要求高、有特殊需求、现存的以及不经常变更的应用采用native完成;而对于变化快、native要求较低的业务使用Hybrid方式完成,并使用HTML5作为页面展现。

业务开发过程中,对单业务设计多套模板实现页面级设备定制;当浏览器进行web访问,根据HTTP请求头的User-Agent信息进行版本适配和展现。

在开发过程中,不断沉淀出业务相关的javascript组件,方便复用以及Hybrid与Web两种模式的js兼容。

相关推荐