HyBrid App框架

  • RuiMan的博客 - [混合开发]HybridApp分析!!!
  • kingplus - Hybrid APP混合开发的一些经验和总结
  • chemdemo/chemdemo.github.io - Hybrid APP架构设计思路
  • Hybrid APP架构设计思路
  • 极致的 Hybrid 混合式开发(去啊App Hybrid 实战)

      之后,谨慎的我还去找了资料,综合了下。以下是找来的资料。
      博主在入坑了之后,深觉综合查询是重要的,学习一门技术需要看自己的能力水平和这门技术是否相对成熟(大牛勿笑)以及自己学习这项技术的目的。

简介

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技术的设计与实现

因此,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 框架有各自的优势。

看似高大上,Wex5只是在PhoneGap外面套了一层壳子,内部的UI都是通过大量的css,js实现的,页面切换也大量采用webapp模式,类似于JQuery Mobile中的框架,太过偏向于webapp,性能得不到较好的体验,而且缺少第三方功能SDK封装支持。而且压根就不适合初学者的人学习,太浪费时间,因为它是可视化开发,拖拽控件很简单易用,其实说白了就是一种傻瓜式开发,对于初学者来说是没有任何技术能力上的提高。根据我曾经使用经验来看,它的bug还是有很多,仍需要改善,相关的资料也只能在官网上去找了(特别是文档做的不是很好),没有繁华社区论坛(除了它自己官方的)。

作者:小象7023
链接:http://www.zhihu.com/question/45332551/answer/116926184
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

  • WeX5和Hbuilder开发出的App有什么区别?各有什么优点和缺点?
  • 当今时报的博客 - H5 App开发用WeX5垃圾 试用一周,我果断放弃了wex5

2.apicloud

官网:http://www.apicoud.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. 跨平台:同时支持iOS、Android、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 不能很好的解决原生代码的功能。

    • 【开发者眼中的AppCan】移动开发选择AppCan准没错(上)
    • 掌握这两个技术点,你可以玩转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.APICloud

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

成立时间:2014年01月03日

融资情况:未知

产品:APICloud,SuperWebView

集成的原生sdk:使用标准WEB技术开发iOS、Android原生应用,各类功能一站聚合、一键接入

  • 探秘Hybrid APP开发利器–SuperWebView

8.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. 需要结合插件使用。

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

  • 使用ionic+angular+phonegap开发APP入门
  • 皓眸大前端 - ionic中文教程

9. Intel XDK

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

成立时间:……

融资情况:未知

产品:Intel XDK

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

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

10.MUI

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

成立时间:……

融资情况:未知

产品:MUI

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

11.叮当

官网: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服务器

crosswalk

  • 有没有团队用过 crosswalk ?cordova 的 webview 用 crosswalk 代替的方案。说说使用感受。

附录

  • Striker的编程笔记 - 国内主流Hybrid app工具平台推荐
  • 混合开发模式下主流移动开发平台分析
  • 看看国外的phonegap和ionic移动app开发框架有多火
  • 基于Html5的移动端(APP)开发框架的优缺点-转自【B5教程网】
  • html5 + 相对于appcan,titanium,PhoneGap等优势和有待改进的地方是什么?
  • 皓眸大前端 - Hybrid_APP说一说

你可能感兴趣的:(框架,android,APP,H5,混合开发,hybrid)