`
longgangbai
  • 浏览: 7330173 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【转】支付宝“技术风云会”: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. <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兼容。

分享到:
评论

相关推荐

    支付宝移动开发包

    支付宝移动开发包是专为移动应用开发者设计的工具集,旨在简化在Android和iOS平台上集成支付宝支付功能的过程。这个开发包提供了丰富的API接口和示例代码,帮助开发者快速实现安全、便捷的在线支付功能。 在Android...

    HTML5仿支付宝APP页面

    总的来说,这个HTML5仿支付宝APP页面项目展示了如何将Web技术应用于移动应用开发,创建出具有高性能和良好用户体验的页面。对于学习移动Web开发或者对支付宝UI设计感兴趣的开发者来说,这是一个有价值的参考和实践...

    支付宝 html5

    支付宝在HTML5领域的实践与探索,是一段充满挑战与创新的旅程,反映了移动互联网时代下,企业如何利用HTML5技术推动产品迭代与用户体验升级。以下是对支付宝HTML5实践历程及关键知识点的深入解析: ### 一、m....

    支付宝前端技术之路中文PDF版

    6.1 技术趋势:书中可能会涉及当时前端领域的最新趋势,如HTML5新特性、CSS3动画、ES6语法等,鼓励开发者关注技术发展,不断提升自身技能。 通过阅读《支付宝前端技术之路》中文PDF版,读者不仅可以了解到支付宝在...

    王卫星:支付宝钱包开发框架

    从给定的信息中,我们可以提炼出以下知识点,详细介绍支付宝钱包的开发框架及相关的开发技术和策略: 1. 支付宝钱包开发框架介绍: 支付宝钱包的开发框架是在MDCC 2013中国移动开发者大会上,由支付宝资深经理...

    HTML5开发APP-框架MUI(仿支付宝案例)

    8. **离线存储与PWA**:HTML5的离线存储技术(如Service Worker和IndexedDB)可以帮助创建 Progressive Web App(PWA)。通过这些技术,我们可以使MUI开发的App在离线状态下也能运行部分功能,提高用户体验。 9. **...

    HTML5微信支付宝金额键盘带小数点

    1. **HTML5的离线存储和表单元素**:HTML5引入了离线存储(如localStorage和sessionStorage),使得网页可以在用户离线时访问之前加载的数据。这对于支付页面的缓存和数据安全至关重要。同时,HTML5的`&lt;form&gt;`标签...

    微信小程序开发同步动态转换为支付宝小程序.zip

    微信小程序和支付宝小程序都是移动端轻应用的开发框架,它们提供了丰富的API和组件,使得开发者能够构建功能完善的移动应用。在移动互联网时代,由于两者用户基数庞大,因此将微信小程序转换为支付宝小程序的需求日...

    php 支付宝h5支付源码完整版

    支付宝H5支付,又称Alipay H5 Pay,是支付宝提供的一种针对移动网页的支付方式。它允许商家通过在自己的H5页面中嵌入支付宝提供的JavaScript SDK,引导用户在支付宝客户端或支付宝网页版中完成支付。这种方式无需...

    支付宝移动支付demo+说明

    至于文件“WS_SECURE_PAY(20120531)”,根据日期2012年5月31日,我们可以推测这是2012年的一个版本,可能包含当时最新的支付宝移动支付SDK和相关文档。文件名中的“Secure Pay”暗示着这可能与安全支付相关,涵盖...

    支付宝移动开发官方demo

    支付宝作为中国领先的第三方支付平台,其在移动开发领域有着广泛的应用。官方提供的Demo是开发者学习和集成支付宝服务的重要资源。这个压缩包包含了iOS和Android两个平台的示例代码,可以帮助开发者快速理解和掌握...

    APP框架html5前端支付宝服务窗

    标题中的“APP框架html5前端支付宝服务窗”指的是在开发移动应用程序时,使用HTML5作为前端技术,并结合支付宝服务窗功能来构建应用的一种方法。HTML5是现代网页和应用程序开发的标准,它提供了丰富的功能和API,...

    支付宝小程序模板_支付宝小程序模板开发平台

    支付宝小程序模板是为简化支付宝小程序开发流程而设计的一套预制组件和页面布局,它使得开发者或企业无需从零开始编写代码,而是可以快速选择并定制适合的模板来构建自己的小程序。这种模板化的方式大大降低了开发...

    支付宝H5对接案例

    在移动互联网时代,H5(HTML5)技术已经成为构建跨平台、交互性强的网页应用的重要工具。本案例聚焦于“支付宝H5对接”,这是一项允许H5页面与支付宝客户端进行深度整合的技术,使得用户可以在H5应用中方便地进行...

    支付宝开发文档及示例

    支付宝开发文档及示例主要涵盖了支付宝开放平台的各种接口和技术指南,是开发者集成支付宝功能到自己的应用或网站时的重要参考资料。以下是一些关键知识点的详细解释: 1. **支付宝开放平台**:支付宝开放平台是...

    支付宝接口开发文档

    支付宝接口开发文档主要涵盖的是如何在不同的开发平台上(如.NET、PHP、ASP)与支付宝进行集成,实现在线支付和其他相关功能。以下是对这些知识点的详细解释: 1. **支付宝接口**:支付宝提供了一系列API,允许...

    支付宝移动支付SDK

    支付宝移动支付SDK是一种用于在移动应用中集成支付宝支付功能的软件开发工具包(SDK),它使得开发者能够方便地接入支付宝的支付服务,为用户提供安全、便捷的在线支付体验。这个SDK通常包含Java语言的库文件(jar包...

    移动客户端支付宝调用代码

    移动客户端支付宝调用代码是为实现移动应用与支付宝接口交互的关键技术,主要应用于移动应用程序(如iOS或Android应用)中,使用户能够便捷地进行支付操作。本知识点将深入探讨移动客户端如何集成支付宝SDK,实现...

    支付宝开发各个语言的demo与开发文档

    支付宝开发涉及多个编程语言,包括但不...综上所述,支付宝开发涉及的技术点广泛且深入,涵盖了从接口调用到安全防护的各个环节。开发者需要对相关文档有深入的理解,并结合示例代码进行实践,才能成功集成支付宝功能。

Global site tag (gtag.js) - Google Analytics