2016年7月

1、什么是Hybrid App?

介绍Hybrid App之前首先需要了解目前主流手机应用程序有哪些？

Native App
Web App
Hybrid App

HyBrid App开发入门

Native App 是一个原生程序，一般运行在机器操作系统上，有很强的交互，一般静态资源都是在本地的。浏览使用方便，体验度高。在实现上要么使用Objecttive-c/swift和cocoaTouch Framework撰写IOS程序，要么选择java+Android Framework撰写android应用程序，具备设备访问能力。

Web App 是生存在浏览器里的应用，所以只能运行在浏览器里，宿主是浏览器，不再是操作系统。资源一般都在网络上。本质上是一个触屏版的网站。不具备设备访问能力。

Hybrid App 是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，但是还是运行在机器的操作系统上，交互较弱，资源一般在本地或者网络都可以。具备设备访问能力。

三者优缺点对比

应用类型	优点	缺点
Native App	(1). 打造完美的用户体验 (2). 性能稳定 (3). 操作速度快，上手流畅 (4). 访问本地资源(通讯录，相册) (5). 设计出色的动效，转场 (6). 拥有系统级别的贴心通知或提醒 7.用户留存率高	(1). 分发成本高(不同平台有不同的开发语言和界面适配) (2). 维护成本高(例如一款App已更新至V5版本, 但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本) (3). 更新缓慢，根据不同平台，提交–审核–上线等等不同的流程，需要经过的流程较复杂
Web App	(1). 开发成本低 (2). 更新快 (3). 更新无需通知用户，不需要手动升级 (4). 能够跨多个平台和终端	(1). 临时性的入口 (2). 无法获取系统级别的通知，提醒，动效等 (3). 用户留存率低 (4). 设计受限制诸多 (5). 体验较差
Hybrid App	(1). 跨平台，一次开发，所有平台生效 (2). 快速发布，应用内更新不需要提交到AppStore (3). 开发高效成本低，通过HTML+CSS+Javascript开发应用 (4). 丰富的Device API, 通过桥接可以直接调用设备API	(1). 图形和动画渲染效果较差，CPU/GPU密集类应用目前看更适合Native (2). 静态资源从服务器端加载导致的UI展示延迟问题

三者属性对比

类型	Web	Hybrid	Native
开发成本	低	中	高
维护更新	简单	简单	复杂
体验	差	中	优
应用市场认可	不认可	认可	认可
安装	不需要	需要	需要
跨平台	优	中	差
图像渲染	HTML，Canvas，CSS	混合	本地API渲染
原生界面	模仿	部分原生，部分模仿	原生
原生API	不可调用	可调用	可调用
网络要求	全部依赖	大部分依赖	支持离线

2.Hybrid App开发方案

方案一 重混合应用，在开发原生应用的基础上，嵌入WebView但是整体的架构使用原生应用提供，一般这样的开发由Native开发人员和Web前端开发人员组成。Native开发人员会写好基本的架构以及API让Web开发人员开发界面以及大部分的渲染。保证到交互设计，以及开发都有一个比较折中的效果出来，优化得好也会有很棒的效果。
Hybrid App技术发展的早期， Web的运行性能成为主要瓶颈！
为解决性能问题Hybrid App走向“ 重混”。

通过多WebView：实现流畅的多页加载和专场动画。

使用Navtive UI 组件：框架、菜单、日期等。

“重混”的优缺点

优点：

– 提升了运行性能
– 增强了交互体验

缺点：

– Web和Native技术交叉混杂
– 需要同时掌握Web和Native技术，学习难度增加
– 一个页面有Web组件也有Native组件，编程调试困难

方案二：轻混合应用，使用PhoneGap、AppCan之类的中间件，以WebView作为用户界面层，以Javascript作为基本逻辑，以及和中间件通讯，再由中间件访问底层API的方式，进行应用开发。这种架构一般会非常依赖WebView层的性能。
随着时代的发展，手机硬件、浏览器技术、无线网络技术都得到了大幅的提升，H5已经可以支持复杂应用，并拥有良好的运行性能。使用轻混方案的App也越来越多。

目前我们要学习的Hybrid App开发就是方案二，使用H5+Js+Native框架开发当前轻混合应用。

顺变提一下， 2012年8月，微信公众平台的上线，重新定义了移动应用：移动应用 = Iphone App + Android App + 微信App

3.Hybrid框架结构

HyBrid App = H5 App + Native框架

H5App 用来实现功能逻辑和页面渲染
Native框架 提供WebView和设备接口供H5调用

H5 App

简单理解就是以网页技术为主来实现的移动应用。H5 App由网页和外壳两部分组成。网页主要负责界面的显示和交互；而外壳会内置一个浏览器来提供网页的运行环境，并且会通过插件为网页提供扩展的原生调用能力，如下图:
H5架构.png

H5 App简单分为:

多页应用模式MPA（ Multi Page Application）

单页应用模式SPA（ Single Page Application）

综合上图对比, H5 App页面框架的最佳选择：SPA单页应用模式！！

单页应用的核心问题：页面隔离! 解决方案如下图所示：

图片1.png
图片2.png

Native框架:

Cordova(PhoneGap)

业界最主流的开源移动跨端框架

HTML + CSS + JS + 原生插件
开放式的原生插件框架
干净的轻混合跨端框架

支持公司:

Hybrid App开发所需技能一览表

HTML5
CSS3

JavaScript

JavaScript基础：基本语法、面向对象等，能使用JavaScript编写程序。
Angular : 优秀前端JS框架
RequireJs : 模块隔离，资源按需加载
WebPack: 模块加载器兼打包工具
Avalon: MVVM数据绑定框架（选学）
Node.js: 服务器端语言, 会这个就前后端统统可以搞定，瞬间成全栈工程师

Hybrid App开发框架推荐

Framework7
Ionic

下次分享如何开发一个简单的Hybrid App：

Cordova使用
如何使用Cordova插件访问设备接口
如何将H5App打包成App

Hybrid App开发入门(一)