native APP,hybrid APP,web APP, 小程序的区别

随着智能手机的普及，移动端应用几乎成为每个互联网产品的标配。在快速迭代的互联网战场中高效开发、低成本上线产品，是每个应用开发团队追求的目标。此时，选择合适的应用类型和开发模式便至关重要。移动应用可以粗分为三种：原生应用(native app)，网页应用(web app，或HTML5 app)，以及它们的混血儿——混合模式移动应用(hybrid app)。
今天就来和大家简单聊聊近年来蓬勃发展的hybrid app。

一、什么是Hybrid Mobile App

Hybrid app从外观上来看是一个native app，实则只有一个UIWebView，里面访问的是一个web app，如新闻类和视频类的应用普遍采取该策略：native的框架加上web的内容。不同于native app需要针对不同的平台使用不同的开发语言（如使用Objective-C、Swift开发iOS应用，使用Java等开发Android应用，使用C#开发Windows Phone应用），hybrid app允许开发者仅使用一套网页语言代码（HTML5+CSS+JavaScript），即可开发能够在不同平台上部署的类原生应用。由于hybrid app结合了native app良好用户交互体验和web app跨平台开发的优势，能够显著节省移动应用开发的时间和成本，hybrid app得到越来越多公司的青睐。

Source: Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options

按照网页语言和程序语言的混合，hybrid app通常可以分为三种类型：

多View混合型： native view和web view独立展示，交替出现。其应用主体通常是native app，web技术作为补充。即在需要的时候，将web view作为独立的view运行，在web view内完成相关的展示操作。开发难度与native app相当。举个栗子：Instagram的timeline使用的是web view。

单View混合型： 在同一个view内，native view和web view为层叠关系，同时出现。开发成本较高，难度较大，但是体验较好。举个栗子：百度搜索同时实现充分的灵活性和较好的用户体验。

Web主体型： 应用主体是web view，穿插native功能，主要以网页语言编写。整体开发难度低，基本可以实现跨平台；而用户体验好坏，主要取决于底层中间件的交互与跨平台能力。举个栗子：项目管理工具 Basecamp使用web view呈现内容，调用系统原生API实现界面导航等功能来提高用户体验。

Hybrid app也并非是完美的解决方案。由于其使用HTML5，某些依赖于复杂的原生功能或者繁重的过渡动画的应用会出现卡顿；同时，为了模拟native app的UI和感官，需要投入额外的时间和精力；尽管可以跨平台，但是并不能完全支持所有的设备和操作系统；最后，如果应用的体验不够原生化，如一个简单的网站，则还有被Apple App Store拒绝的风险。

二、什么时候选择Hybrid App

在hybrid app备受追捧的今天，我们也许会随大流优先考虑开发hybrid app。但是，每个产品各具特色，还没有哪一种解决方案可以完美地应万变。hybrid app的中庸让它大放异彩，也限制了它的应用场景。在决定采用一种开发模式之前，有许多因素需要考虑，诸如：

你希望针对哪个平台做开发？
你希望通过应用商店发布应用么？
你希望利用手机特有的性能么？
你的团队技术能力如何？
你的项目周期和预算是多少？

如果要设计Angry Birds一类对图形要求很高的游戏，那么在暂不考虑技术团队能力的情况下，native app是最优选择；如果要设计如Yelp一类内容导向的应用，那么hybrid app会是很好的选择；如果项目时间紧张，没有足够的人手和资金，对图形和系统原生特性没有要求，那么web app将是性价比最高的解决方案。

表一对比了native app,hybrid app和web app在不同方面的表现，可以帮助你根据实际情况选择最佳的解决方案。

InfoQ上高嘉峻的一篇文章分享了几个hybrid app开发的误区，也是开发过程中应该尽量避免的：

为了HTML5而hybrid app： HTML5是HTML4.0.1和XHTML1.0的升级版，有更强大的表现功能，并加入了local storage等技术，为web页面提供了更大的想象空间和更多的可能性。但是，作为发展中的技术，HTML5收到浏览器兼容性和手机硬件水平的影响，能提供的功能和native app扔有一定的差距。开发应用时，首先是要满足用户需求，而不是追赶技术革新的大潮。所以开发应用时，应从应用本身功能和团队开发资源综合考量，决定是否采用hybrid app开发模式。

忽略关键因素： Web是基于PC的一种开发模式，而mobile app运行于移动端。通常，web开发者使用PC浏览器模拟app中的web view进行调试，而不是直接使用手机上的web view。二者能支配的CPU资源，最大占有内存，运行网络环境，和鼠标/触控操作，浏览器对CSS/JS的解析和对事件的处理有着巨大的差别。而这些差别常常是web页面能否正常运行于app中的关键因素。

富交互导致体验差： 这主要体现在两个方面：（1）web与手机平台默认交互习惯不一致：iOS和Android各有一套交互习惯，包括视觉风格，界面切换，操作习惯等。比如手机端系统风格是左右滑屏来进入或者退出界面，而旧界面保持状态；web则是默认无论加载还是后退，都会刷新旧界面，造成体验上的损失。如果模拟native的交互方式，那么会提高开发成本，却也难以达到native的流畅性。（2）与native相比同样的功能在性能上存在差距：Web界面上JS对HTML Node的操作需要消耗大量的CPU资源。首先，手机的CPU性能普遍低于PC端；其次，不同手机之间的硬件水平也参差不齐，比如在iPhone6s上可以流畅运行的界面，在iPhone5、MX5上可能就无法达到同样的流畅度。

跨平台： Hybrid app的优势之一是继承web跨平台的特性。然而，在智能手机软硬件版本众多的今天，兼容性是个不容忽视的问题。不同的安卓操作系统其浏览器内核对JS和CSS的解析、事件处理会有不同；iOS不同版本之间也存在较大差异。所以，在跨平台开发时，兼容性也是需要重点考虑的问题。

交互一致性： 这里的一致性并非指同一应用在不同平台上的一致性体验，而是指在同一平台上，hybrid app和native平台的一致性。比如“返回”操作，在iOS平台上页面顶部留有一个44像素高的导航栏，左侧的返回按钮用于返回操作，可以通过绝对地址的方式链接到任何其它界面；而Android通常使用设备提供的返回键，返回上一个界面，如果自行配置平台返回按钮，那么它会和设备提供的返回键指向不同的位置。

<2>区分三者

nativeapp是一个原生程序，一般运行在机器操作系统上，有很强的交互，一般静态资源都是在本地的。浏览使用方便，体验度高。在实现上要么使用Objecttive-c和cocoaTouch Framework撰写iOS程序，要么选择java+Android Framework撰写android应用程序。
hybridapp是一个半原生程序，伪造了一个浏览器的apk/ipa原生程序，把地址写死了，然后里面运行了一个webapp。里面是WebView UI 。但是还是运行在机器的操作系统上，交互较弱，资源一般在本地或者网络都可以。浏览体验度次之。
webapp是生存在浏览器里的应用，所以只能运行在浏览器里，宿主是浏览器，不再是操作系统。资源一般都在网络上。说的根本点就是一个触屏版的网站

什么叫做原生App?

原生App是专门针对某一类移动设备而生的，它们都是被直接安装到设备里，而用户一般也是通过网络商店或者卖场来获取例如 The App Store 与Android Apps on Google Play 随便说几个原生App的例子，比如iOS的Camera+以及Android的 KeePassDroid

什么叫做移动Web App?

一般说来，移动Web App都是都是需要用到网络的，它们利用设备上的浏览器(比如iPhone的Safari)来运行，而且它们不需要在设备上下载后安装。

什么是混合app?

Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，比如街旁网最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。再彻底一点的，如掌上百度和淘宝客户端Android版，走的也是Hybrid App的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。

综合一下就是：“Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用”。总体特性更接近Native App但是和Web App区别较大。只是因为同时使用了网页语言编码，所以开发成本和难度比Native App要小很多。因此说，Hybrid App兼具了Native App的所有优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。
Web App是指基于Web的系统和应用，运行在高端手机的网络和浏览器上，用网页技术开发实现特定功能的应用，对手机性能要求比较高。
Native App（原生开发）:目前较为成熟，各大公司均采用此方式。但是其人工成本较高，同一个项目，至少需要Android端、iOS端、Web端三个开发团队。
Hybrid App（混合开发），基于第三方跨平台移动应用引擎框架进行开发。使用HTML5和JS作为开发，调用引擎封装的底层功能如照相机、传感器、通讯录等。

拿酒来形象化这三种模式的话：

Web App就像白酒那样浑厚甘醇，度数高，但不适合任何人的口味，制造成本低，

Native App就是葡萄酒，分红白类型，对葡萄品质要求高，口味大众化，比较成熟，

Hybrid App就是鸡尾酒，混合了多种酒的优势，非常适合跨平台，是以后的一个App开发趋势。

<3>区分native APP ，web APP，hybrid APP

1、Native App

Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。一般使用的开发语言为JAVA、C++、Objective-C。

想创建Native App，开发者必须编写源代码，使用由操作系统开发商提供的工具，对源代码进行编译。代码编译之后以2进制或者字节码的形式运行在操作系统上，直接调用操作系统的Device API。

虽然不同操作系统上进行的开发过程常常很相似，但是每一种移动操作系统都随带各自的独特工具。平台之间的这些区别导致了Native开发方法的最重大缺点之一：为一种移动平台编写的代码无法在另一种平台上使用。Native App的优缺点总结如下：

优点

提供最佳的用户体验，最优质的用户界面，最华丽的交互
针对不同平台提供不同体验
下载到本地，可节省带宽成本
可访问本地资源
直接访问系统级API
操作速度更快
用户留存率高

缺点

移植到不同平台上比较麻烦
需要维护多个版本
发布新版本需要通过store或market的确认
盈利需要与第三方分成
开发的成本比较大，需要针对不同平台开发相应的版本
更新体验较差、同时也比较麻烦（每一次发布新的版本，都需要做版本打包，且需要用户手动更新，或一个让用户反感的提示）。

2、Web App

Web App是运行于网络和标准浏览器上，以HTML+JS+CSS等WEB技术开发实现特定功能的应用。通过浏览器来调用Device API，但是只有数量有限的这些API向浏览器里面运行的Web App公开。基于当下开始普及流行的HTML5，Web App可以实现很多原本Native App才可以实现的功能，，比如LBS的功能、本地数据存储、音视频播放的功能，甚至还有调用照相机和结合GPU的硬件加速功能。

由于它不依赖于操作系统，因此开发了一款Web App后，基本能应用于各种系统平台。并且还有版本升级容易的优势（毕竟服务器是受自己控制的）。但是这种方案的缺点也很明显——无法使用系统级API，只能做为一个临时的入口，用户很难留存。Web App的优缺点总结如下：

优点

开发成本低；
更新快；
更新无需通知用户，不需要手动升级；
能够跨多个平台和终端；
维护比较简单。

缺点

临时性的入口；
无法获取系统级别的通知，提醒，动效等等；
用户留存率低；
需要依赖网络，体验较差。

3、Hybrid App

Hybrid App是一种用Native技术来搭建App的外壳，壳里的内容由Web技术来提供的移动应用，兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势”。

根据实现的不同，可以细分为两种实现方案：

（1）在Native App中使用WebView加载远端Web资源

这种方案的Web资源放置在服务器上，开发者不必经历提交和批准过程——有些App商店要求这个过程，就可以对App进行小幅更新。遗憾的是，这个方法摈弃了任何离线可用性，因为设备与网络没有连接时，无法访问设备。

（2）将一组HTML、JavaScript、CSS和媒体文件，封装到App代码中，存储在设备本地，使用Cordova/PhoneGap等框架通过WebView加载本地资源进行页面渲染
把Web代码封装到App里面在一定程度上缓解从远端加载静态资源导致UI展示延迟的问题，可以提高性能和可访问性，并且还可以通过桥接Native和Web来调用一些Device的API。
但是其劣势也很明显，一是不允许远程更新；二是安装包变大；三是如果想调用相关平台的API，需要针对平台单独进行开发，如果在应用中用到了大量的Device API，那么开发的效率将大大降低。

Hybrid App同时使用网页语言与程序语言开发，但其总体特性更接近Native App。只是因为同时使用了web语言编码，所以开发成本和难度比Native App要小很多。因此，Hybrid App兼具了Native App的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。

native APP,hybrid APP,web APP, 小程序的区别相关推荐

【移动端debug-6】如何做一个App里的web调试小工具
原文链接:如何做一个App里的web调试小工具我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...
【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现
基于APP的微信点餐小程序的设计与实现摘要本文介绍了一种基于APP的微信点餐小程序的设计与实现方法.该系统利用微信公众号作为用户入口,用户可以通过微信扫码进入点餐系统,选择菜品.下单.支付等操作 ...
APP自动化_操作微信小程序/H5页面实现自动化_多终端并行
APP自动化_混合App自动化理论相关原理:本质是混合app,应该用切入webview的方法去自动化web页面. 现状:目前由于技术原因无法切到webview中做自动化. 方案:采用原生app自动方 ...
十多个巨头App上可跑智能小程序了
十多个巨头App上可跑智能小程序了 11月1日,百度副总裁沈抖在2018百度世界大会上抛出智能小程序的多个重磅消息,再次成为开发者关注的焦点. 十多个头部App开跑智能小程序百度正式成立智能小程序开 ...
APP 抓包和微信小程序抓包-Charles 的精简使用教程
APP 抓包和微信小程序抓包-Charles 的精简使用教程 2021-09-25 更新 2019-07-10 更新目标教程一.安装 Charles 二.Charles 简介 (1)Charle ...
APP与小程序的区别以及各自的优势
最近有粉丝在公众号上私信我说,自己定制一个软件,但前期预算没那么高,想知道自己是先做一个APP还是先做一个小程序?他们有什么不同? 今天带着这个问题和大家分享下开发APP和小程序的区别与他们各自的优势 ...
订阅号助手APP怎么插入留言板小程序？
现在很多小伙伴都是都是利用碎片化的时间来编写文章,身边并没有电脑,这个时候就没有办法使用电脑浏览器上的订阅号留言板插件来接入留言功能了,好在我们又开发了手机端在订阅号助手APP上接入留言板小程序的功能 ...
移动端App分享，以及微信小程序和公众号分享功能实现
移动端App分享,以及微信小程序和公众号分享功能实现分享功能记录收藏,上链接前端工作记录
web系统手机app 能访问吗?_成都APP开发：原生APP开发与Web APP开发有什么区别呢？...
智能手机上的APP应用软件对于人们来说已经成为日常工作生活当中必不可少的工具,无论是工作生活中的聊天交流,购物,饮食,出行,娱乐都会有相应的APP软件.目前常见的APP软件开发模式有两种,一种是原生A ...
原生开发什么意思_成都APP开发：原生APP开发与Web APP开发有什么区别呢？
智能手机上的APP应用软件对于人们来说已经成为日常工作生活当中必不可少的工具,无论是工作生活中的聊天交流,购物,饮食,出行,娱乐都会有相应的APP软件.目前常见的APP软件开发模式有两种,一种是原生A ...

native APP,hybrid APP,web APP, 小程序的区别

一、什么是Hybrid Mobile App

二、什么时候选择Hybrid App

<2>区分三者

<3>区分native APP ，web APP，hybrid APP

native APP,hybrid APP,web APP, 小程序的区别相关推荐

最新文章

热门文章

native APP,hybrid APP,web APP, 小程序的区别

一、什么是Hybrid Mobile App

二、 什么时候选择Hybrid App

<2>区分三者

<3>区分native APP ，web APP，hybrid APP

native APP,hybrid APP,web APP, 小程序的区别相关推荐

最新文章

热门文章

二、什么时候选择Hybrid App