移动开发--Hybrid和Native混合开发-->HybridApp 、NativeApp、WebApp

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最头疼的有三个问题：

一、没法跨平台：Android和iOS都须要开发各自平台的版本——开发成本高；

二、升级麻烦：每次升级都要下载安装包，Android还好，反正不须要审核，下载就下载吧，但iOS就麻烦了，发布每一个版本还得通过App Store的审核，这致使第三个问题；

三、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技术

一、 HTML5

熟练掌握HTML5的各个标签，如何编写最优的文档结构。

二、 CSS

熟练掌握CSS2和CSS3的新特性，能按照效果图编写最高性能的样式。

使用SCSS生成CSS，将CSS可编程化。

三、 JavaScript

实现业务逻辑控制。我的理解JavaScript主要包含两大内容：DOM编程和面向对象编程。大部分JS开发人员就只掌握DOM编程，诸如document.getElementById()等，但面向对象是很重要的一个方面。

四、 性能和开发

模块化编程：编写可复用的组建；

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.     我的建议

因为移动端是一个重视性能和用户体验的终端，大量采用框架存在一些问题：

一、 扩展、维护、定制成本，这个很是须要考虑，或许框架提供的UI风格和本身设计的UI风格差别大，致使设计围绕框架转，不符合产品的需求。

二、 既然是框架，强调的是覆盖面广度和功能的全面，会有不少无用的东西，带来累赘；

三、 框架自己存在BUG，或许须要开发人员面对一些能力以外的问题。

总之，若是只追求像山寨做坊同样快速产出、不计性能的开发产品，那使用现成的框架是不二选择。但若是追求性能和真正的产品，建议使用库，不要使用框架。可是不少框架的实现思想都很优秀，虽然不建议使用，但咱们应该多接触学习其中的思想，才能写更好的代码。仅仅建议而已，不中听请忽略。

1.4.     系列大纲

本系列博文将按照我近三年来开发Hybrid App过程当中的体会进行编写，以一个APP完整开发为线索，造成一套完整的混合模式开发的解决方案。

一、 JS和原生交互架构

二、 WEB端基础知识准备

三、 UI适配方案

四、 UI组件开发及封装

五、 JS模块化开发

六、 升级、部署方案