來源：http://www.cnblogs.com/yeahui/p/5026587.html
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，故在此不再啰嗦了。
三種開發模式各自的特點如下面的表格所示：
| —- | Web App（網頁應用） | Hybrid App（混合應用） | Native App（原生應用） |
|---|---|---|---|
| 開發成本 | 低 | 中 | 高 |
| 維護更新 | 簡單 | 簡單 | 複雜 |
| 體驗 | 差 | 優 | 優 |
| Store或market認可 | 不認可 | 認可 | 認可 |
| 安裝 | 不需要 | 需要 | 需要 |
| 跨平台 | 優 | 優 | 差 |
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、 更新、部署方案