HyBrid App框架介绍

简介

HybridApp概念


Hybrid App:Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play etc. Usually, they are downloaded from the platform to a target device, such as iPhone, Android phone or Windows Phone. The subscribers need to install to run them.

总体来讲,Hybrid App是同时采用网页语言与程序语言进行开发,通过不同的应用商店进行打包与分发,应用的特性更接近原生应用而且又区别与Web应用。但是在开发过程中同时使用了网页语言,所以开发成本与难度大大降低。也就是说Hybrid App兼具了Native App与Web App两者的诸多优点。

HyBrid App三种开发方式

所谓的Hybrid App其实会有不同的分支。而且会和Native应用有重合的地方。下面就说三种不同的解决方案。

方案一

使用PhoneGap、AppCan之类的中间件,以WebView作为用户界面层,以JavaScript作为基本逻辑,以及和中间件通讯,再由中间件访问底层API的方式,进行应用开发。这种架构一般会非常依赖WebView层的性能。

方案二

使用Adobe Air、RubyMotion、Appcelerator或者是Xamarin这种非官方语言的工具,打包成原生应用的方式开发。为什么笔者会将它们定义为Hybrid App,主要是它们并没有很单纯地使用原生提供的语言进行开发,而是通过对开发者提供友好的开发工具,并折中地把这种开发语言转换成原生语言,最终打包出整个应用,所以也属于混合应用范畴。

方案三

在开发原生应用的基础上,嵌入WebView但是整体的架构使用原生应用提供,一般这样的开发由Native开发人员和Web前端开发人员组成。Native开发人员会写好基本的架构以及API让Web开发人员开发界面以及大部分的渲染。保证到交互设计,以及开发都有一个比较折中的效果出来,优化得好也会有很棒的效果。(当年Facebook Three20就使用该方案)

因此,Hybrid App有以下的特性:

  1. 开发时可能不采用或者大部分不采用原生语言,但是却有所有原生应用的特性;
  2. 架构方案会和原生有出入,基本由工具而定;
  3. 具有跨平台特性;
  4. 一般开发相对原生开发的方式要简单。

浅析Hybrid App


Hybrid App主要以js+Native两者相互调用为主,从开发层面实现“一次开发,多处运行”的机制,成为真正适合跨平台的开发。目前已经有众多Hybrid App开发成功应用,比如百度、网易、街旁等知名移动应用,都是采用Hybrid App开发模式。

经过众多开发者与成功案例证明Hybrid App兼具了Native App的良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。现在有更多的开发者在面临移动平台的选择,所以在这里根据开发中各个平台的使用情况,针对现在主流的平台进行分析。

主流移动平台分析


由于hybridapp工具市场竞争异常激烈,在此严正声明:以下排名不分先后,请勿对号入座,后果自负。

1.wex5


官网:http://www.wex5.com/wex5/?utm_source=Baidu

成立时间:2014年11月

融资情况:未知

产品:wex5(免费)、bex5(企业版 收费)

集成的原生sdk:大部分为cordova(phonegap)插件 极光、微信支付、支付宝

介绍:Wex5 App虽然打开速度是快,但是响应就很让人无语,在手机上运行效果很差。而且相关API文档就仿佛不是他们公司的一样,很多对不上,而且不详细。论坛也比较少教程。当然,他们的交流群很热情。

优点:

  1. 高效精致的UI组件体系,基于jQuery和bootstrap技术,采用增强的RequireJS模块化技术。
  2. 基于phonegap(cordova)框架,如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池等。
  3. 可视化拖拽式集成开发环境IDE,全能力的调试支持和智能代码提示

缺点:

  1. 使用范围有限:适用:一般app、电商app、客服app、会员app、微店微商等
  2. 用户量小,存在不稳定因素。

以下是网上的一些观点,自行考虑,博主不进行评价。请客观的对待,各个Hybrid App 框架有各自的优势。


2.apicloud


官网:http://www.apicloud.com/

成立时间:2014年10月

融资情况:550万美金

产品:apicloud studio(免费)

集成的原生sdk:
支付宝支付、ipaynow、ping++、coinport比特币支付、ipaynowScanner扫描支付、微信支付、银联支付、beecloud支付
qq登录-分享、微博登录-分享、微信分享-支付-登录、京东登录、superID
酷果广告、芒果联盟广告、多盟广告平台、游族网络、点开科技广告、H2广告交易平台、畅思广告、科大讯飞移动广告、有米广告
百度地图、百度定位、百度导航
融云、个推、极光、腾讯信鸽推送、Bmob后端云、美恰、udesk、领通移动应用远程协助、环信、kf5
云之讯、mob.com、极验验证
云知声语音识别、科大讯飞、图灵机器人、脉可寻名片、合合信息图片处理
百姓网、iBeacon智能硬件、云智慧、talkingdata、诸葛io、机智云、听云、logCrash、优酷播放器

优点:

  1. 提供开发的IDE。
  2. 提供数据云API、统计云API、推送云API

缺点:

  1. 与Hbuilder存在版权问题,抄袭Hbuilder

3.appcan


官网:http://www.appcan.cn/

成立时间:2010年初

融资情况:1亿元人民币

产品:公众版(免费)与企业版(收费)

集成的原生sdk:
壹壹电话、云知声、科大讯飞、百度导航、魔窗、beecloud、极验验证、云智慧(透视宝)、天翼rtc、腾讯信鸽推送、个推、高德地图、极光推送、环信、ping++移动支付、汉仪字库、美恰、testin云测、微信(登录、分享、支付)、百度地图、支付宝快捷支付插件、信鸽、qq登录、银联支付、腾讯微博、新浪微博

产品功能:

AppCan是本土移动开发中使用最广的移动平台,网络舆论而言,AppCan是PhoneGap的中国化,但是从对AppCan实际使用,以及转向移动开发的朋友们互相交流反馈,他们是截然不同的两个移动平台,AppCan不仅封装了类似于PhoneGap的本地调用功能,而且封装了uexWindow多窗口机制,实现了移动端的iframe效果,虽然不是开源项目,但一直都有面向开发者的免费版,并且也有定位于企业用户的企业版套装,目前最新版本为2.2.X。

特性:

  1. 提供的集成开发环境的IDE进行模拟器开发。
  2. 兼容性,一次开发,多处运行。
  3. 使用JS+html5 ,成本低。
  4. 在线打包。
  5. 代码加密保护机制。

优点:

  1. 跨平台:同时支持iOSandroid、Symbian、Windows Phone
  2. 原生体验:引入原生UI控件与交互支持(如Action Sheet等)
  3. 开发工具:基于Eclipse的开发工具,集成UI控件与应用管理
  4. UI框架:提供强大的UI框架,更加易于实现页面布局与交互
  5. 设备API:支持各种手机设备调用,如电话、相机、传感器、定位等
  6. 本地打包:无需配置环境,无需编译,本地一键打包
  7. 插件机制:支持第三方原生插件,支持JS插件
  8. 代码加密:基于密钥的加密方式,无法破解,像混编一样保护html代码
  9. 统计分析:应用分平台安装数统计,应用启动和使用情况统计
  10. 开放平台:更具本土优势,已经对接Sina、QQ、百度等开放平台
  11. 技术支持:技术支持及时响应,重视开发者建议和反馈
  12. 支持在线上传证书打包,对于不了解苹果,以及Android 环境开发的人是福音。
  13. 支持更多的原生调用,比如UI控件的封装,通讯类(socket),地图,支付宝等更多的原生控件支持。
  14. 拥有统一数据统计平台,便于运营管理开发的应用。

缺点:

  1. 虽然有中文的开发文档,但描述比较简单,希望他们丰富他们的API文档。
  2. 免费版本不支持自定义插件(据说企业版可以自定义插件)。
  3. 暂时只支持ios,Android两大平台,不知道什么时候推出Windows Phone 8?
  4. 许多功能需要企业版才能实现,不过是收费的。
  5. AppCan免费版因需要把源代码上传到厂商的服务器上打包,对于企业开发来说源代码泄露安全性上有一定风险。企业版虽然可以解决,但企业版稳定尚待观察。
  6. AppCan采用封装的组件,依赖性比较高。不是开源代码。
  7. AppCan 不能很好的解决原生代码的功能。

4.dcloud


官网:http://www.dcloud.io/

成立时间:2014年

融资情况:1200万人民币

产品:hbuilder、5+runtime、mui(免费)

集成的原生sdk:通过5+sdk自行集成

5.phonegap(Cordova)


官网:http://www.phonegap.com

成立时间:2008年8月

融资情况:已被adobe收购

产品:phonegap(cordova)

集成的原生sdk:自行集成

产品功能:

PhoneGap是一款国外的开源移动开发平台。目前已经将核心代码贡献给Apache cordova,最新版本是2.6.0,它是基于HTML,CSS和javascript的,可以使用一些开源的框架比如jquery Mobile,Dojo Mobile,Sencha Touch等等来提高用户体验,也提供了比较丰富的原生插件调用。

特性:

  1. 可以使用DreamWeaver 5.5编码,现在使用appMobi提供的xdk 进行模拟器开发。
  2. 代码开源,开发者可以放心使用。
  3. 兼容性,一次开发,多处运行。
  4. 使用JS+Html5,成本低。

优点:

  1. Native接口比较丰富,通过封装的API可以直接访问硬件,比如说加速,相机,指南针,GPS,文件访问等。
  2. 接口文档描述非常详细。
  3. 支持平台多,包括iOS,Android,Blackberry,Symbian,bada,Windows Phone 7,Windows Phone 8 等。
    1. 可跨平台。phonegap框架帮我们解决了差异性,javascript与平台系统的连接由phonegap框架完成。成为连接移动终端的适配器,或者说中间件。
    2. 提供硬件访问控制。可调用加速计、摄像头、罗盘、通讯录、文档、地理定位、媒体、网络、通知(警告、声音和振动)、存储。
    3. 可利用成熟JavaScript框架。如:Ext js、jQuery。

缺点:

  1. 需要针对相应的平台环境配置,进行编译,打包测试,发布等等。由于使用Hybrid开发的用户群,大部分是web开发者,对原生开发基本不了解,这无疑给每一个开发者增加了沉重的负担,需要对各个平台的开发都要需要了解,对硬件等等都要配置,加大开发成本。
  2. 使用效果启动慢,页面切换响应慢,数据请求慢。调试难度大,内存消耗大。不能完全跨平台,不同平台代码需要微调。
  3. 文档虽比较详细但是基本是英文,对于国内大部分用户英文水平较差的是比较大的挑战。
  4. 因为是国外的框架,技术支持不够到位,出现问题,无法排解,成为技术攻关的难点。

侧重点:侧重于对硬件的访问控制

6.crossapp


官网:http://www.crossapp.com.cn

成立时间:2014年6月

融资情况:9秒社团旗下

产品:crossapp

集成的原生sdk:自行集成

 

7.ionic(ionicframework)


官网:http://www.ionic.wang/

成立时间:……

融资情况:未知

产品:ionic

集成的原生sdk:基于phonegap 以及AngularJS

介绍: Ionic 是一个强大的 HTML5 应用程序开发框架,号称 Advanced HTML5 Hybrid Mobile AppFramework 是 angularjs 移动端解决方案 可以帮助您使用 Web 技术,比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。 Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 Ionic 是一个轻量的手机 UI 库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI 库在手机上运行缓慢的问题。

优点:

  1. 追求性能 运行速度快
  2. 轻量级框架
  3. 基于 Angularjs,支持 Angularjs的特性, MVC ,代码易维护
  4. 通过 SASS 构建应用程序。它提供了很多 UI 组件来帮助开发者开发强大的应用。
  5. 接近原生。
  6. 强大的命令行工具
  7. 可利用成熟javascript框架。如:Ext js、jQuery。

缺点:

  1. Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用
  2. 需要结合插件使用。

侧重点:侧重于前端的交互

8. Intel XDK


官网:https://software.intel.com/zh-cn/intel-xdk

成立时间:……

融资情况:未知

产品:Intel XDK

集成的原生sdk:支持基地和第三方 Cordova 插件

介绍:Intel XDK是一款HTML5跨平台集成开发工具,利用HTML5的技术可以快速开发应用或者游戏,并快速打包成诸如安卓,IOS,WindowsPhone等平台上的应用并发布到应用商店,可谓是一条路服务了,并有crosswalk做支持,在设备上运行起来也更流畅。

9.MUI


官网:http://dev.dcloud.net.cn/mui/

成立时间:……

融资情况:未知

产品:MUI

简介:这是最接近原生体验、体积最小、载入最快的前端框架。

10.叮当


官网:http://www.dingdone.com/index#home

github地址:https://github.com/dcloudio/mui/releases

成立时间:2015-09-14

产品:叮当

简介:使用模板快速生成App

比较


phonegap与appcan什么区别?

  • phonegap与appcan什么区别?
    • 大概浏览了一下appcan的文档,api设计只能用莫名其妙来形容,各种缩写,各种看不懂。
      作者:张帅
      链接:http://www.zhihu.com/question/20636653/answer/87146800
      来源:知乎
      著作权归作者所有,转载请联系作者获得授权。
    • appcan我都快用哭了,文档表述不清不说,还各种错别字,看不懂的时候,我都在怀疑是不是我的文字理解能力有问题;社区回答不是很给力,提出的webapp/微信多入口开发基本无用,封装过于厉害,出现问题自己基本是解决不了的,css写的太牛,导致我需要什么效果都是自己再写。但是也有很多不错的地方,提供的模板很多,做简单应用的话拿来就用了,不是太复杂的应用/不需要很好的效果的话,是个挺不错的选择,以上是免费版评价。准备换弃了,都说ionic不错,准备试试。
      作者:高雷
      链接:http://www.zhihu.com/question/20636653/answer/87146800
      来源:知乎
      著作权归作者所有,转载请联系作者获得授权。
    • phonegap现在apache开源为cordova 。apache的东西就是什么你都能自己整。全部基于html5。走的是webkit ,所以速度有webkit限制。但是html5标准都是支持。推送聊天,等等都需要自己开发。走的都是websocket 。 (网上也有现成开发好的)。当然你也可以开发基于webView开发插件。这里,你想开发好一点的软件,最好学习ionic和angleJS
      appcan是一种 native的变种。大部分操作都是基于原生的。uexXXX各种插件,进行原生调用,其实就是封装了的操作变成同一的javascript操作。(这里比如推送,android和ios 就要分别开发。api不同。)ui这一块提供了一个弹性和模型。 他们的官网总崩溃。api特别难懂。demo错了一堆。
      下面吐槽一下:
      中国开发都是开源部分,你先用,用用就离不开我了,收费。(开发小软件。还可以,使用好了速度快。bug也不少)
      外国开发都是全开源。你开发我开发,大家一起开发。资源插件,相对少一点,主要是google不能用。在不都是英文的。学习成本高。
      作者:liudonghe1234
      链接:http://www.zhihu.com/question/20636653/answer/93251051
      来源:知乎
      著作权归作者所有,转载请联系作者获得授权。
    • appcan和phonegap - 详细比较和分析

表格来源于:Phonegap VS AppCan ,有兴趣的朋友可以看看,这篇博文详细的介绍了两者之间的区别。

比较表格 Phonegap AppCan
框架功能 简单 丰富
支持平台 大部分平台 仅4种平台
开发环境 不同平台需要不同开发环境 只需一个IDE包
调试 可直接调试 本地发布的IOS包,必须部署在越狱的机器上
发布 在本地可以直接发布 必须将代码上传至服务器,才能发布
IOS 签名管理 本地管理 需要上传至服务器
代码泄露风险 低:仅在本地、svn保存代码 高:需将代码上传至appcan服务器
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: