支付宝“技术风云会”：HTML5引发的移动开发变革

支付宝技术大学举办的 "技术风云" 讲座 ( 地址在: 支付宝大楼A栋云咖啡二层)

支付宝“技术风云会”：HTML5引发的移动开发变革

在刚刚结束的支付宝“技术风云会”论坛上，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. 、

   、

   等语义化标签更容易被理解，有利于页面维护与复用；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兼容。