hybrid app、web app与native app工具的初步比较与分析

主要 前端框架 和打包平台、工具

Web App（网页应用）

            使用的主要前端框架 jQuery Mobile 、amazeui  ThinkPHP Mobile 、 mui框架

            打包工具：cordova  phonegap 

Hybrid App（混合应用）

            使用的主要前端框架：mui框架  Vue.js React.js Ionic 即Angularjs开发生态

            打包工具 Hbuilder、Appcan、Wex5、Apicloud

Native App（原生应用）

            框架：ios 安卓开发语言

            开发工具：Xcode、Eclipse-ADT／Android Studio

各自特点区别

Web app:

主要使用H5(html5、css3、js)语言规范来编写，对JS语言掌握要求较高 。将 APP仅仅作为一个浏览器使用，里面跑在线或者离线的HTML代码，H5代码占比超过90%。

Web app的主要工作量在于写一个兼容性好的H5页面，包括分辨率、性能、浏览器支持等问题。如果对于分别多平台（不光iOS、Android，可能还有移动网页版和微信公众平台）做Native应用来说，肯定总成本是低的。

好处是如果能一套H5代码搞定多平台的话相当省时省力。如果H5代码写的好的话，其实在主流机型上的适配和体验也都过得去。

这个方案的缺点也很明显，在低配机上性能很差，如果H5代码写的不好，兼容性问题一堆，功能、安全性也受到很大的限制。

Hybridapp:

同Webapp使用H5作为主要编程语言，JS将作为主力连接原生SDK模块，应用中包含了Native代码(就是原生代码)，并且实现了部分H5体验不好、或者难以实现的逻辑（比如定位、埋点、本地持久存储、体感等）。有些情况下，程序的底层框架、核心逻辑、界面框架也会用Native来完成，H5只用来实现业务逻辑，H5代码占比在40%~80%左右。

上手难度、开发周期、跨平台属性

上手难度：

Hybridapp／Webapp：写一次，运行任何平台。简单

React-Native：学一次，写任何平台。中等

Nativeapp:学一次，只限运行特定平台。较难

开发周期：

Webapp：2～3周

Hybridapp：由于第三方工具兼容性、bug处理问题、调用js-原生模块(熟悉文档)，开发周期在2个月左右

React-Native：1个半月～2个月

Nativeapp:各1个半月～2个月

跨平台属性:

Webapp：支持多平台

Hybridapp：跨iOS、Android、Wp(PhoneGap支持)多平台

React-Native：跨iOS、Android双平台

Nativeapp:不跨平台

Hybrid app与Native app(就是原生APP)相比

1）混合式app的用户体验

页面与页面之间的切换，也称转场动画。随着手机硬件系统的更新换代，webview已有很大程度的提升，但即使是在iphone 6/6s plus上仍然是假性生硬切换，即使无卡顿。那么要做到诸如微信般切换已然无可能。

iOS系统如此，安卓系统情况亦不明朗。而由于混合式app依赖模块实现原生交互，在没有大量模块实现的情况下，需要使用html5-js来代替，体验更是大打折扣。

2）UI开发受限

许多创业公司由于产品交互需求，需要将app ui做到配色一致或更个性化（如带卡通下拉刷新），而混合式app的模块UI已写固定，自由化UI定制难。

3）集成第三方sdk

Hybrid app想要使用第三方sdk，首先要使用的工具平台支持，如果平台不支持，要么你请人写iOS／android模块，要么就是等。倘若新集成的sdk出现bug，你所能做的也是等，并没有其他好的办法。