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

HTML 5+JavaScript混合应用比本地应用的开发成本低

阅读更多

 

开发者们经常思考的一个问题是该开发Web应用、本地应用,还是其他混合形式的内容。其实,该问题的答案虽不确定但十分简单,在正式的开发工作开始前,开发者需想清楚一些关键问题,如:目标受众是谁?开发该应用的目的是什么等等。

市场研究公司Forrester表示,开发者不应该在本地代码和HTML 5之间进行非此即彼的选择。以下是Forrester关于四种开发方案的具体分析:

1)本地应用:

提供最好的用户体验、性能,以及设备API访问(摄像头、联系人、手机状态等);不过,由于四个主要的移动平台(iOSAndroid、Windows Phone、BlackBerry)使用不同的代码库,因此同一款应用需要针对不同的平台进行多次开发,导致实际的开发预算可能会比预期高出150%至210%。

2)HTML 5/JavaScript Web应用

优点是浏览器无处不在,HTML 5的 <audio>和<video> 标签,以及设备访问API极大地增强了Web应用的功能;不足是JavaScript没有本地代码快,用户体验和设计流畅性做得不是很好。

3)HTML  5+JavaScript混合应用

该混合方案使其兼备多种本地功能,是Facebook移动应用和PhoneGap所采用的方案。从某种意义上来说,不管是对Web应用,还是本地应用,都最为两全其美。

4)移动中间软件

集成客户端和服务器端组件开发等多种开发环境,多适用于使用Oracle或SAP等系统的企业级开发工作室。

除此以外,开发者还需认真考虑的是成本和资源。在当前环境下,开发工作室通常会找一些精通Web技术的编码人员开发适用四种主要平台的应用。对Web应用来说,Forrester建议使用HTML 5+JavaScript混合方案;本地应用虽然有更好的视觉效果和更强大的设备访问API,但其跨平台的高额开发成本可能会让很多开发者望而却步。

小结:

总的来说,HTML  5+JavaScript混合方案是成本控制和潜在市场覆盖的最佳组合,极有可能成为未来移动开发市场的主宰。

 

 

 

PhoneGap
在等会谈到更深入的细节之前,我想解释一下什么叫做 PhoneGap。PhoneGap 首先是一个应用程序容器技术,它能让你用 HTML,CSS,JavaScript来创建原生可安装的移动应用程序。PhoneGap 的核心引擎是100%开源的,它是属于Apache Cordova项目的旗下产品。你可以通过我的另外一篇文章来加强了解 PhoneGap.

PhoneGap 用户界面

PhoneGap 应用程序的用户界面使用 HTML,CSS以及JavaScript来创建的。而它的界面底层实质上是用浏览器视图创建的,而浏览器视图将占据真实设备的100%宽度与100%的高度。

建议把这个设想为一个无头部的Web浏览器。与普通浏览器一样可以渲染HTML内容,但是不会显示普通浏览器的边框。所以你可以充分使用这些空间,比如使用HTML/css创建导航顶部栏。

PhoneGap使用的 Web浏览器与手机操作系统的浏览器其实是一样的。在IOS上,这将是原生Objective-C的UIWebView类;在Android上,这是android.webkit.WebView。

PhoneGap API
PhoneGap 提供了很多API让你可以使用JavaScript来调用很多原生操作系统提供的功能。整个过程就是你用 JavaScript 来写程序的逻辑,然后 PhoneGap API 来处理与原生系统的交互。

你能在这里找到所有的 PhoneGap API.

另外,你自己也可以使用JavaScript来创建"原生插件"。PhoneGap 的原生插件能让你自己去自定义本地类与对应的JavaScript接口。当然你可以从读读下面几篇文章区更好的了解 PhoneGap 原生插件。

PhoneGap 应用程序打包与发布
虽然 PhoneGap 应用是用HTML,CSS,JavaScript创建的,但是最终生成的是二进制的应用程序压缩文件,这种文件是可以以正规标准发布渠道发布的。

对于IOS应用来说,最终输出是IPA文件,对于Android应用,则是 APK 文件,对于Windows Phone应用,是 xap 文件,等等。最重要的是打包的格式与与标准原生应用是一样的。随后你就可以在与之对应的卖场上发布了(iTunes Store,Android Market, Amazon Market, BlackBerry App World,Windows Phone Marketplace等等)

PhoneGap 高级应用程序架构
PhoneGap 应用程序运行起来更像Web应用程序一样,PhoneGap 客户端与对应的服务器交互传递数据。服务器先处理业务逻辑然后将结果返回给客户端。


一般说来,服务器都是指像Apache,IIS这种环境与一些特定的脚本语言比如 ColdFusion, Java, .NET, PHP等。PhoneGap 是一个完全的前台展示技术来与任何类型的服务器使用标准Web协议来交互数据。应用程序的对应服务器来处理业务逻辑与计算,然后从数据库保存以及获取数据。

PhoneGap 应用一般不直接与数据库打交道;而是以标准HTTP来与服务器程序交互。来获取HTML内容,REST-ful XML Services,JSON  Services,或者SOAP。这和你创建的那种基于AJAX技术的桌面型浏览器控件的应用是差不多的。

PhoneGap 的这种客户端模式架构一般都是使用 single-page application model,即应用程序的逻辑都是在一个HTML页面上。而且页面不是从内存上清空。所有的数据都是需要以HTML DOM的方式来显示出来。首先使用AJAX技术来从服务器上获取数据,然后使在JavaScript中保存这些变量。
虽然多页面的客户端程序架构现在也被支持了,但是因为会在加载分离页面的时候你回丢失一些需要保存的变量,所以不建议使用这个新架构。
分享到:
评论

相关推荐

    用Html5JSCSS写的Android程序Hybrid模式

    在现代移动应用开发中,Hybrid模式已经成为一种常见的选择,它结合了Web技术和原生应用程序的优势。本项目“用Html5 JS CSS写的Android程序”正是基于这种混合开发模式,允许开发者利用HTML5、JavaScript和CSS3来...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...

    IONIC+PhoneGap项目源码

    IONIC是一款基于AngularJS框架的开源HTML5移动应用开发框架,它允许开发者使用Web技术(如HTML、CSS和JavaScript)构建原生感观的移动应用。IONIC的设计理念是“移动优先”,它提供了丰富的UI组件,使得开发者能够...

    Android DevCamp幻灯片分享:凡客移动应用之Android + HTML5技术运用 | 凡客 汪健飞 徐金山

    - **优势**:开发成本低、更新迭代快速、便于实现跨平台兼容性。 **技术简介**: - **WebView**:WebView是Android SDK中封装的一个组件,用于展示网页内容。它允许Java代码与JavaScript进行通信,实现了Native与...

    移动端混合开发框架分析.docx编程资料

    - AppCan是一款跨平台移动应用开发框架,支持HTML5、CSS3和JavaScript。 **框架实现:** - 采用Web技术栈进行开发,同时支持调用原生API。 **架构图:** - 由HTML5引擎、插件系统、调试工具等组成。 ##### 2.2 跨...

    Android-SDK@3.4.7.81308_20220424.zip

    无论是在网络不稳定还是追求快速迭代的场景下,这一组合都能显著提升开发效率,降低开发成本。因此,对于Android开发者,尤其是使用HBuilder进行HTML5+开发的团队来说,掌握如何有效利用这个版本的SDK是至关重要的。

    WeX5初级教程

    - 混合模式应用(Hybrid App): 体验略逊于原生应用,但开发成本低、易于跨平台开发。 - **HTML5的影响**: H5提高了Web应用的可用性和用户体验,使得混合模式应用接近原生应用的水平。 - **WeX5特点**: - 将H5标签...

    NSIDE实现在运行时通过调用JavascriptAPI来访问任何原生功能

    混合移动应用开发是指使用Web技术(如HTML、CSS和JavaScript)构建应用程序,并通过框架或工具将其与原生平台API集成,以实现接近原生应用的性能和功能。这种方式降低了学习成本,因为开发者可以利用已有的Web技能...

    用HTML5新特性开发移动

    - **数据库**:虽然HTML5提供了IndexedDB等本地存储解决方案,但在大规模数据处理和复杂数据库操作方面,原生应用更为强大。 综上所述,HTML5为移动Web App的发展带来了巨大的推动力,通过充分利用这些新特性,...

    毕业设计_基于Electron + Vue的桌面音乐助手的设计与实现(源码+PPT+视频+软件)

    这种混合开发模式使得开发者可以利用熟悉的Web技术栈,快速地构建出功能丰富的桌面应用,降低了开发成本。 4. **音乐播放功能**: 音乐助手的核心功能是播放音乐。这可能涉及到音频处理库的集成,如使用Web Audio ...

    rexsee非官方菜鸟安装文档

    2. **HTML5+CSS3+JavaScript+Rexsee扩展API**:提供了超过2000个JavaScript扩展API,使得开发者可以调用手机的多种功能,如电话、摄像头等。 3. **支持第三方JavaScript框架**:开发者可以利用现有的JavaScript库和...

    移动应用跨平台情况调查及分析

    - 开发成本低,维护简单。 - 受限于移动设备的屏幕尺寸和交互方式,用户体验可能不佳。 - **趋势**:随着Web技术的进步,如HTML5、CSS3等技术的发展,Web应用的功能性和用户体验得到了显著提升。未来,Web技术将...

    vip影视双端(apicloud)

    1. **ApiCloud平台**:这是一个混合移动应用开发平台,通过云端API和本地API相结合的方式,让开发者可以使用HTML5+CSS3+JavaScript进行跨平台的移动应用开发。 2. **跨平台开发**:利用ApiCloud,开发者可以在一个...

    管理系统系列--LeeCX 开源后台管理系统,前端基于bootstrap+jquery,后端基于springmvc+.zip

    【使用场景】此系统适用于企业内部管理、电商平台后台、内容管理系统等多种应用场景,提供了一套完整的解决方案,帮助开发者快速搭建和部署后台管理系统,降低开发成本。 【学习与开发】对于想要学习或参与开发的...

    微信小程序入门(整体概括)

    - **跨平台低成本**:利用HTML、CSS、JavaScript等Web技术进行开发,减少跨平台适配成本。 3. **微信团队支持**:微信团队为开发者提供技术支持和性能优化服务。 4. **入口优势**:微信作为超级App,为小程序带来...

    android Webview欢迎界面

    在Android开发中,Webview是一个非常重要的组件,它允许开发者在原生应用中嵌入网页...通过这样的方式,我们不仅可以实现丰富的视觉效果,还能充分利用Web技术的灵活性,降低开发成本,同时保持应用的性能和原生体验。

Global site tag (gtag.js) - Google Analytics