目录

• 1 概述

• 2 Cordova 平台
• 3 Web 发展史
  • 3.1 静态网页
  • 3.2 动态网页
  • 3.3 客户端异步交互
  • 3.4 开发效率提速阶段
  • 3.5 移动平台
• 4 Hybrid App 分类一
  • 4.1 多View混合型
  • 4.2 单View混合型
  • 4.3 Web主体型
  • 4.4 多主体共存型（灵活型）
• 5 Hybrid App 分类二
  • 5.1 重架构混合模式
  • 5.2 轻架构混合模式
  • 5.3 Hybrid 优势
  • 5.4 Hybrid 劣势
• 6 Hybrid 平台调查
• 7 Hybrid App 调试方法
  • 7.1 调试方法汇总
  • 7.2 推荐工作流程 & 调试方法

1 概述

回顾历史，展望未来。认真分析 Hybrid 的诞生原因、发展经历、才能更好的预测 Hybrid 开发的未来前景。

问题 产生 技术，无法解决问题的技术是不存在的。

提到 Hybrid 开发，必然要提到 Web，首先让我们看一看Web发展史。

• 静态网页:展示内容。

• 动态网页:支持页面与服务器交互，构建了现在蓬勃发展的互联网的基础。

• 客户端异步交互:解决了整个页面刷新的问题，优化了用户体验。

• 开发效率提速阶段:各种功能丰富的第三方JS库迅速崛起，提高工作效率。

• 移动平台:智能手机飞速发展，需要快速构建App，满足市场需求，Hybrid作为一种解决方案应运而生。

• Hybrid分类
  Hybrid时间点从2012年开始，陆续出现了三种Hybrid模式 : 多View混合型、单View混合型、Web主体性；按照另一种分类方式分为 : 重架构混合模式、轻架构混合模式。
  其中，多View混合型、单View混合型属于重架构混合模式，Web主体性属于轻架构混合模式。
  当前，最流行的是Web主体性。

• Hybrid优势

• 跨平台、快速发布、高效开发。

• Hybrid劣势

• 达不到原生平台的流畅体验。

2 Cordova 平台

当前所有的Hybrid框架都是基于Cordova平台进行JS跟原生通讯。
因此Cordova平台支持的调试方式也是通用的。

• Cordova优质博客列表

• 传智播客

• 极客学院

• Cordova教程博客

• Cordova 概述

• Cordova开发前的准备工作

• 使用Cordova命令行界面(CLI)

• Cordova应用解析

• Cordova开发技巧

• 开发Android平台的Cordova应用

• 使用PhoneGap Build

• 使用Cordova API开发(上)

• 使用Cordova API开发(下)

• 创建Cordova插件

• 构建一个完整的Cordova应用

• 使用Android Studio构建Cordova项目

• Cordova 官网地址

• Cordova平台构成

• Cordova CLI(Command Line Interface)

• Cordova 项目结构

ProjectName
┣ config.xml **Cordova项目配置文件**
┣ merges **针对ios、android等平台的html文件**
┣ hooks **Cordova CLI使用的项目自定义脚本**
┣ platforms
┃ ┣ android **android开发人员工作目录**
┃ ┗ ios **iOS开发人员工作目录**
┣ plugins **插件源码目录**
┗ www **H5开发人员工作目录**

• React Native、Weex : 即保留了Hybrid应用的优势，力图解决 Hybrid 劣势

3 Web 发展史

3.1 静态网页

• 问题

内容分享

• 技术

• Html

• 年 : 1995

• CSS

• 年 : 1996

• Javascript

• 年 : 1996

• 问题 : 客户端脚本语言

3.2 动态网页

• 问题

动态网页问题

• 技术
• CGI（共用网关接口）
• Perl
• 年 : 1987
• 问题 : 服务器端动态网页
• PHP
• 年 : 1995
• 问题 : 服务器端动态网页
• JSP
• 年 : 1996
• 问题 : 服务器端动态网页
• ASP
• 年 : 1996
• 问题 : 服务器端动态网页

3.3 客户端异步交互

• 问题

客户端交互->异步、局部页面交互

• 技术
• Ajax
• 年 : 1998—2005

3.4 开发效率提速阶段

• 问题

加快开发效率

• 技术
• jQuery
• 年 : 2006
• 问题 : JS库、浏览器的兼容性、简化dom操作，加快开发效率
• YUI
• 2006
• 问题 :
• Ruby on Rails
• 年 : 2007
• 问题 : 开发模式->MVC
• NodeJS
• 年 : 2009
• 问题 : 待定
• Prototypejs
• 年 : 2009
• 问题 : 待定
• UnderScore
• 年 : 2009
• 问题 : 待定
• AngularJS
• 年 : 2009
• 问题 : 谷歌 JS 前端框架
• CoffeeScript
• 年 : 2009-2010
• 问题 : 作为JavaScript的转译语言
• Backbone
• 年 : 2010
• 问题 : JS 前端框架
• Web2.0 Html5
• 年 : 2010
• 问题 : 待定
• EmberJS
• 年 : 2011
• 问题 : 待定
• Bootstrap
• 年 : 2011
• 问题 : 待定
• TypeScript
• 年 : 2012
• 问题 : 待定
• React
• 年 : 2013
• 问题 : 构建随着时间数据不断变化的大规模应用程序
• Vue
• 年 : 2013
• 问题 : 待定

3.5 移动平台

• 问题

移动平台

• 技术

• Web App

• 年 : 待定

• 问题 : Html5移动App开发框架

• 技术

• JQuery Mobile

• 轻量级框架

• 缺点

• 没有 MVC 多人协作 开发的概念

• 项目比较大后 代码不易维护

• 适用范围

• 中小项目 1-2 个人开发很适用

• SenchaTouch

• 重量级的框架(需要 extjs 基础 代码复杂需要较强的程序基础)

• 优点

• 兼容性好,基于 MVC 世界上第一个 html5 移动开发框架

• 可视化开发工具 sencha architect

• Angularjs

• 轻量级框架

• 优点

• 支持 MVC

• 支持 数据双向绑定

• 通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用

• Hybrid App

• 年 : 2008-2011

• 问题 : 解决 html 无法访问设备的问题

• React Native

• 年 : 2015

• 问题 : 既拥有Native的用户体验、又保留React的开发效率

• Weex

• 年 : 2016

4 Hybrid App 分类一

4.1 多View混合型

• 描述

2012年常见的Hybrid App是Native View与WebView交替的场景出现。这种应用混合逻辑相对简单。
即在需要的时候，将WebView当成一个独立的View（Activity）运行起来，在WebView内完成相关的展示操作。开发难度和Native App基本相当。

• 特点

即Native View和Web View独立展示，交替出现。
这种移动应用主体通常是Native App，Web技术只是起到补充作用。

• 开发难度

开发难度与native app相当

4.2 单View混合型

• 描述

这种Hybrid App的开发成本较高，开发难度较大，但是体验较好。
如百度搜索为代表的单View混合型移动应用，既可以实现充分的灵活性，又能实现较好的用户体验。

• 特点

即在同一个View内，同时包括Native View和Web View。互相之间是覆盖（层叠）的关系。(会牺牲内存，达到显示快的效果)

• 开发难度

开发成本较高，难度较大，但是体验较好。

4.3 Web主体型

• 描述

这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降低，并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏，主要取决于底层中间件的交互与跨平台的能力。
从分析可见，Hybrid App中的Web主体型只要能够解决用户体验差的问题，就可以变成最佳Hybrid App解决方案类型。

• 特点

即移动应用的主体是Web View，主要以网页语言编写，穿插Native功能的Hybrid App开发类型。

• 开发难度

整体开发难度低，基本可以实现跨平台

• 平台
• appMobi : 除基础的底层能力更多是通过插件（Plugins）扩展的机制实现Hybrid
• PhoneGap : 除基础的底层能力更多是通过插件（Plugins）扩展的机制实现Hybrid
• WeX5 : WeX5则在揉合PhoneGap和Bootstrap等主流技术的基础上，对性能进一步做了深度优化，不但完全具备Native App对本地资源的调用能力，性能体验也不输原生；WeX5所开发出来的app具备完全的跨端运行能力，可以无需任何修改直接运行在各种前端环境上。
• AppCan : 除了插件机制，还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题，接近Native App的体验。

4.4 多主体共存型（灵活型）

• 描述

这是一种新型的开发模式，即支持Web主体型的应用，又支持以Native主体的应用，也支持两者混合的开发模式。

• 平台
• kerkee : 它具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、具有Debug环境、彻底解决跨域问题等特点。用户体验与Native App媲美。功能方面，开发者可随意扩展接口。

5 Hybrid App 分类二

5.1 重架构混合模式

• 原因

“重混”架构这种依赖Native UI的混合框架，本着“Web不够，就Native来凑”的核心思路，的确提升了交互体验，但同时也带来了无法回避的显著缺点：Web和Native技术的交叉混杂让开发者的编程和调试都很不方便；尤其是无法直接运行在微信这类超级App平台之上，更是“重混”App的致命硬伤。

5.2 轻架构混合模式

• 原因

Hybrid APP就必须坚持几个原则：UI部分必须用纯Web技术，完全采用H5技术；在底层的设备接口上，确实是JS无法完成的原生部分，需要Native技术来弥补的，也必须坚持Native技术不去侵入UI。这样一个框架就是“轻混”Hybrid APP框架。“轻混”框架才是真正的HTML5 APP框架，在技术上更轻量，成本更低、也更容易推广，能真正做到只需一次开发就能跨Android、iOS和微信等各种端发布。“轻混”才是Hybrid APP技术发展的必然方向。

5.3 Hybrid 优势

• 跨平台
  Web内容可以做到开发一次，所有平台生效，诸多产品需要这种能力。

• 快速发布
  iOS平台，Apple Store平均审核周期1～2周不等，甚至更长，产品的发布周期从2周到1月，这对需要快速发布的产品而言难以接受。

Android平台，应用商店众多，发布过程烦琐。虽然可以应用内升级，但是带来的问题是新App需要通过应用商店，此外APK体积庞大，2G/3G环境下体验差。

• 高效开发
  Web开发经过20年的发展，已经将结构（HTML）、表现（CSS）、行为（JavaScript）3部分很好地分离开，在分工协作、开发效率上会具明显优势。

• 丰富的Device API
  Web（HTML5）强调通用性，受限于标准和浏览器实现，许多有用的系统功能未能得到支持（或部分支持）。而Native最大的优势在于设备API的调用能力，只要桥接Native和Web，Web也就能够拥有这种能力。

5.4 Hybrid 劣势

• CPU/GPU密集类应用目前看更适合Native，例如极品飞车这样的游戏。这种劣势是在不断弱化的，正如 “CSS Transform 3D”引入GPU大大缓解了Web动画不流畅的问题。

• 静态资源从服务器端加载导致的UI展示延迟问题。这个问题可以通过Native拦截WebView通信加载已打包的公共库来缓解。

6 Hybrid 平台调查

7 Hybrid App 调试方法

7.1 调试方法汇总

更多介绍参考 Debugging Cordova apps

7.2 推荐工作流程 & 调试方法

• 推荐工作流程

• 完成UI界面开发 -> 完成原生联调

• 推荐调试方法

• mockdata & console.log() -> GapDebug -> 基于Safari、Chrome方法 -> Weinre