根據最近的一篇報告顯示，HTML是移動應用開發人員使用最多的語言，開發人員對于選擇哪種網頁技術考慮的最主要因素，是代碼的跨平臺便攜性和開發的低成本性。我們常常聽說，hybrid app使用起來非常慢，而且設計也很糟糕，讓我們看看是否有可能又有原生應用的形，又有我們習慣使用的感。

　　這篇文章會提供很多關于如何構建良好的hybrid移動應用的線索、代碼片段和經驗。我將會大致介紹一下hybrid移動應用的開發，包括它的優點和缺點。然后，我會分享一下過去兩年我在開發Hojoki和CatchApp時積累的經驗，這兩個項目都運行在主流的移動平臺，并且是由HTML、CSS和Javascript建成的。最后，我們會介紹一下打包代碼到原生app的一些比較好的工具。

　　什么是混合模式移動應用

　　移動app可以大致被分為三種，native、hybrid和web app。如果使用native app，你可以使用設備和操作系統的所有能力，同時，平臺的性能負荷最小。然而，構建web app可以讓你的代碼跨平臺，使得開發時間和成本大大減少。而hybrid app把這兩者的優點都結合起來，使用一套共同代碼，在許多不同的平臺上部署類似原生的app。

　　有兩種構建hybrid app的方法：

　　Webview app：HTML,CSS和Javascript基礎代碼在一個內部的瀏覽器(叫做WebView)中運行，這個瀏覽器打包在一個原生的app中，一些原生的API可以通過這個包被Javascript獲得，比如Adobe PhoneGap和Trigger.io。

　　被編譯的hybrid app：用一種語言編寫代碼(如C#或者Javascript)，對于每一種支持的平臺都把代碼編譯進原生代碼中，這樣做的結果是，每一個平臺都有一個原生的app，但是在開發過程中少了一些自由空間。可以看一下這些例子，Xamarin，Appcelerator Titanium，Embarcadero FireMonkey。

　　這兩種方法都被廣泛使用，存在即合理，不過今天我們只關注WebView app ，因為WebView app可以讓開發人員平衡他們現有的網頁技術。我們來看一下hybrid app相對于native app和web app的各種優點和缺點。

　　優點

　　開發人員可以使用現有的網頁技術

　　對于多種平臺使用一套基礎代碼

　　減少開發時間和成本

　　使用響應式網頁設計可以非常簡便的設計出多樣的元素(包括平板)

　　一些設備和操作系統特征的訪問

　　高級的離線特性

　　可見度上升，因為app可以原生發布(通過app store)，也可以發布給移動端瀏覽器(通過搜索引擎)

　　缺點

　　某些特定app的性能問題(那些依賴于復雜的原生功能或者繁重的過渡動畫的app，如3D游戲)

　　為了模擬native app的UI和感官所增加的時間和精力

　　并不完全支持所有的設備和操作系統

　　如果app的體驗并不夠原生化，有被Apple拒絕的風險(比如說一個簡單的網站)

　　這些缺點比較顯著，不能忽略，它們告訴我們，并不是所有的app都適合混合模式，你需要小心的預計你的目標用戶、他們對平臺的選擇和對app的需求。對于許多app來說，好處都是大于壞處的，比如內容驅動的app。

　　Hojoki和CatchApp都是內容驅動的app，所以我們一開始覺得它們非常適合混合模式的開發方式。我們之前提到的好處中的前三點對于我們構建Hojoki的移動app幫助很大，不過也僅僅是4周的時間而已。顯而易見，Hojoki的第一個版本缺失了很多重要的東西，接下來的時間里，我們都把精力撲在提升性能、對每一個平臺制作自定義的UI和利用不同設備的高級特性上。那個時候積累的那些經驗對于讓app形似并神似native app很重要，下面我會盡可能多的分享一下我的經驗。