HybridAPP分析

1、项目状况

由于跨平台的特性（节省开发成本），因此使用的WebAPP和HybridAPP的应用范围越来越广阔，最近由于项目需要，我也尝试了一下HybridAPP使用。额，为了不要纯文字太寡了，自己看的不爽。所以我搞了张图片，嗯你们会理解的。



刚开始，我使用的是angularJS的SPA+JQM的UI+APP端的单个WebView的解决方案来制作APP。但在即将完成的时候，却发现纯WebAPP的这种解决方案在交互上会有好几个问题：

无法使用手机的API。单纯的HTML+JS无法使用APP的一些原生接口，例如相机、陀螺仪、GPS定位、APP分享等功能

交互略差。无法模仿原生中的一些手势动作，如点击并且拖动。无法做到下拉刷新这一些功能。

捕捉后退逻辑（当然这个方面可以使用history.state的H5API解决）

不同浏览器需要兼容API，例如某些机型的自带浏览器版本较低，不支持H5的API。

因此在紧急商量后，转为使用混合多View型的HybridAPP

功能：用原生做header：可以上下拉来刷新

交互更畅顺（拖动），转页可以使用原生的动画。同时部分数据存储在APP中。

APP端提供了API



（图片google来的……请见谅）主要的架构如下：

客户端（APP）负责界面的展现，业务逻辑的处理以及数据模型就是MVVM的模型了，然后APP方面集成了浏览器，并且提供相应的一些APP的服务。

而服务器端则与CS架构的服务器端相同。

2、分析

在个人使用了纯WebAPP（APK中仅包含一个WebView，无多余接口提供调用）和HybridAPP（多View混合型）之后，个人整理了一下两者之间的差距。

WebAPP：

优势：

1、前端可以最大限度的操作整个APP

2、开发中的交流成本较低

劣势：

1、多种原生API不能调用

2、需要多写很代码去克服跳转逻辑之类的问题

3、需要兼容浏览器

4、交互性会较弱，特别对于习惯使用手势的用户而言。

HybridAPP：

优势：

1、可以调用原生API

2、跳转逻辑完全可以使用原生APP来处理，节省前端的代码

3、交互性强

劣势：

1、开发成本较WebAPP高

2、前端对页面的控制能力变弱，很多功能都只能调用APP提供的API，而不能使用原来的H5的API（例如cookie，localStorage）

但无论如何，HybridAPP依然会比纯原生的APP开发会更加节省资源。

3、可选用的一些框架

目前的一些框架应用，通常都包括有开发的IDE（开发环境以及测试环境），调用原生API的JS接口，mobileUI风格库。

phoneGap：风格较为贴近原生WebAPP，让前端有较大的空间去发挥，而且避免了不能调用原生API的缺陷，但对于用户交互方面也只能做到尽量模仿。

exMobi，MUI：多View型的APP开发，对交互方面会比较有保障。

4、个人建议

1、必须在一开始就确定好是使用WebAPP，hybridAPP（SPA型），hybridAPP（多View混合型）。否则需要多次返工。

2、需要确定好使用的逻辑框架（AngularJS），UI框架（JQM），或者是全套框架（PhoneGap，exMobi，MUI），开发工具（编辑器、IDE）

3、目前虽然WebAPP和HybridAPP这一些架构都是颇为火热，但毕竟市场上缺少这一类能够撑场子的APP，而且对用户的一些交互也会有一定的妨碍。个人认为这一类的APP依然在发展，但是目前而言，如果需要做这一类APP，选用多View混合型的APP会比较符合客户的需求。（至少用起来比较像原生的APP）

参考资料：

PhoneGap：http://www.phonegapcn.com/component/content/article/34-phonegap-news/88-phonegap-introduction

ExMobi：http://www.exmobi.cn/

MUI：http://dcloudio.github.io/mui/

蜂窝网：HybridAPP的分析：http://www.phonewo.net/plan/app-plan/11411.html