移動WebApp開發 JS框架對比
原文鏈接：[http://zhangdaiping.iteye.com/blog/1613929]
1 目的
本次評比的目標是以移動Web App開發爲基礎的JS框架，會有意的排除部分不適用於移動Web App開發的JS框架，如 jQuery、ExtJS等。希望通過這次評比結果，能找到最合適你移動Web App應用開發的JS框架。
2 方法
由於JS框架在功能、特性和應用領域不同，所以，我將現在的主流JS框架分成四個大類：
Mobilie Javascript Library。移動JS框架，在Desktop Javascript開發中具有代表性的JS框架有jQuery、ExtJS等，而在Mobile Javascript開發中比較成熟的有Sencha Touch、jQuery Mobile等；
Javascript Template Engine。JS模版引擎，Javascript 在生成各種頁面內容時如果能結合一些模板技術，可以讓邏輯和數據之間更加清晰。Sencha Touch自帶XTemplate模版引擎，完美的應用在組件渲染中；
Javascript MVC Framework。JS MVC框架，如Backbone、Ember等。在ExtJS 4的應用架構中就設計有MVC模式，同時Sencha Touch很好的繼承了ExtJS在MVC方面的優秀架構思想；
Javascript Module Loader。JS模塊化加載，在CommonJS提出AMD規範時，就得到了大多數開發者的積極響應，同時誕生了一批符合 AMD規範的優秀的框架，如RequireJS，現在主流的JS框架都陸續開始支持AMD規範 ，如Dojo等。
本篇文章主要對Mobilie Javascript Library進行對比，針對移動JS框架中的兩類特性:
支持平臺與兼容性
開發與學習
作爲參考指標，最後分析總結。
3 Mobile Javascript Library
Mobile Javascript Library 包含兩種類型的JS庫：UI框架、類庫
UI框架包含一套完整的WebApp用戶體驗，提供一組功能豐富的控件，並允許開發者方便地依照自己的需要加以擴展；
類庫僅是一些類與函數的集合，類庫中的一個個“完整的概念”之間是無關的或是關係鬆散的。
以我們接觸得比較多的兩種Desktop Javascript Library爲例，ExtJS屬於UI框架，而jQuery就是一個類庫。
3.1 選擇移動JS框架思考的問題
優秀的觸摸屏交互體驗：手指作爲輸入設備代替鼠標光標提供了一個額外的用戶界面設計的挑戰。Mobile Javascript Library提供標準的用戶界面元素和事件處理模型。
跨平臺：支持多種移動設備平臺，如 iOS和Android等 。
輕量級：由於移動網絡帶寬的限制，會更加重視文件大小 。
使用HTML5和CSS3標準：大多數主流移動設備的網頁瀏覽器支持HTML5和CSS3，移動WebApp使用W3C規範的新功能與特性爲用戶提供更好的體驗。
下面，通過比較Mobile Javascript Library的特性，找到一個最適合的JS框架幫助你創建移動WebApp應用。
3.2 特性比較
3.3 分析
Sencha Touch
優點
• 用戶體驗最接近Native App， 具有整體的UI組件、佈局解決方案；
• 統一的編程代碼結構和要求，良好組織的代碼易於維護；
• 繼承ExtJS 4的應用程序MVC架構；
• 完善的API文檔，示例；活躍的社區，網上有大量的文檔書籍幫助學習；
缺點
• 兼容性差，僅支持webkit內核的瀏覽器；
• 框架比較重量級，學習成本比較高；
• 商業化使用有版權問題；
jQuery Mobile
優點
• 跨瀏覽器兼容性最好，幾乎兼容所有的平臺和瀏覽器；
• 入門簡單，語法簡潔，編碼靈活，一些簡單的應用直接用HTML既可實現，無需Javascript；
• 開源插件與第三方擴展網上資源豐富；
• 完善的API文檔，示例；活躍的社區，網上有大量的文檔書籍幫助學習；
缺點
• jQuery Mobile對代碼沒有特定的要求，後期維護難度較大；
Zepto
優點
• 學習成本低，Zepto保持了與jQuery幾乎一樣的功能，使用gzip壓縮只有5-10k；
缺點
• Zepto不支持Windows Phone下的IE ；
Jo HTML5 Mobile App Framework
優點
• 沒有什麼突出的優點，感覺是與Sencha非常相似的一個框架；
缺點
• 兼容性相比Sencha Touch稍好一點，但是也不支持WP IE、Firefox、Opera；
• 網上文檔、資料太少，中文資料幾乎沒有，英文資料也非常少；
Wink Toolkit
優點
• Wink的核心庫是輕量級的，支持AMD規範的模塊化加載，功能接口相比Zepto更豐富；
• 提供很酷的2D、3D效果UI組件；
缺點
• 組件對 Android的支持程度不好，3D組件無法使用 ；
ChocolateChip-UI
優點
• 組件樣式模仿iOS界面，用戶體驗與iOS非常相似；
缺點
• 兼容性差，僅支持webkit內核的瀏覽器；
• API文檔太簡單，網上資料非常少，社區沒有活力；
• 組件擴展難度高，要熟悉WMXL標籤語法；
XUI
優點
• XUI有多個版本，跨瀏覽器支持的代碼都被剝離，使用GZIP壓縮之後最小隻有4.2kb。學習成本低，與jQuery相似的鏈式語法。
缺點
• XUI的優點也是缺點，有的Web App應用可能並不希望將跨瀏覽器支持拆分爲多個版本使用；
Dojo Mobile
優點
• Dojo本身有很多優秀的設計，面向對象、MVC、JS模塊化加載；
• 完善的API文檔，示例；活躍的社區，網上有大量的文檔書籍幫助學習；
缺點
• Dojo Mobile需要依賴完整的dojo庫，壓縮之後的代碼140k，gzip壓縮之後在40k；
• 兼容性差，僅支持webkit內核的瀏覽器；
• 學習成本高；
4 總結
想要最好的用戶體驗Sencha Touch會是最好的選擇，想要最好的兼容性應當選擇jQuery Mobile，如果有相當強大的UI團隊，Zepto、XUI會是更好的選擇，適合的纔是最好的。
對於我個人而言，我比較青睞Zepto這種小巧靈活的類庫，能讓我有最大的自由發揮空間。我在面向對象、UI組件、MVC方面擁有多年的開發經驗，有能力去設計、編寫 UI框架，當然，這些都離不開我的UI團隊的支持。雖然Zepto不兼容IE，但是這在可接受的範圍之內， 如果未來官方不能支持IE 的話，我的團隊有足夠的實力與時間實現Zepto對IE的兼容 。
選擇一個適合的移動JS框架只是開始，移動WebApp開發纔是真正的挑戰，如何解決跨平臺的各種兼容問題？如何保證基於HTML5的WebApp的穩定性？如何平衡動畫效果的性能問題？等等。
5 參考資料
下載Sencha Touch源代碼、閱讀文檔並加入社區。
下載jQuery Mobile源代碼、閱讀文檔並加入社區。
下載Zepto源代碼、閱讀文檔。
下載Jo HTML5 Mobile App Framework源代碼、閱讀文檔並加入社區。
下載Wink Toolkit (http://www.winktoolkit.org/)源代碼、閱讀文檔並加入社區。
下載ChocolateChip-UI源代碼、閱讀文檔並加入社區。
下載XUI源代碼、閱讀文檔 。
js模塊化開發—js大項目代碼組織和多人協作的解決之道
The Top 10 Javascript MVC Frameworks Reviewed
Web App 被看衰，Hybrid App 纔是新王道
Sencha Touch or jQuery Mobile? – Read This Before You Make a Decision
幾種常用HTML5移動應用框架的比較
5個jQuery的備選輕量級移動客戶端開發(Mobile development)類庫
使用 Jo 和 PhoneGap 構建本地移動應用程序
使用 Dojo Mobile 爲 iOS 智能終端開發 Native-like Web 應用