phoneGap技术分析

 1   移动应用现状

        移动应用产品往往常常考虑多个平台的支持.单一平台很难保证应用的覆盖面或者换句话说就是用户群体的量和持续的活跃性上从长期的角度而言往往存在短板.另外从开发的角度而言.多平台的支持往往需要建立不同的技术团队.而平台之间开发技术也是完全迥异的. 开发一个具有相同业务的应用Natural-Application需要使用到不同平台的框架和开发语言.使用 C/C++ 的 Symbian、使用 Object C 的 iOS 和使用 Java 的 Android 应用开发技术，几乎是完全无法融合的. PhoneGap跨平台移动应用开发框架正是应运而生.

        我们需要搞清楚几个概念:Web App，Native App,Hybird App移动平台Application几个概念:

Web App

        这个主要是采用统一的标准的HTML,JavaScript.CSS等web技术开发.通过不同平台的浏览器访问来实现跨平台.同时可以通过浏览器支持充分使用HTML5特性，缺点是这些基于浏览器的应用无法调用系统API来实现一些高级功能，也不适合高性能要求的场合.

Native APP

        就是所谓的原生应用.指的是用平台特定的开发语言所开发的应用.使用它们的优点是可以完全利用系统的API和平台特性，在性能上也是最好的。缺点是由于开发技术不同，如果你要覆盖多个平台，则要针对每个平台独立开发,无跨平台特性.

Hybird App

        则是为了弥补如上两者开发模式的缺陷的产物.分别继承双方的优势.首先它让为数众多的web开发人员可以几乎零成本的转型成移动应用开发者；其次，相同的代码只需针对不同平台进行编译就能实现在多平台的分发，大大提高了多平台开发的效率；而相较于web App，开发者可以通过包装好的接口，调用大部分常用的系统API.

        而PhoneGap正是Hybird APP目前框架中集大成者

2    phonegap简介

        phoneGap是Nitobi开发的一个免费开源的开发框架，目前最新版本是1.5，用来构建跨平台的使用HTML，CSS和JavaScript的应用程序。以written once, run everywhere一次编译到处运行而受欢迎，只需要改动少量代码而实现跨平台。

        phonegap 简单来说是一个中间件，为移动前端提供访问移动终端设备及资源的接口。采用统一的标准的html、javascript、css等web技术开发.通过不同平台的浏览器访问来实现跨平台。通过javascript脚步代码调用系统资源，以降低开发难度，所以受到广大web开发人员的青睐。

        2011年10月4日Adobe宣布收购了创建了HTML5 移动应用框架PhoneGap 和PhoneGap Build的新创公司Nitobi Software。这使得phonegap有了坚强的后盾，phonegap的发展前景也是一片光明。与此同时，PhoneGap的开源框架已经被累积下载60万次，借助PhoneGap平台，已有数千应用程序建立在iOS，android以及其它操作系统之上。

        下图是phonegap对各手机平台的支持情况

 

3    phonegap成功案例

       

上图是phonegap与jquery mobile结合一起的mobile应用。这样应用都为简单的移动web应用，在国内来说，phonegap的成功案例比较少，目前还处于研究阶段。

4     phonegap技术要求

        Adobe dreamweaver 5.5版本为phonegap提供了优越的开发环境。开发人员可以使用dreamweaver 5.5开发android app。虽然phonegap门槛较低，但是也要求开发人员具备必要的技能。

        要求开发人员掌握html、css、javascript技术，特别要求javascript技术，在javascript基础上需要掌握jQuery mobil框架ajax通讯技术。

5    phonegap优缺点评估

        日前，phonegap框架热度如火如荼。一项技术当然会有其优缺点，我们是选用phonegap还是选择Native APP，要先分析两者的利弊，再根据具体应用选择，

5.1 phonegap优点：

        5.1.1、可跨平台。phonegap作为跨平台框架，其实并别written once, run everywhere，各移动平台的差异还是较大，phonegap框架帮我们解决了差异性，javascript与平台系统的连接由phonegap框架完成。成为连接移动终端的适配器，或者说中间件。它的原理如下图：

 

 

 

PhoneGap通过调用JavaSCript 调用API库实现和各个平台的SDK进行无差别的交互. 以达到调用不同平台手机上摄像头，文件系统,重力感应.GPS定位等功能。

 

 

5.1.2   易用性

        phonegap开发人员无需直接操作平台资源。对平台资源的操作完成由phonegap框架完成。开发人员只需要用javascript调用phonegap  API就可以完成对平台资源操作。由于phonegap框架限制，对平台资源操作是有一定限制的。

        phonegap开发人员可以从web开发人员转入，目前来说web开发人员较多，成本也较低，转入phonegap开发后，可以降低移动应用产品的开发成本。这样，移动应用数量将直线提升。

5.1.3   提供硬件访问控制

      比起传统的Web程序，PhoneGap提供了一些列的JS 的类，可以直接访问硬件。比如加速，相机，指南针，GPS，文件访问等，可以让你用JS方便地调用系统的硬件。以弥补传统Web程序的一块错误。

5.1.4   可利用成熟javascript框架

        web的发展，诞生了许多javascript框架。著名的有Ext js、jQuery。随着移动应用的需求越来越大，jQuery出现了jQuery mobile版本。它的体积小，为移动应用量身定制。使用javascript框架也降低了开发难度，使得移动应用更美观。

5.1.5   方便的安装和使用

        PhoneGap的架构很复杂，但对于大多数开发者来说，并不需要了解phonegap内部，只用很简单的配置就可以搭好环境。只用专注写好自己的Web页面，拷贝进去就可以了。

5.2       phonegap不足之处

5.2.1    运行速度慢

        PhoneGap集成多了个平台.程序的载入和UI界面的反应都比原生的程序慢，UI反应延时——这是个致命伤 .它实际上还是在展示Web页面，所以载入、页面刷新等肯定是需要一定时间的。 这在用户体验上来说PhoneGAp依然无法替代原生应用程序。

        另外，html、javascript、css都运行在各平台内置浏览器webkit之上，受到webkit处理速度影响。目前来说运行速度比较慢，性能较差。

5.2.2    不适合部分程序

        如果你的程序需要3D功能，或者对界面刷新有较高的要求，比如类似于游戏的程序现在来说还只是用原生的语言会比较好。PhoneGap支持API还有待在各个平台逐步完善

5.2.3    调用平台资源差

     phonegap应用程序对平台资源的使用依赖于phonegap框架本身，由于phonegap是第三方框架，做不到100%调用平台资源，只有依靠phonegap的升级满足调用平台资源的需求。

        比如说，现在版本未能支持视频解码与播放等

5.2.4     内存消耗大

        有测试表明，用phonegap于android java开发同一个应用。运行phonegap应用内存消耗远大于原生态android java应用。对于频繁操作，释放内存较慢，从而导致内存消耗量飙升。

5.2.5     调试难度大

        目前phonegap可以在控制台输出简单的JS调试日志，但是并不方便。调试js只能选择firefox  firebug调试。

5.2.6    开发费用方面

        phonegap可以满足web开发人员转入。但由于html5的新发展，对javascript、css的要求更高。所以开发良好用户体验应用，在开发费用上并不太乐观。

6      phonegap与android java对比评测

    测试对象：Delicious书签订阅应用

 

Android应用类型	Html5 (phonegap)	Android java
功能实现	Html + jQuery基础库	ListView组件
文件大小	159KB	23KB（只用了系统的原生界面）
内存占用	45.37MB(RSS)	27.02MB(RSS)
数据通信	Ajax	Apache http Java功能包
启动速度	打开相同订阅源2.7秒	打开相同订阅源2.3秒
操作响应速度	正常操作速度流畅，频繁操作响应会变慢	操作速度流畅
稳定性	在Monkey测试注入大约4万个事件时，整个应用已经处于空白无响应状态。有连接超时情况发生。手动频繁操作会引起，响应速度变慢，webkit的WebView不能很好释放内存，甚至会引起应用的crash。	能较好处理Activity切换延时等待。运行较为流畅。Monkey测试时书签列表页切换时有时候会出现黑色背景，然后再载入列表，比正常速度稍慢。能够比较好的释放内存，没有出现过应用crash的情况。
资源占用	对于频繁操作时，内存释放不够理想，导致内存占用上升。	内存占用相对比较稳定。
开发成本	运用html + css + javascript开发，适合前端人员开发。由于webkit在不同的终端机发行版本不一样，所以需要针对不同的机型进行适配。同时对于不同屏幕大小在适配上也只能通过Javascript进行控制实现。	适合有Java开发经验的程序员，可以充分利用Android提供的组件进行开发。但是开发学习成本较高。
开发难度	目前phonegap只使用一个WebView，开发时需要使用OPOA的模式，对代码的组织方式及开发方式有较高要求。同时介于手机的资源有限，对如何管理和分配内存提出了要求。目前phonegap可以在控制台输出简单的JS调试日志，但是并不方便。	需要有Java开发经验，同时对Android开发体系有较深入的了解。
多人协作	OPOA模式并不利于多人协作并行开发，只能通过基础的javascript的设计模式来解决多人协作的问题。	比较方便支持多人协作并行开发。
其它问题	1.内存优化：webapp因为是基于浏览器的，而浏览器自身是进行了相应的优化的，所以在图片显示上很不错。      原生app如果在一页中显示比较多的图片的时候，必须比较细致完善的进行内存优化工作，否则极易出现因为图片资源过大而引起的崩溃问题。 2.图片缩放裁切 webapp一般情况下通过js和css来进行缩放裁切。在进行图片动态缩放的时候，页面显示情况不是很正常（抖动，跳跃）。最好的办法是后端服务器对图片处理后再发送给手机端。 原生app可以直接通过java来对图片进行处理。 3.布局 原生app可以利用android提供的特殊技术方案，来自动适应多种分辨率的屏幕。如9png 和 多drawable目录。 相当简单方面。 但是在交互方面，原生app的开发量会比较大。 webapp就比较杯具一些了，需要开发者比较多的关注。 可以通过js来动态的获取屏幕尺寸进行资源调整和加载（开发几套不同的ui，然后根据分辨率js动态加载），这个会花费比较多的时间。 4.调试 webapp js调试不太方便，特别是调用外部应用的时候。如果是本应用内部，可以通过firebug进行调试。

        此次对比主要集中在对大量数据通信下web app UI性能。通过与android Java app相比较，web app的UI性能会比Java app的UI性能差。主要原因是依赖webkit浏览器内核的渲染解析能力。同时在只有一个WebView的情况下，如何控制内存的上涨速度以无法释放内存的情况无缝地重新启动WebView从而不影响用户体验，是一个现实待解决问题。

        在非大数据量且不需要频繁更新UI的情况下，基于wekit浏览器phonegap模式还是可以满足Android开发应用的需求。同时应用的实现的效率还依赖于OPOA开发模式的Javascript基础架构是否强大和高效。

        对于不同分辨率的屏幕，需要通过JS或者通过要集成的框架封装来解决适配的问题。同时由于不同版本的Android所集成的webkit的版本不同，同样也需要处理不同版本的在JavaScript和CSS支持上不同的兼容性问题。还有解决开发时多人协作及方便的调试工具集成，也是进行html5 app开发的重要前提条件。
        或者通过要集成的框架封装来解决适配的问题。同时由于不同版本的Android的版本不同，同样也需要处理不同版本的在JavaScript支持上不同的兼容性问题。还有解决开发时多人协作及方便的调试工具集成，也是进行html5 app开发的重要前提条件。

7    结语

         phonegap的目标就是快速开发移动应用实现written once, run everywhere跨平台。phonegap一定程度上降低了移动开发的门槛，特别是ios开发。传统web开发人员不需要学习object-c、android java就可以开发普通的移动应用。

        类似于phonegap这样的框架的出现，并不能取代Native APP原生态应用。phonegap有它的不足之处，运行速度较慢、操作平台资源不灵活、操作移动设备不方便，这些都依赖者phonegap框架本身的升级与发展。不过值得高兴的是adobe公司收购了phonegap开发商，增加了phonegap的后台实力。phonegap的种种不足之处表明Native app的地区不能被取代，只能说会瓜分一部分简单web移动应用。

        在用户体验方面。phonegap运行速度相对慢，页面动画切换有点卡，这影响着用户体验。这些原因能否解决，这取结于移动平台的webkit的性能优化和对html、css、javascript的支持程度。

        在硬件支持与内存方面。一个应用用两种方式实现，native app消耗内存较低，要求硬件支持较低。phonegap消耗内存较大，内存释放效率较低，因而要求的硬件支持相比之下就高了。

        开发费用方面。phonegap要求开发人员的javascript、css技术高，甚至要求开发人员掌握html5新技术。这样开发人员费用高于传统web开发人员。不过，与native app相比，phonegap可以实现跨平台，减少在各个平台上花费开发费用。总体上，一个移动产品采用phonegap，费用要低些。

        至于是否采用phonegap于native app方式，这要取决于移动产品本身特性与企业对产品的要求。一般的移动web应用可以采用phonegap技术，但是用户体验就没有native app好；接近于游戏的应用，经常刷新界面的应用，使用phonegap就不太合适了。最后，采用何种技术，要看产品的侧重点。像QQ这样的应用，注重用户体验，应该不会采用phonegap了。

 

评论

1 楼 tieyinxiang 2013-09-29  

博文好，博主又搞了一个假头像