一、webApp的前生今世


  webApp是把用户的浏览器当作客户端,采用开放的web技术,实现某一特定功能的web应用。如果我们把用户终端上的应用进行分类,主要可以分为三类:


 (1)传统应用程序


 (2)传统Web应用


 (3)webApp


 其模型如下图:



  其中传统应用程序是最流行的一种应用模式,多用C,C++,Pascal(Delphi)等语言开发,具有速度快,API丰富,开发环境成熟等优势,甚至连浏览器本身也是一种传统应用程序。


  传统Web应用由于采用开放的WWW标准及技术,得以迅速普及,其资源数量呈不可控制的爆炸式增长,相比传统应用程序,其内容丰富,繁杂,需要用户有针对性的甄别,它在技术方面由于采用统一的标准,开发更为迅速,兼容性强。


  webApp是对RIA(Rich Internet Application)理念的进一步发展,在浏览器端的技术还不是那么强大的时代,就涌现了许多实现RIA的框架,其中最成功的的是Flash,Flex(Flash Builder)和ExtJS,这些技术至今还在进一步发展中,虽然实现的方式不同,但其理念是一致的,都是致力于在浏览器上创建类客户端体验的“富”应用产品。


二、webApp与HTML5


  HTML5将在webApp的进化史上留下浓墨重彩的一笔,HTML5是HTML4的扩展和升级版本,目前尚处于草案阶段,虽然标准制定者在技术具体的实现方式和理念上争论不休,造成了短暂的混乱局面,但大方向上大家还是一致认可的。相比HTML4主要做了如下几个方面的改进,推出浏览器共同遵循的标准,如:


        1)数据传输的标准(CORS,webSocket)


        2)播放音频视频的标准(


        3)语义化标签及改良表单的标准(


        4)数据离线存储的标准(localStorage,sessionStorage,webDB,offlineApplication)


        5)绘图的标准(,webGL)


        6) API改进(WebWorker,HistoryAPI,GeoLocation)


        另外还有一些不属于HTML5草案规划范围内的浏览器私有技术,如Firefox JoystickAPI和chrome的NativeClientGears(已废弃),HTML5仿佛就是为了webApp而诞生的。


        苹果公司的新产品iPhone和iPad则毅然决定不支持Flash,并把HTML5作为在移动平台替代Flash的主要技术推向历史舞台,并赢得了最后的胜利,Flash的拥有者Adobe公司于今年11月宣布放弃移动平台的Flash产品,转投HTML5。HTML5目前正在如火如荼的发展着,成为webApp新的催化剂。由于HTML5作为开放标准,能显著减少开发工作量,并提供跨平台的兼容,将对webApp在未来的发展起着至关重要的作用,同时这种新兴网络应用程序模式也将对未来的互联网产生深刻的影响。


        虽然如此,HTML5与webApp的关系相当于燃料与汽车,即使不使用HTML5我们依然可以创造高质量的webApp,如使用jQuery Mobile框架,该框架会对不支持HTML5的浏览器进行降级支持,效果同样出色。而Palm公司的webOS系统更是将webApp的理念发展到了极致。



  上图中,Bing地图为webOS中的内置应用,Google地图是webApp,无论是从用户体验,还是外观,两者的区别在webOS框架的支持下显得微不足道。


三、webApp在桌面上的应用


        webApp目前在桌面环境和移动设备环境都有应用,Google DocsOffice 365是桌面环境下旗舰级webApp,两者都专注于多人协作办公。在Chrome webstore里,我们可以轻易找到许多优秀的webApp,如webQQ,豆瓣音乐,离线Gmail等。据第三方检测机构官方数据[1],截至本文完成时,webstore的总用户数已冲破5千万大关,webApp数量接近15,000款(不含浏览器扩展),此时距webstore的发布时间2010年12月仅一年的时间,足见webApp的受欢迎程度。事实上,本文的撰写也放弃使用桌面版Office,改用google doc完成,它可以让我在任何终端上持续不断的完善文章内容,我已渐渐习惯并喜欢上了这种新型的随时随地的办公模式。


        腾讯公司的Q+,实际上也可以看作是另外一种形式的webApp,它更像是桌面平台的webOS,在技术层面则更像是传统应用程序与webApp的混合体,其中webApp所占的比重要更大一些,与360webApp相比,它支持HTML5的内核和V8 JS引擎,有这些技术的强力驱动,相信更能吸引用户,也更吸引开发者为Q+开发应用。


        总之,互联网服务历经了web1.0-用户被动接受信息,web2.0-用户主动创造,分享,发现信息时代,现在已转而进入专注,细分互联网服务的时代,应用功能更加专注并云端化,用户也开始追求更好体验以及享受无缝的信息服务,webApp能够很好的胜任这个角色。我们现在已经可以在浏览器中进行社交,游戏,办公,阅读......



四、webApp在移动平台的发展


        据市场调研机构strategyanalytics于12月7日发布的研究报告[2],到2013年,支持HTML5的手机将达到惊人的10亿部,在中国的智能手机销售量将达到接近1亿部。

 

        目前在智能手机市场iPhone,Android,Windows Phone 7三大主流操作系统已达成三分操作系统市场之势,其内置的浏览器无一例外的支持HTML5技术,这给了webApp在移动平台的发展难得的机遇。本来站在最前沿的webOS虽然没有赢得一席之地,但它做为开拓者,以超前的理念仍然在影响着移动服务的未来。


        各种流行的桌面互联网服务,都开始布局手机终端市场,如著名的evernote,dropbox等服务,同时各种游戏App也开始在移动平台上发展,如在iPad上运行的QQ斗地主。



  但移动设备上的webApp毕竟只是处于起步阶段,而且如果只局限于浏览器窗口,将很难获得大的发展。移动平台上的浏览器最好只是作为webApp有形载体的一种方式,移动设备webApp的展现最好结合NativeUI进行一次包装,如使用phoneGap这样的工具,这样扩展性更会强,用户体验会更好。


        不过,不管webApp在移动平台上以那种形式存在,都不妨碍它以后成为移动平台应用的主力军,这些应用的背后,是数不胜数的现有互联网产品,和数以亿计的移动终端用户。


五、webApp与微博开放平台


        微博开放平台是腾讯最早开始着手建设的开放平台之一,我们一直致力于打造一个稳定,可信赖,令开发者可以方便,高效的开发微博应用,丰富腾讯微博内容,以提高腾讯微博用户活跃度为宗旨的平台。为支持微博wenApp的发展,我们率先实现了OAuth2.0协议中的一个子协议,并对其进行适当的改进,并封装了一套面向webApp开发者的微博接口调用库(Open-JS)。相比OAuth1.0,它可以使开发者可以更加快速,有效,方便的存取微博数据,并与应用自身的后台程序进行交互,制作优秀的微博webApp。


        (1) OAuth1.0与OAuth2.0


        OAuth1.0与OAuth2.0都是一种授权协议,开放平台上的第三方应用,不能直接访问和操作该用户的数据,除非得到该用户的授权,这个授权过程的实现方式的一种就是OAuth。这里不打算详细的介绍这两种协议的具体的技术细节,对此有兴趣的可以在OAuth官网上进行进一步了解[3],我们着眼于挖掘其优缺点。


        OAuth1.0协议过于注重安全性,使整个流程显得非常复杂,要求应用必须配备后台服务器,并运行专用的SDK进行授权,这对于webApp的实现不甚友好,而且数据必须经过应用后台服务器传输中转,丧失了一定的效率。因此OAuth2.0对OAuth1.0进行了改进,提出了一种新型的授权模式,在该模式的支持下,应用不再要求必须配备后台服务器,并获得了从用户浏览器端直接与开放平台进行数据交互的能力。两者的数据交互模型如下图:



  我们可以看出,OAuth1.0授权协议下,数据流必须首先从用户浏览器首先流向应用本身的服务器,该服务器对此次请求进行签名后再流向开放平台服务器,开放平台服务器验证签名,返回数据给应用后台,应用后台返回给浏览器,这仅仅是调用一个开放平台API的流程,假如一个应用需要调用许多API,这种方式就产生了极大的浪费并拖慢了响应速度。使用OAuth2.0协议,数据流有能力直接从用户的浏览器端,流向开放平台的服务器,然后数据直接返回给浏览器,直观而简单有效,没有数据中转的过程,也没有对数据签名的过程,节省了CPU,当然应用也可以与自身的后台进行数据交互。当然协议本身只是骨架,如果没有一个强大的库来支持它的话,也只能是无本之木,幸运的是,我们为开发者提供了Open-JS。


        (2) Open-JS


        Open-JS是基于OAuth2.0协议提供给开发者调用的库,这个库可以使开发者以JS函数调用的形式轻松完成微博用户的授权,存取微博数据等任务,兼容桌面平台与移动平台的全部浏览器,其函数接口采用流畅,人性化设计,使开发者可以轻松完成微博应用,助力微博webApp的开发。我们使用Open-JS制作了两款webApp,可以在各种平台的浏览器下体验:


        1)

微博开放平台API接口调用展示

        2)

微博开放平台接口响应速度测试

      (注:AppKey处输入800000006即可)


  对使用Open-JS开发webApp有兴趣者,可以查阅

详细文档

        (3) 一些创新


        ① Auth1.0与OAuth2.0的结合


        OAuth1.0与OAuth2.0实质上是两种完全不同的授权机制,在OAuth1.0授权协议下,第三方应用可以获得永久有效的accessToken,而OAuth2.0协议下只能获得临时有效的accessToken。一些已经使用OAuth1.0的协议的应用,可以快速的切换到OAuth2.0上来,我们提供对应的接口,试应用凭OAuth1.0协议获得的accessToken可以交换到OAuth2.0的accessToken,完全打通了两种协议。


        ②同步QQ登录态


        OAuth2.0采用的是临时accessToken与refreshToken结合的方式维持用户的授权状态,最坏的情况是accessToken与refreshToken全部失效,这时我们便可以根据用户的QQ登录态,和uin的授权信息,选择为应用自动下发临时时accessToken,避免用户重新登录授权的繁琐过程。


        ③多域名API支持


        浏览器都有对同一域名下资源的请求并发数限制,这也是为什么要使用CDN的原因之一。我们为开放平台API的服务器进行了多域名镜像(规划中),可以避免此问题。


六、综述


        webApp是RIA理念的延伸,是互联网市场成熟后的细分的产物,是引领技术革新的新潮流。在移动平台市场持续扩大和HTML5技术逐渐普及成为新标准的背景下,不论是桌面平台还是移动平台,webApp应用必然以多种形式存在并在互联网产品中占据一席之地。

 

看完后,还对其他 webApp技术有兴趣?来论坛找找!

http://djt.qq.com/bbs/forum.php