1.1. APP三种开发模式
智能手机之普及不用多说，手机APP渗投到各个行业：电商（淘宝、京东等）、金融（各手机行业、P2P借贷等）、医疗（智慧医疗）、交通（滴滴、Uber等）、教育（慕课网等）、餐饮（饿了吗、美团等）……反正只要是个企业，无论规模大小，都已经订制或将要订制自己的APP。这么多APP无外乎就三种模式：Native App、Web App、Hybrid App。
1.1.1. Native App
Native App，原生APP，使用原生（即Android或iOS）开发的APP。两年多以前这非常流行，到现在为止，原生开发人员数量众多，一抓一大票，技术成熟，好多培训机构都抱着老掉牙的API翻来覆去的讲——尤其是Android。Sorry，说错话了……使用原生开发有其优势：应用的性能好，适配起来相对容易。学习成本要看人，个人觉得技术点不多，门槛相对稍高，但入门后学习起来就很轻松——网络资料实在是太多了。
但原生APP最头疼的有三个问题：
1、无法跨平台：Android和iOS都需要开发各自平台的版本——开发成本高；
2、升级麻烦：每次升级都要下载安装包，Android还好，反正不需要审核，下载就下载吧，但iOS就麻烦了，发布每个版本还得经过App Store的审核，这导致第三个问题；
3、Android和iOS很难同步发布。
1.1.2. Web App
所谓的Web App，就是把手机当做一个浏览器（Android使用WebView，iOS使用UIWebView），做几个页面挂在服务器端，类似于一个小网站。这样说虽然不太贴切，但实际上给人的感觉就是这样的。虽然开发成本大大降低，但页面访问速度慢、操作体验差。于是第三种模式诞生了。
1.1.3. Hybrid App
乍一看和Web App没啥差别，但涉及到的技术成本、开发成本、学习成本比Web App高，它综合了Web App的开发速度和Native App的高性能体验。之所以说学习成本高，是因为开发高性能的Hybrid App有难度，网络资料少。我是两年半前开始接触混合模式开发的，当时如何做好屏幕适配、提高UI响应速度、如何最大化使用原生功能等内容，网络几乎没有资料。网上能搜索到的都是很粗略的东西，或者就是Hello World级别的东西，涉及到稍微细节一点的东西几乎没有。由于本系列文章都只讲Hybrid，故在此不再啰嗦了。
三种开发模式各自的特点如下面的表格所示：
|
Native App |
Hybrid App |
Web App |
|
|
原生功能体验 |
优秀 |
接近优秀 |
差 |
|
性能 |
非常快 |
快 |
慢 |
|
跨平台开发成本 |
昂贵 |
合理 |
便宜 |
|
碎片化适配 |
非常严重 |
严重 |
严重 |
|
编程技术支持 |
短缺 |
非常短缺 |
通用人才 |
|
版本升级维护 |
保守 |
低延时 |
开放 |
|
安全 |
强 |
中 |
弱 |
1.2. Hybrid App所需技术
Hybrid App由于需要保证运行性能与开发速度，需要如下技术支持，本系列博文均会按照Demo的开发顺序依次描述本人的开发心得和教训，希望能起到一个抛砖引玉的作用。
1.2.1. Native技术
Native技术主要用于提供原生支持，要做到跨平台，就需要掌握部分Android和iOS的知识，除了多线程，文件存储等基础知识，Android需要非常熟练的掌握WebView、WebSettings、WebChromeClient、WebClient四大对象。iOS需要非常熟练掌握UIWebView对象。
1.2.2. Web技术
1、 HTML5
熟练掌握HTML5的各个标签，如何编写最优的文档结构。
2、 CSS
熟练掌握CSS2和CSS3的新特性，能按照效果图编写最高性能的样式。
使用SCSS生成CSS，将CSS可编程化。
3、 JavaScript
实现业务逻辑控制。个人理解JavaScript主要包含两大内容：DOM编程和面向对象编程。大部分JS开发人员就只掌握DOM编程，诸如document.getElementById()等，但面向对象是很重要的一个方面。
4、 性能和开发
模块化编程：编写可复用的组建；
CSS渲染：了解浏览器的CSS渲染引擎才能编写更高效率的样式；
JS解析：了解浏览器的JS解析引擎才能优化JS脚本；
HTTP协议：熟练掌握HTTP请求的各个内容；
AJAX：和服务器端的交互大都采用AJAX。
1.3. 流行框架
1.3.1. Hybrid 框架
Cordova/PhoneGap：侧重于JS与原生的交互，开发简单，但性能差，如触摸时反应不灵敏。
AppCan：性能还行，使用简单，但要提交代码给AppCan的服务器才能打包，相信有追求的企业是不会把自己的代码提交给第三方，把打包权利交给第三方的。
Ionic Framework：在Cordova的基础上增加一些UI/JS方面的东西，样式还不错，但同样具有Cordova的不足。
1.3.2. UI/JS框架
jQuery Mobile：上手简单，组件丰富，但性能超级差，闪屏现象严重。
Senche Touch：简单看过，没有使用过，貌似UI很漂亮，学习成本高。
React Native：FB推出的，当年FB是最早尝试Hybrid的，但性能超差，于是APP放弃了Hybrid，走原生的道路。在大家都不看好H5时，FB暗中深入挖掘H5，三年之后推出了这个框架，非常推荐各位去学习其中的思想。
GMU：百度推出的，这个不错。
1.3.3. UI/JS库
这个就多了，jQuery、Zepto、Swiper、iScroll、RequireJS、AngularJS……
1.3.4. 个人建议
由于移动端是一个重视性能和用户体验的终端，大量采用框架存在一些问题：
1、 扩展、维护、定制成本，这个非常需要考虑，或许框架提供的UI风格和自己设计的UI风格差异大，导致设计围绕框架转，不符合产品的需求。
2、 既然是框架，强调的是覆盖面广度和功能的全面，会有很多无用的东西，带来累赘；
3、 框架本身存在BUG，或许需要开发人员面对一些能力之外的问题。
总之，如果只追求像山寨作坊一样快速产出、不计性能的开发产品，那使用现成的框架是不二选择。但如果追求性能和真正的产品，建议使用库，不要使用框架。但是很多框架的实现思想都很优秀，虽然不建议使用，但我们应该多接触学习其中的思想，才能写更好的代码。仅仅建议而已，不中听请忽略。
1.4. 系列大纲
本系列博文将按照我近三年来开发Hybrid App过程中的体会进行编写，以一个APP完整开发为线索，形成一套完整的混合模式开发的解决方案。
1、 JS和原生交互架构
2、 WEB端基础知识准备
3、 UI适配方案
4、 UI组件开发及封装
5、 JS模块化开发
6、 升级、部署方案