`
sunny.liang
  • 浏览: 34606 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

phoneGap技术分析

阅读更多

 1   移动应用现状

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

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

Web App

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

Native APP

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

Hybird App

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

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

2    phonegap简介

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

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

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

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

 

3    phonegap成功案例

       

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

4     phonegap技术要求

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

        要求开发人员掌握htmlcssjavascript技术,特别要求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 jsjQuery。随着移动应用的需求越来越大,jQuery出现了jQuery mobile版本。它的体积小,为移动应用量身定制。使用javascript框架也降低了开发难度,使得移动应用更美观。

5.1.5   方便的安装和使用

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

5.2       phonegap不足之处

5.2.1    运行速度慢

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

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

5.2.2    不适合部分程序

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

5.2.3    调用平台资源差

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

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

5.2.4     内存消耗大

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

5.2.5     调试难度大

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

5.2.6    开发费用方面

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

6      phonegapandroid 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万个事件时,整个应用已经处于空白无响应状态。有连接超时情况发生。手动频繁操作会引起,响应速度变慢,webkitWebView不能很好释放内存,甚至会引起应用的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一般情况下通过jscss来进行缩放裁切。在进行图片动态缩放的时候,页面显示情况不是很正常(抖动,跳跃)。最好的办法是后端服务器对图片处理后再发送给手机端。

原生app可以直接通过java来对图片进行处理。

3.布局 原生app可以利用android提供的特殊技术方案,来自动适应多种分辨率的屏幕。如9png drawable目录。 相当简单方面。 但是在交互方面,原生app的开发量会比较大。

webapp就比较杯具一些了,需要开发者比较多的关注。 可以通过js来动态的获取屏幕尺寸进行资源调整和加载(开发几套不同的ui,然后根据分辨率js动态加载),这个会花费比较多的时间。

4.调试

webapp js调试不太方便,特别是调用外部应用的时候。如果是本应用内部,可以通过firebug进行调试。

 

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

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

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

7    结语

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

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

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

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

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

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

 

分享到:
评论
1 楼 tieyinxiang 2013-09-29  
博文好,博主又搞了一个假头像

相关推荐

    Phonegap技术分析

    PhoneGap技术分析 PhoneGap是一种跨平台的移动应用开发框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。这个技术的核心概念是将Web应用包装在原生的移动应用壳中,通过WebView(如iOS的...

    phonegap完整例子!

    "是针对Android平台的一个示例项目,特别适合在pad设备上运行,并且包含了自定义插件的实现,这对于深入理解和使用PhoneGap技术尤其有帮助。 1. **PhoneGap基础概念** - PhoneGap基于Apache Cordova,是一个让...

    IONIC+PhoneGap项目源码

    通过分析这些源码,开发者可以学习到如何将IONIC的UI组件和交互与PhoneGap的本地功能结合,创建一个功能完备的混合移动应用。 【文件名称列表】 1. "深入浅出 phonegap 代码.zip" - 这个文件可能是关于PhoneGap的...

    phonegap源码+示例

    1. **架构**:PhoneGap的核心架构基于WebView,它将Web应用封装在一个本地应用容器中,通过JavaScript桥接技术与设备的原生API交互。Cordova2.9的源代码中,我们可以看到这些桥接机制的实现,以及如何在不同平台上...

    PhoneGap实例

    通过学习和分析`phonegap100_apidemo`中的代码,开发者不仅能理解PhoneGap的工作原理,还能掌握如何将这些技术应用到实际项目中,从而构建出功能丰富的跨平台移动应用。在实践中,不断调试和优化这些示例,有助于...

    PHONEGAP入门经典源码

    3. **社区支持**:Stack Overflow、GitHub和PhoneGap论坛等社区可以找到丰富的技术讨论和问题解答。 4. **示例应用**:通过分析开源的PhoneGap应用源码,可以了解实际项目中的设计模式和最佳实践。 总之,"PHONEGAP...

    PhoneGAP实例源码

    PhoneGap是一种跨平台的移动应用开发框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用程序。PhoneGap的核心理念是...每个实例都可以独立分析和调试,以便更深入地理解和掌握PhoneGap开发的核心技巧。

    ionic+phonegap 案例源码

    这个源码项目是一个综合了Ionic和PhoneGap技术的移动应用实例,可以帮助开发者了解如何使用Web技术构建跨平台的移动应用。通过分析提供的文件,我们可以学习到如何组织一个完整的Ionic项目结构,使用Cordova插件来...

    phonegap入门经典源码

    通过分析`chapter9b.html`,我们可以逐步掌握PhoneGap的基本用法,从而为开发跨平台的移动应用打下坚实的基础。这个过程中,还会涉及到HTML5、CSS3和JavaScript的最佳实践,以及如何优化应用性能和用户体验。在实际...

    Phonegap_API_中文版

    PhoneGap的核心理念是通过Web技术实现与移动设备硬件功能的交互,使得开发者无需掌握每个平台的原生编程语言,如Java(Android)、Swift(iOS)或Kotlin,就能开发出功能丰富的应用。 本资源"Phonegap_API_中文版...

    PhoneGap简单示例

    PhoneGap是一种开源框架,它允许开发者使用HTML5...通过分析这些文件,你可以了解PhoneGap项目的组织方式,以及如何利用PhoneGap API进行设备交互。这是一个很好的起点,帮助你深入理解PhoneGap的工作原理和开发流程。

    phonegap开发插件合集

    PhoneGap的核心理念是通过Web技术实现跨平台的移动应用开发,同时能够访问设备的硬件功能,如摄像头、GPS、存储等。这个"phonegap开发插件合集"是一个包含了多种PhoneGap插件的资源包,覆盖了Android和iOS等多个平台...

    phonegap+jqueryMobilejs源码项目

    通过学习和分析这个项目,开发者不仅可以掌握PhoneGap和jQuery Mobile的基础知识,还能了解到如何将两者结合,实现跨平台的移动应用开发。这对于想要进入移动开发领域的前端工程师来说是一份宝贵的资源。

    phonegap api中文手册

    PhoneGap是一款基于HTML、CSS和JavaScript的技术栈,允许开发者构建适用于多个移动操作系统(如iOS、Android等)的应用程序。 #### 二、PhoneGap API功能模块概述 PhoneGap API提供了丰富的功能模块来扩展HTML、CSS...

    phonegap_test1

    PhoneGap 是一个开源框架,它允许开发者使用标准的HTML、CSS 和 JavaScript 技术来构建跨平台的移动应用。这个名为 "phonegap_test1" 的压缩包文件可能包含了一个使用PhoneGap开发的移动应用的测试版本。从描述中的...

    phonegap离线缓存

    PhoneGap离线缓存是移动应用开发中的一个重要概念,它主要应用于使用PhoneGap框架构建的混合应用程序。...开发者可以通过分析该项目的代码和配置文件,了解如何在自己的PhoneGap应用中实现离线缓存。

    phonegap从入门到精通-配套源码

    PhoneGap 是一个开源框架,它允许开发者使用标准的 web 技术,如 HTML、CSS 和 JavaScript,来构建跨...通过探索这些源码,你可以深入了解 PhoneGap 如何将 web 技术与移动设备功能相结合,创建出原生体验的混合应用。

    Phonegap-LocalNotification-master

    通过对这些文件的分析和学习,开发者可以掌握PhoneGap在Android平台上实现本地通知的完整流程和技术细节。 总之,PhoneGap的LocalNotification插件为Web开发者提供了一个简便的途径,让他们能够在不接触原生代码的...

    phonegap 源码 下载

    PhoneGap 是一个开源框架,它允许开发者使用标准的 web 技术,如 HTML5、CSS3 和 JavaScript 来构建跨平台的移动应用。这个“phonegap_android_src”压缩包很可能是 PhoneGap 的 Android 平台源代码,对于深入理解 ...

    Phonegap登陆及九宫格示例Android源码下载

    你可以通过分析这个项目来学习如何在PhoneGap中组织文件结构,如放置HTML、CSS、JavaScript文件,以及配置配置文件(config.xml)来设置应用的元数据和权限。 总之,这个示例项目涵盖了PhoneGap的基础知识,包括...

Global site tag (gtag.js) - Google Analytics