跨平台 webapp 開發技術之 Hybrid App

標籤：模式   png   思路   b前端開發   移動開發   family   跨平台開發   記憶體   最大   

前所知的 APP 開發模式有三種：

1. 基於作業系統啟動並執行 APP -> Native App，側重於原生開發，使用者體驗好，需要安裝才會升級
2. 基於瀏覽器啟動並執行 APP -> Web App，側重於網頁技術實現，跨平台相容性好，只要開發人員更新代碼，無需通過安裝升級
3. 基於行動裝置 App引擎 -> Hybrid App，使用H5和JS開發。如果不追求使用者體檢時，這種方式最快也最省錢

下面的圖摘自簡書，是對三種不同形態的 APP 的對比：

 

 

Hybrid APP是目前廣泛流行的一種APP開發模式，Android、iOS、JS三端內容初步都已經完成，有完善的設計思路、教程以及API文檔。

 

Hybrid App，這種既有跨平台開發週期短、成本低的基因，又能發揮Native App體驗和效能的優勢，HybridApp混合式行動裝置 App開發逐漸成為企業移動開發的首選。
Hybrid App通常是基於第三方跨平台行動裝置 App引擎架構進行開發：

在國內開發人員中比較知名的有PhoneGap、Titanium和AppCan這些引擎架構一般使用HTML5和Javascript作為程式設計語言，調用引擎封裝的底層功能如照相機、感應器、通訊錄、二維碼等。HTML5和Javascript只是作為一種解析語言，真正調用的都是NativeApp一樣封裝的底層功能，這是和Web App的最大區別和不同。因為使用了瀏覽器技術，所以Hybrid App通常具有跨平台的特性，並且開發成本和WebApp接近，開發效率也遠高於Native App。

說實在的，從表面上看的話，很難區分一個App到底是Native App還是Hybrid App，但實際上我們更多的是把Hybrid App當做是Webapp的一部分，因為他是一部分Native（比較少），絕大部分的web頁面（html5頁面）。

Hybrid App和Native App一樣都是需要使用者在各種App分發渠道上下載並安裝到手機上才能用的。Hybrid App的體驗當然是沒話說，比較棒的，有這Native App的全部優點。html5很好的解決了跨平台性的問題，也解決了開發成本過高的問題。

 

國內外Hybrid App的開發平台眾多，目前有三種開發模式：

1. 使用PhoneGap、AppCan之類的中介軟體，以WebView作為使用者介面層，以JavaScript作為基本邏輯，以及和中介軟體通訊，再由中介軟體訪問底層API的方式，進行應用開發。這種架構一般會非常依賴WebView層的效能。
2. 使用Adobe Air、RubyMotion、Appcelerator或者是Xamarin這種非官方語言的工具，打包成原生應用的方式開發。為什麼筆者會將它們定義為Hybrid App，主要是它們並沒有很單純地使用原生提供的語言進行開發，而是通過對開發人員提供友好的開發工具，並折中地把這種開發語言轉換成原生語言，最終打包出整個應用，所以也屬於混合應用範疇。
3. 在開發原生應用的基礎上，嵌入WebView但是整體的架構使用原生應用提供，一般這樣的開發由Native開發人員和Web前端開發人員組成。Native開發人員會寫好基本的架構以及API讓Web開發人員開發介面以及大部分的渲染。保證到互動設計，以及開發都有一個比較折中的效果出來，最佳化得好也會有很棒的效果。

國內 Hybrid App 架構，比較多：dcloud

成立時間：2014年

融資情況：1200萬人民幣

產品：hbuilder、5+runtime、mui（免費）

整合的原生sdk：通過5＋sdk自行整合

 

phonegap(Cordova)

成立時間：2008年8月

融資情況：已被adobe收購

產品：phonegap(cordova)

整合的原生sdk：自行整合

產品功能：

PhoneGap是一款國外的開源移動開發平台。目前已經將核心代碼貢獻給Apache cordova，最新版本是2.6.0，它是基於HTML，CSS和JavaScript的，可以使用一些開源的架構比如jQuery Mobile，Dojo Mobile，Sencha Touch等等來提高使用者體驗，也提供了比較豐富的原生外掛程式調用。

缺點：

1. 需要針對相應的平台環境配置，進行編譯，打包測試，發布等等。由於使用Hybrid開發的使用者群，大部分是web開發人員，對原生開發基本不瞭解，這無疑給每一個開發人員增加了沉重的負擔，需要對各個平台的開發都要需要瞭解，對硬體等等都要配置，加大開發成本。

2. 使用效果啟動慢，頁面切換響應慢，資料請求慢。調試難度大，記憶體消耗大。不能完全跨平台，不同平台代碼需要微調。

3. 文檔雖比較詳細但是基本是英文，對於國內大部分使用者英文水平較差的是比較大的挑戰。

4. 因為是國外的架構，支援人員不夠到位，出現問題，無法排解，成為技術攻關的痛點。

側重點：側重於對硬體的存取控制

 

appcan

成立時間：2010年初

融資情況：1億元人民幣

產品：公眾版（免費）與企業版（收費）

缺點：

1. 雖然有中文的開發文檔，但描述比較簡單，希望他們豐富他們的API文檔。

2. 免費版本不支援自訂外掛程式（據說企業版可以自訂外掛程式）。

3. 暫時只支援iOS，Android兩大平台，不知道什麼時候推出Windows Phone 8？

4. 許多功能需要企業版才能實現，不過是收費的。

5. AppCan免費版因需要把原始碼上傳到廠商的伺服器上打包，對於企業開發來說原始碼泄露安全性上有一定風險。企業版雖然可以解決，但企業版穩定尚待觀察。

6. AppCan採用封裝的組件，依賴性比較高。不是開原始碼。

7. AppCan 不能很好的解決原生代碼的功能。

 

phonegap與appcan什麼區別？

大概瀏覽了一下appcan的文檔，api設計只能用莫名其妙來形容，各種縮寫，各種看不懂。 

比較表格	Phonegap	AppCan
架構功能	簡單	豐富
支援平台	大部分平台	僅4種平台
開發環境	不同平台需要不同開發環境	只需一個IDE包
調試	可直接調試	本地發布的IOS包，必須部署在越獄的機器上
發布	在本地可以直接發布	必須將代碼上傳至伺服器，才能發布
IOS 簽名管理	本地管理	需要上傳至伺服器
代碼泄露風險	低：僅在本地、svn儲存代碼	高：需將代碼上傳至appcan伺服器

 

 

Hybrid面臨的挑戰

Facebook推出的React Native方案,這是Facebook在放棄h5後自行推出一個‘反H5方案‘,一句話總結就是:裡面可以用JS來完整的寫一個原生應用。

推出的小程式，這也是一個主導的‘反H5方案‘,一句話總結就是:裡面可以同JS+自製的UI方案來寫一個類似於原生的應用,只不過這個應用不是發布到App Store中,而是發布到中。

跨平台 webapp 開發技術之 Hybrid App