[Cordova Hybrid APP] (二) 跨平台開發基礎認識

NET Developer有極大的比例都跟網頁開發相關，但目前市場主流都關注在行動裝置的開發，一般網頁設計師要轉各平台的APP原生程式開發勢必得付出不小的成本，PhoneGap(Cordova前身，下文一律稱為Cordova)已經在市場上行之有年，但以往都必須要另外安裝其它IDE開發工具，如Eclipse等工具來協助快速開發，今年微軟像是佛心來的，正積極的將Cordova收納到開發工具擴展套件中。

要學習Hybird APP，首先必須要先簡單的了解一下目前三種較常見的手機開發模式，Web APP、Hybrid APP、Native APP。


Web APP (網頁應用程式) :

此種該發模式其實就是一般的網頁程式，開發者運用HTML5、CSS3等相關技術，讓行動裝置在瀏覽網頁的時候，自動將網頁的內容調整成適合閱讀(不須縮放)的介面，Bootstrap框架就是一個常見的設計方式，因此不需要學習額外的技術就可以快速的開發，但畢竟是網頁程式，因此無法離線使用，也無法上架至各APP商城。

Native APP(原生應用程式) :

各平台手機的原生應用程式，顧名思義就是必須要學習多種平台的開發語言，因此必須付出相對較大的學習成本，不同於Web APP必須連線，且無法控制手機硬體，其最大的優勢是可以操作手機內建軟硬體資訊、提供最良好的UI用戶體驗。

Hybrid APP(混合式應用程式) : 

市場上同時擁有多種平台開發技術的人才短缺，所以有人就想到若可以使用Web的跨平台開發方式，同時又可以控制手機提供的硬體該有多好，因此整合上述兩種開發模式優點的Hybrid APP就產生了，Hybrid APP使用Web為開發基礎再透過各平台APP平台的SDK建置後，所產出的檔案和原生程式一樣，因此允許上架。

儘管Cordova提供了控制硬體介面，但筆者個人認為，若你要開發的應用程式需要大量與手機進行互動的話，就必須謹慎的考慮開發方式，畢竟還是基於Web的開發基礎，載入和UI介面的反應都比原生的程式慢，如Game可能就不適合。

Cordova是一個建立在JavaScript為基礎的一套Hybrid APP Framework，它提供了JavaScript API來控制各平台手機的硬體，搭配HTML5+CSS3等相關UI框架，讓Web開發者可以不需要學習各平台的語言，就可以快速開發出多平台的APP。因此要學跨平台混合式APP，必須要先學會這些技術，本文不會特別針對網頁語言特別說明，主要的目的是要跟大家分享一下Hybrid APP。

在開始開發之前，必須要先選擇要搭配的UI框架，目前主要可分為JavaScript和CSS為主的兩種UI框架，筆者本人對於CSS的熟悉度比較沒有那個高，因此也沒有辦法特別分析CSS UI框架的優缺點，如果你希望使用CSS的UI框架來開發的話，可以選擇與MVC相同的bootstrap來當作視覺設計的部分。JavaScriptUI框架的部分，選擇的類型就比較多了，jQuery Mobile、Intel App Framework(前身是jqMobi)、jQTouch、Sencha Touch等等，網路上有有很多範例的網站以及效能評估的報告有興趣的可自行Google一下。

另外視覺化設計工具的部分，在此版本的Visual Studio並沒有特別收納哪種類型的UI Framework，因此暫時沒有此功能，雖然筆者長期不使用Design Mode的介面，但若你對於HTML5 Tag並不熟悉，可以使用第三方的設計工具來輔助，這裡推薦兩套視覺化開發工具可以協助產生相關語法，EZoAPP(中X公司開發的、中文化介面，使用jQuery Mobile)、Intel XDK(英文介面)，但不建議直接使用透過該工具產出的語法所有語法，這兩套工具都有引用一些私有的JavaScript檔，筆者個人的開發習慣不喜歡引用一些不明的檔案，而且這裡建議使用，是因為不熟HTML5的新手們可以透過拖拉及設定所產生的語法來快速學習，但一個有經驗的Programmer應具備直接調整語法的能力，而不該只會使用精靈來寫程式。

筆者搜尋市面上各式各樣的Css Framework & JS Framework，JS和CSS框架的效能評比不在這裡的討論範圍(目前很多CSS框架都是基於RWD來設計的理論上效能應該會叫卓越)，最後選擇了jQuery Mobile來當作UI框架，JQM不是效能最佳的，會選擇的主要原因是因為JQM所提供的UI介面是比較貼近原生APP的樣式(自己對於jQuery相對的也比較熟悉)，另外一個重要的原是~~~~~~~

若你只是要開發Android程式大概沒有什麼問題(Google上架原則上是沒有在審核的)，但是若你想要開發可以在iOS上架的應用程式，請特別注意功能性及使用者體驗，Adobe也曾明確的警告開發者，由於基於Corodva框架開發的程式可能會由於太慢或體驗起來不夠「原生」，而被蘋果應用商店拒絕上架。這個就很重要了，因為JQM的目的是希望可以取代原生的APP，而Bootstrap的目的是要將網站直接搬到行動裝置上(Web APP)，因此在UI的設計上就比較不像原生的APP。

但遺憾的是，JQM雖然很像原生APP，但卻有一個萬惡的閃頻問題，有解決的方式，但就尙失了動畫的效果，後續筆者若找效能較佳的UI Framework在分享給大家。

下圖為Intel XDK工具的操作畫面

下圖為EZoApp工具的操作畫面

參考網站
使用者體驗教學，建議有興趣開發iOS Hybrid App的人也拜讀一下。
PhoneGap应用开发对策：如何通过苹果审核？
利用PhoneGap & HTML5 開發手機應用程式
Web App 被看衰，Hybrid App 才是新王道
Hybrid Mobile Apps: Providing A Native Experience With Web Technologies