HTML5移動端跨平臺應用開發框架解析

移動端跨平臺應用開發是個有趣的話題。縱觀該領域目前各個開發商提供的多種方案，大體能夠分爲三大類：

1. 基於HTML5的方案。該方案以PhoneGap/Cordova爲表明。其基本思路是針對HTML5標準目前功能上的不足，補充定義了一套比較實用的API（好比硬件訪問/系統交互等），而後基於平臺上自帶的Web引擎（好比iOS的UIWebview等），經過擴展機制實現了這些API，在此基礎上再提供一套應用打包部署系統。Intel的XDK也屬於此類方案。
2. 將Native API映射封裝成統一語言的API的方案。該方案以Titanium、Xamarin爲表明，其中Titanium提供JavaScript API，Xamarin提供C# API。這樣的好處是能夠較容易達到和Native API相似的能力，編程模型/方式也和原生應用類似。
3. 有行業針對性的HTML5 API方案。好比Ludei的CocoonJS就是一個比較有意思的方案，它設計了一套專門針對2D/3D遊戲開發的API（支持iOS和Android）。能夠認爲它是HTML5圖形操做的子集（Canvas +WebGL），再加上一些擴展的API好比硬件訪問能力/廣告/應用內購買/社交網絡整合等，以實現一個完整的遊戲引擎。

本文重點介紹基於HTML5的方案相比其餘方案的優缺點，如何實現更好的效果，以及目前的一些進展。

　HTML5方案的特色

原生API映射的方案，如Titanium、Xamarin，其優勢在於功能和性能與原生系統比較接近。可是，因爲不一樣系統原生API設計上仍是會有很多差別，API的映射仍是須要很多的權衡取捨。同時，因爲這些API是這些廠商自定義的，談不上什麼標準，相應的開發資源（程序庫/技術支持/社區等等）也相對有限。

而另外一方面，標準化、開發資源的豐富則是HTML5方案最大的優勢，同時第三方的HTML5框架工具好比PhoneGap/Cordova也極大促進了HTML5應用的發展，它們提供了方便的跨平臺應用打包/發佈服務、實用的API、靈活的擴展機制、以及積累下來的豐富的第三方API實現。而上游的W3C一旦開始支持一些新的API，PhoneGap/Cordova也能夠很快沿用這些標準的API將相關能力開放出去。

HTML5方案的主要不足則在於功能和性能方面，這主要是由於HTML5應用的能力嚴重依賴於系統自帶的Web引擎：iOS的UIWebview、Android的Webview等，此類組件的HTML5能力相比Safari for iOS、Chrome for Android都要差一截。另外在Android平臺上，因爲系統碎片化比較嚴重，不一樣Android版本的Webview的HTML5能力也有較大差別，致使相應的HTML5應用一致性難以保證。

好消息是，如今已經出現一些第三方的Web引擎以提供比系統默認的Webview更好的功能和性能，而PhoneGap/Cordova也正在改進架構以便引入這些更好的第三方Web引擎。另外對於Tizen、Firefox OS這樣自己就是HTML5 Runtime加上擴展API的系統而言，HTML5應用是一等公民，在功能拓展方面相比iOS、Android上會加強很多。

而第三種方案，CocoonJS的優勢是專一於2D/3D遊戲開發，畫圖性能很好，好比同時畫1000個精靈也能達到60FPS，這是絕大多數的瀏覽器/通用的HTML5引擎目前還作不到的。這個方案的缺點在於，因爲它的畫圖操做簡化了不少路經，它沒法作到和HTML5 DOM元素的互操做，並且它的HTML5能力也只是一個子集，功能比較受限。目前CocoonJS針對Android也引入了另一種模式Webview+做爲補充，Webview+基於Chromium的內核加上Cordova API的支持以實現更通用的HTML5能力。

總的來講，HTML5應用的能力很大程度上依賴於Web引擎的能力。所以，不管是移動操做系統開發商仍是開發工具的開發商，都持續在Web引擎的方向投入了更多的努力。

　Web引擎

Web引擎目前大體可分爲三種方式：

1. 瀏覽器，好比Safari/Chrome/UC Browser等;
2. 系統自帶的Webview組件，好比上面提到的iOS UIWebview和Android Webview
3. 專門的Web Engine，好比Intel的開源項目Crosswalk、Ludei的Webview+

瀏覽器方式很容易理解，一個HTML5應用就是一個Web頁面，用戶經過瀏覽器打開一個URL，而後進入瀏覽器的全屏模式/App模式進行操做，或者是經過點擊一個事先建立好的快捷方式打開應用。這種方式的性能取決於瀏覽器自己對HTML5的支持狀況，通常來講要優於Webview組件的方式，可是問題在於不一樣的瀏覽器有差別，並且經過瀏覽器運行HTML5較難作到相似原生應用的體驗（應用切換/權限管理/系統資源訪問/整合等）以及豐富的API支持。

Webview組件方式的通常用法是以Hybrid的方式發佈HTML5應用，即上述提到的PhoneGap/Cordova方案所採用的方式。其問題已經在上面提到過，主要是Webview組件自己對HTML5的支持能力不足。

專門的Web引擎能夠有較好的HTML5功能和性能支持，同時有較好一致性，相似原生應用的系統整合也能夠作得較好。這種方式的缺點則在於開發者須要將Web引擎與應用程序一塊兒打包，生成的應用大小會更大，所以有的Web引擎（如Crosswalk）也提供了一種「共享模式」，讓多個應用能夠共享一個Web引擎，僅當應用第一次啓動而且發現系統尚未相應Web引擎時才提示用戶下載安裝。

目前的發展趨勢是：經過PhoneGap/Cordova方式獲得豐富的API支持，經過專門開發的Web引擎去提高HTML5的能力。

Crosswalk和Ludei的Webview+在概念上比較相似。Webview+是閉源的，目前還很差評估；Crosswalk由我所在的團隊開發，是開源的（BSD許可協議），基於Chromium內核，着重於對HTML5功能和性能的支持，發佈週期爲六週一次，支持Cordova API。

目前Crosswalk正式支持的移動操做系統包括Android和Tizen，在Android 4.0及以上的系統中使用Crosswalk的Web應用程序體驗和原生應用沒有區別。該引擎如今已經成爲衆多知名HTML5平臺和應用的推薦引擎，包括Google Mobile Chrome App、Intel XDK、Famo.us和Construct2等等，將來的Cordova 4.0也計劃集成該Web引擎。不過比較遺憾的是，因爲iOS的限制（iOS不容許應用使用使用除iOS UIWebView以外第三方的JIT--即時編譯引擎），目前Crosswalk也沒有辦法提供直接的支持，但這也許會隨着HTML5更普遍的進入移動市場而發生改變。

　總結

如今的HTML5 App（加上API擴展）已經能夠勝任不少事了，好比教育類應用，休閒遊戲等等。不過對於那些實時性要求比較高的、計算量大的（好比涉及大量的元素繪製，或並行計算等）、複雜的3D遊戲，多人在線遊戲/應用等還有很多差距。另外，工具方面，如何可以更高效的調試/開發/性能內存調優 HTML5應用也是另一個須要提升的地方。不過，這些方面也在不斷的演進。相信不久的未來，HTML5終會成爲主流移動開發平臺。