IOS-Hybrid（混合開發）

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模塊化開發

六、 升級、部署方案

 

1.4.     混合開發分類‘

Hybrid App按網頁語言與程序語言的混合，一般分爲三種類型：多View混合型，單View混合型，Web主體型。

多View混合型

即Native View和Web View獨立展現，交替出現。2012年常見的Hybrid App是Native View與WebView交替的場景出現。這種應用混合邏輯相對簡單。即在須要的時候，將WebView當成一個獨立的View（Activity）運行起來，在WebView內完成相關的展現操做。這種移動應用主體一般是Native App，Web技術只是起到補充做用。開發難度和Native App基本至關。

單View混合型

即在同一個View內，同時包括Native View和Web View。互相之間是覆蓋（層疊）的關係。這種Hybrid App的開發成本較高，開發難度較大，可是體驗較好。如百度搜索爲表明的單View混合型移動應用，既能夠實現充分的靈活性，又能實現較好的用戶體驗。

Web主體型

即移動應用的主體是Web View，主要以網頁語言編寫，穿插Native功能的Hybrid App開發類型。這種類型開發的移動應用體驗相對而言存在缺陷，但總體開發難度大幅下降，而且基本能夠實現跨平臺。Web主體型的移動應用用戶體驗的好壞，主要取決於底層中間件的交互與跨平臺的能力。國外的appMobi、PhoneGap和國內的WeX五、AppCan和Rexsee都屬於Web主體型移動應用中間件。其中Rexsee不支持跨平臺開發。appMobi和PhoneGap除基礎的底層能力更可能是經過 插件（Plugins）擴展的機制實現Hybrid。AppCan除了插件機制，還提供了大量的單View混合型的接口來完善和彌補Web主體型Hybrid App體驗差的問題，接近Native App的體驗。而WeX5則在揉合PhoneGap和Bootstrap等主流技術的基礎上，對性能進一步作了深度優化，不但徹底具有Native App對本地資源的調用能力，性能體驗也不輸原生；WeX5所開發出來的app具有徹底的跨端運行能力，能夠無需任何修改直接運行在各類前端環境上。

 

從分析可見，Hybrid App中的Web主體型只要可以解決用戶體驗差的問題，就能夠變成最佳Hybrid App解決方案類型。

多主體共存型（靈活型）

這是一種新型的開發模式，即支持Web主體型的應用，又支持以Native主體的應用，也支持二者混合的開發模式。好比kerkee框架[2]   ，它具備跨平臺、用戶體驗好、性能高、擴展性好、靈活性強、易維護、規範化、具備Debug環境、完全解決跨域問題等特色。用戶體驗與Native App媲美。功能方面，開發者可隨意擴展接口。

 

 

感謝分享