本文作者Tal Gleichger是擁有8年實戰經驗的資深全棧Web開發者，也是SocialBelong的CTO及聯合創始人。在移動開發成爲大勢所趨之後，轉戰移動應用開發，在深度接觸Hybrid App開發的同時，他也對幾大開發者使用最廣泛的框架進行了使用與對比，剖析優劣，供開發者們參考。
以下爲譯文：
在過去的兩年裏，我一直都在和移動應用打交道，其中絕大部分是基於AngularJS開發的Hybrid App。基於AngularJS的UI框架並不多，而Ionic、Famo.us、Framework7和OnsenUI絕對是首選，此外，還有Google新推的設計語言Material Design。
什麼是Hybrid App？
混合應用（Hybrid App）相當於是利用Web開發技術編寫的原生應用，如HTML5、CSS、JavaScript都是進入原生容器（Native Container）的比較常用的語言，原生應用包含了一個鏈接到HTML文件的WebView隱藏瀏覽器。而使用Cordova、PhoneGap或其他類似的解決方案，不但使整合HTML和原生代碼成爲可能，甚至不費吹灰之力便能做到，也讓在應用商店中部署App更加容易。
圖：混合應用的發展趨勢
沒錯，開發者可以創建一個HTML5應用，然後以原生的方式運行。而Corodva，PhoneGap等解決方案也能夠讓混合應用像Native App那樣訪問照相機、加速計、位置和通訊錄等設備功能。
此外，混合應用開發還有很多好處。其中一個便是別出心裁的跨平臺優勢，既省錢又省時間。不僅如此，開發混合應用還是創意付諸實踐的最佳捷徑，所以優勢之二是：Web開發者不論水平如何，只需經過短期培訓就能成爲合格的混合應用開發者。一方面公司的成本可以降低，另一方面學習難度也低於Objective-C、Swift、Java及其他原生語言。雖然從性能上講，混合應用還稍遜Native App，但幾經發展，混合應用也在不斷提升的過程中。
在過去，當進行移動應用開發時，大多數開發者都會使用jQuery庫來打造動畫效果，並自己創建CSS和HTML。這個套路用在網站開發商還挺不錯，但對於移動應用開發而言卻是絕對行不通的。從響應式、跨平臺到原生應用質感，都得費一番功夫才能實現。如今這個時代，用戶體驗（UX）太重要了，如果他們覺得應用速度太慢，漏洞太多，質量太差，那你只能認栽。
而最近，混合應用和移動開發相當火熱，很多公司也看到了商機。在去年，已有三大UI框架被列入了開發工具推薦名單，其他框架也將陸續加入，爲混合應用帶來質量優、效率高、性能好的用戶體驗。
整合了AngularJS的Ionic框架發佈並不長，卻已在混合&移動開發圈子裏備受追捧。該框架的Git repo累計超過10,000星，幾乎每天都在更新，而且Ionic論壇（Ionic Forum）也相當活躍，甚至比StackOverflow更能幫助開發者解決技術上的難題。目前，Ionic 1.0仍處於測試階段，雖然存在Bug，但越來越流暢。Ionic團隊也在努力提高框架的效率和性能，儘可能實現原生質感。
Ionic還爲開發者提供了Ionic Box來幫助其能夠快速入門，對於微軟Windows用戶來說也省卻許多麻煩（或者可以直接使用Linux），啓動Ionic應用花費的時間最多5分鐘而已。此外，Ionic同樣提供了諸多工具，以適應iOS、Android和其他操作系統的不同需求。目前，Ionic正在完善名爲“Ionic Creator”的IDE/GUI工具。通過它，在Ionic應用上拖放創建模板能更方便。
圖：Ionic趨勢
安裝Ionic和Cordova：
創建一個新的Ionic項目：
提供多種模板來供開發者啓動左側導航菜單、標籤或空項目，舉例如下：
結果：
至此，便大功告成，開發者可運行自己的Ionic應用，只需三步即可完成創建，隨後便可刪除或進一步開發應用，而其項目結構亦是簡單易懂：
如果已經掌握PhoneGap和Cordova，那麼設置平臺並運行應用就更小菜一碟：
同樣的步驟也適用於Android系統，當然，所有支持Cordova的操作系統，包括iOS、Android、BlackBerry、Windows Phone、Palm webOS、Baday以及Symbian都在適用範圍內。
當我首次使用Ionic時，我實在不敢相信短短3分鐘就能誕生一個可運行的應用。Ionic不但能節省構建應用架構的時間，還能幫助改進不盡如人意的架構，並替換之前的CSS文件（SASS）。此外，Ionic一整套豐富的工具，從“下拉刷新（Pull-To-Refresh）”到“無限滾動（Infinite Scroll）”應有盡有，能極大地節省開發者的時間。
- Ionic的優劣勢對比：
| 優勢 | 劣勢 |
| 完美融合AngularJS | 測試階段，有Bug |
| 全套UI組件（下拉刷新、無限加載、標籤等） | 變換&動畫效果不夠流暢 |
| 社區活躍、框架適用範圍廣 |
- 評分：
| 評分標準 | 得分 |
| 文檔 | 8.0 |
| 快速入門 | 10.0 |
| 性能 | 5.0 |
| 社區 | 7.0 |
| 學習曲線 | 7.0 |
以最炫HTML5 JavaScript框架著稱的Famo.us可以說是專爲提高應用性能而生，而此處中所講的並非單純的Famo.us框架，而是ThomasStreet開發的Famo.us&Angular整合版。用自主開發的JavaScript引擎結合CSS3 3D轉換基礎上的GPU加速，來打造60幀/秒（fps）的流暢動畫效果，滿足最佳用戶體驗的需求，絕對能讓你的混合應用一瞬間高大上起來。
在渲染DOM元素方面，Famo.us的方法也獨樹一幟： 乾脆放棄DOM，轉而創建自己的DOM渲染樹。效果很不錯，值得稱讚。
由於Famo.us和Ionic的側重點有所不同，目前還不足以構成競爭的關係。不過考慮到兩個框架都整合了AngularJS，而前者彌補了Ionic惱人的性能和動畫流暢度的問題，由此來看，未來Famo.us很可能對Ionic構成威脅。前不久，Ionic團隊曾在論壇表示會考慮整合Ionic和Famo.us，但問題是後者的UI完全遵循不同的運作方式。
而Famo.us雖然在性能上有着卓越的優勢，卻也缺失了很多開發所必要的工具，換句話說，Famo.us只是一堆文件和文件夾組合起來的架構而已，順帶幾個Angular和Famo.us運行的範例罷了。我也是花了很長的時間才搞清楚用“原生”Famo.us和AngularJS&Famo.us開發應用的區別。
要啓動一個Famo.us+ AngularJS項目，只需複製一下初學者工具包或使用Bower管理工具來安裝即可。
節點依賴模塊（Node Dependencies）：
啓動項目：
通過上面的步驟，在端口9000創建一個NodeJS服務器，隨後便可編寫Famo.us。打開瀏覽器，即可看到一個完整的Angular整合Famo.us的範例。
Famo.us包含了兩個主要的“DOM”元素，分別爲modifiers和surface。surface從根本上講就是內容，也就是HTML元素，而modifier則是執行動畫、移動或其他操作的對象，兩者相輔相成。
- Famo.us+ AngularJS的優劣勢對比：
| 優勢 | 劣勢 |
| 60 fps的動畫效果讓應用更加生動，擁有着更好的用戶體驗 | 不提供菜單、標籤、基本應用結構/佈局等基礎架構 |
| 整合AngularJS | 發展尚未成熟，可供參考的範例有限 |
| 提供初學者工具包 | 文檔中缺少“入門指南” |
- 評分：
| 評分標準 | 得分 |
| 文檔 | 6.0 |
| 快速入門 | 4.0 |
| 性能 | 10.0 |
| 社區 | 4.0 |
| 學習曲線 | 4.0 |
最初使用Famo.us時並不覺得驚豔，直到後來在移動設備上測試，看到最終效果時才暗自叫絕。Famo.us的性能和靈活性非常棒，但呈現的學習曲線比較陡峭，而且文檔也不夠詳盡和易懂。在框架使用過程中，很多時候都像是摸着石頭過河，而具體的範例能幫助開發者更快掌握使用方法。
但即使Famo.us存在衆多缺點，但打造複雜動畫效果的優勢讓人難以拒絕。開發者應密切關注Famo.us的發展動向，這個框架成長得很快，也在日臻完善。
3. FrameWork 7
一年多前，在我剛創業時，爲了儘可能地減少麻煩，我一直在尋找一種組件豐富、功能強大的UI框架，而早於Ionic問世的FrameWork 7（簡稱“F7”）正好能滿足我的需求。其官方網站上稱F7是“爲iOS應用開發量身定製的全能型HTML框架”，這反倒給了我一個拒絕的理由，因爲F7不支持跨平臺。
不過，用F7開發混合iOS應用還是不錯的，一整套UI組件覆蓋了原生iOS應用所能呈現的一切內容。跟Ionic和Famou.us + Angular整合版有所不同的是，開發F7應用時，必須使用內置的F7 MVC（Model View Controller，模型試圖控制器）框架。
安裝F7：
通過F7源碼，創建bower_components目錄之後，如果想要啓動的話，還必須創建一個HTML文件，就這一點而言，F7並沒有像Ionic或OnsenUI那樣貼心地提供基礎模板。
示例：
此外，在使用F7開發時，還必須將文檔放進Web服務器的目錄中，並在localhost上操作。F7調用AJAX來實現頁面之間的轉換，需要一個運行的網絡服務器，但爲PhoneGap和Cordova部署時則可以省去這一步。
F7的優劣勢對比：
| 優勢 | 劣勢 |
| 幾近完美的iOS用戶體驗 | 不支持跨平臺 |
| 提供諸多實用的工具 | 使用自主開發的MVC框架 |
| 易於入門 | 尚未普及，無“starting-kit” |
- 評分：
| 評分標準 | 得分 |
| 文檔 | 9.0 |
| 快速入門 | 7.0 |
| 性能 | 6.0 |
| 社區 | 4.0 |
| 學習曲線 | 9.0 |
4. Onsen UI
Onsen UI不但整合了AngularJS，連解決方案都跟Ionic團隊的方向一致，可謂Ionic的一大勁敵了。對於PhoneGap和Cordova開發者來說，Onsen UI簡直是專爲解決啓動項目的UI問題而生的，同類的移動UI框架可以說是寥寥無幾。
在檢測Onsen UI時，我發現的第一個問題就是“入門指南”寫得並不清楚，而且Onsen UI團隊創建的模板也並不在模板存儲庫（比如Git）裏，要使用還得先下載。如此一來，如果遇到Bug，開發者根本無法直接寫問題報告來解決，或提交Pull Request以警示其他開發者。如果模板升級的話，開發者一方要做出相應的更新也不容易。
有弊也有利，Onsen UI的貼心之處在於，開發者能在線選擇顏色和基本組件樣式，無須更改CSS，下載後就能使用。當然，也可以用Monaca IDE，不必下載文件，直接用定製模板來創建項目。
那麼，如何用Onsen UI來創建一個項目呢？首先在“getting started”上選擇一個心儀的模板。解壓文件後，就能看到一個標準的Cordova/PhoneGap目錄結構。然後，回到網站，選擇一個不同的配色方案，比如黑色主題：
和Ionic一樣，Onsen UI提供了一套完整的指令（HTML自定義元素），很貼心地幫開發者避開了彎路，保證開發過程嚴格遵循業務邏輯。雖然Onsen UI社區沒有Ionic那麼活躍，但同樣人才濟濟，未來，Onsen UI的提升空間還是很大的。其次來談談框架本身，Ionic和OnsenUI都具備下拉刷新、列表、標籤、菜單等工具，但Ionic更用心，可以往AngularJS的控制器裏注入服務，以對其實現控制。
- Onsen UI的優劣勢對比：
| 優勢 | 劣勢 |
| 兼容AngularJS，友好支持Cordova和PhoneGap | 使用自家的MVC框架 |
| 提供諸多實用的工具 | 尚未得到廣泛使用 |
| 易於定製 |
- 評分：
| 評分標準 | 得分 |
| 文檔 | 7.0 |
| 快速入門 | 9.0 |
| 性能 | 5.0 |
| 社區 | 3.0 |
| 學習曲線 | 9.0 |
Material Design反映了Google基於Android 5.0 Lollipop操作系統的原生應用UI開發理念，而AngularJS還發起了一個Angular Material Design項目，爲應用開發者提供一組完整的實現Material Design的AngularJS UI元素。這聽上去不錯，但要深究或展示實際範例還爲時尚早，感興趣的開發者可登陸Angular Material官網瞭解最新進展，或進入GitHub下載源碼嚐鮮。
總結
綜上所述，在我看來，Famo.us和Ionic之間纔是真正的較量，因爲兩者都是旨在爲Hybrid應用開發提供原生體驗的UI框架，只是實現途徑各不相同。Ionic先從UI着手，啓動應用後能快速獲得一個包含多種UI組件和功能的基礎架構。同時，其性能問題也在逐漸完善。而Famo.us則是從性能、效率、動畫效果入手，以後可能會加入完整的UI工具包。
不論前端還是後端，開發者都應根據自己的側重點來選擇框架，而不是隨着框架而轉移自己的側重點。開發的應用僅限於iOS還是跨平臺？是否力求打造驚豔的轉換、動畫效果和流暢的用戶體驗？想要快速部署自己的產品嗎？是針對高端移動設備還是中低端？
實際上，這些問題一旦想明白，選擇什麼樣的框架就一目瞭然了。拿我自己來說，想要快速部署MVP，我更青睞Ionic，它整合了AngularJS，還有下拉刷新、無限加載、圖片輪播等諸多酷炫的功能，節省了我很多時間。更重要的是Ionic社區羣體龐大，我能把精力全部放在業務邏輯上，而不必親自開發整個UI。