HTML5、Web引擎與跨平臺移動App開發

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

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終會成為主流移動開發平臺。

　作者介紹

　　餘枝強目前是英特爾開源技術中心的軟體技術經理。 主要負責HTML5 引擎 – Crosswalk 在安卓平臺的開發，以及一些其他和Web有關的新興技術的研發工作（如HTML5 並行技術, 3D Camera等）。他堅信Web是未來， 也非常希望和大家一起努力，讓這個未來能夠更快更好的到來。