前端開發框架選型清單

http://www.infoq.com/cn/news/2014/05/web-ui-framework

隨着Web技術的不斷髮展，前端開發框架層出不窮，各有千秋，開發者在作技術選型時老是要費一番腦筋，最近，IBM高級工程師王芳俠撰文對Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16 個國內外前端開發框架進行了比較詳細的比較，很是值得讀者借鑑。

從國外的桌面端框架來講，做者認爲主要有如下幾個：

• Bootstrap主要針對桌面端市場，Bootstrap3 提出移動優先，不過目前桌面端依然仍是 Bootstrap 的主要目標市場。Bootstrap 主要基於 jQuery 進行 JavaScript 處理，支持 LESS 來作 CSS 的擴展。若是想要在 Bootstrap 框架中使用 Sass，則須要經過 Bootstrap-Sass項目增長兼容。Bootstrap 框架在佈局、版式、控件、特效方面都很是讓人滿意，都預置了豐富的效果，極大方便了用戶開發。在風格設置方面，還須要用戶在下載時手動設置，可配置粒度很是細，相應也比較繁瑣，不太直觀，須要對 Bootstrap 很是熟悉配置起來才能駕輕就熟。
• jQuery UI是 jQuery 項目組中對桌面端的擴展，包括了豐富的控件和特效，與 jQuery 無縫兼容。同時，jQuery UI 中預置了多種風格供用戶選擇，避免了千篇一概。若是您對預置的風格不滿意，還能夠經過 jQuery UI 的可視化界面，自助對 jQuery UI 的顯示效果進行配置，很是方便，夠高端大氣上檔次。
• Sencha Ext JS是 Sencha 基於 Ext JS 開發的前端框架，內容極其豐富，控件、特效等支持很是很是豐富，表格、圖畫、報告、佈局、甚至數據鏈接，無所不包。只有您想不到，沒有它辦不到。基於 Sass 和 Compass，使得用戶對格式的修改和特效製做更加方便。商業化是 Sencha 的另外一把利劍。幫助 Sencha 披荊斬棘之時，也把大把的碼農砍在馬下。Sencha 規定，凡是商業化的應用，都須要付費。另外，Sencha 的輔助產品也所有收費，不然只能是試用版。
• Dojo，目前惟一能與 Sencha Ext JS 一較高下的框架就只有 Dojo了。抱着 IBM、VMWare 等衆多大腿，Dojo 的一顰一笑都額外惹人注目。Dojo 項目的產品線和功能也特別豐富。首先，Dojo 有本身的 DOM 解析器 Nano，是 DOM 解析和處理的內核。此外，Dojo 的 Web 框架有很是豐富的佈局、版式、控件以及特效，對多語言以及圖表的擴展支持都很是好，並支持對地圖的操做。你們能夠查看它的演示，與 Ext JS 的效果進行比較。此外，Dojo 還有本身的圖形化設計和開發工具 Maqetta，能夠經過拖拽實現設計。Dojo 的風格設置不是在下載的時候指定的，而是經過引用不一樣的 CSS 格式來實現。
• Mootools能夠說是目前最輕量級的前端框架，內核 js 壓縮完以後只有 8k，完整版壓縮以後也不到 100k，遠比其餘框架要小不少。Mootools 有本身的面向對象設計的內核 Mootools Core。伴隨着最小的文件大小，框架的功能比其餘框架也要弱很多，只有在控件和特效上有少許支持。
• Prototype JS也是一個簡潔的框架，有着豐富的對 DOM 操做的功能，對 Ajax 和 JSON 支持得都很是好，在使用上與 jQuery 相比也相差很少。做爲 Rails 默認的 JavaScript 框架，相信對廣大開發人員也頗有借鑑意義的。
• YUI做爲開源前端框架的鼻祖，在框架上的功力很是之深。有着本身的解析 DOM 的核心框架，而且在特效、動畫、圖表等方面都有豐富的擴展，並能夠經過 YQL 直接訪問 Yahoo！的數據。在用戶常用的功能方面都有着不錯的表現。與 jQuery 靈活的語法相比，YUI 顯得更加中規中矩，在代碼組織、結構和模式方面都更加講究，更體現出工程師的嚴謹。

對於國內的前端開發框架，做者也作了分析：

• Kissy是阿里集團自主開發的前端框架，目前在淘寶網、一淘網等阿里系網站上獲得很多應用。Kissy 框架模仿 jQuery 編寫了本身的內核 Kissy Core，用於對 DOM 的解析，Ajax 處理等。同時，有着豐富的控件，並實現了一些動畫效果和特效。一樣，在 Kissy 的控件中也能夠看到 Bootstrap 等國外框架的影子。此外，Kissy abc 項目工具能夠幫助用戶實現自動化構建，並有不少擴展組件方便用戶使用。
• Qwrap是百度有啊團隊推出的 JavaScript 框架，如今被收入 360，被普遍應用與 360 產品中。Qwrap 綜合 jQuery、Prototype、YUI 特色，對 JavaScript 進行了封裝。可是，若是要把 Qwrap 算成一個前端開發框架仍是有些牽強，由於除了 JavaScript 類庫以外，Qwrap 基本乏善可陳，還處於發展階段。
• Tangram是百度推出的另外一個 JavaScript 框架，被普遍應用於百度系旗下的產品，與 Qwrap 相似，Tangram 也只能算是一個 JavaScript 框架，對 JavaScript 作了很多擴展，可是做爲前端開發框架仍是顯得比較單薄。基於此，百度公司繼續推出了兩個基於 Tangram 的項目，Magic 和 Baidu Template。

對於桌面端，做者給出了技術選型的建議：

目前 Bootstrap 和 jQuery UI 已經能夠知足大多數的開發需求，也在業界獲得了普遍的應用，有着豐富的組件和擴展，以及相對簡潔的語法和操做。應對咱們的基本需求已經足夠了。若是您對前端界面的效果有比較高的要求，但願能夠應用像結構樹這樣比較複雜的控件，建議您考慮 Dojo，抱了這多年的大腿也不是白抱的，效果仍是很不錯的。對於，局域網的應用，還能夠考慮 Sencha Ext JS 框架，效果更加震撼，可是對網絡的要求也更高。若是這些仍是不能知足您心裏的狂野，那隻能建議您使用 Flex 或者 SilverLight 了。相反，若是您對網絡速度很是敏感，但願找一個迷您而且功能不錯的框架，那 Mootools 會是您不錯的選擇。若是您很懷舊，也可使用 YUI，雖然曲線不夠性感，可是內容很豐富。若是您是一個 Ruby on Rails 的開發人員，建議您能夠先看一下 Prototype 框架，畢竟是默認的框架。若是您對上面說到的框架都不滿意，那建議您體驗一下國內的框架一段時間，而後再回過頭來看剛纔說到的框架，相信您必定會有一種豁然開朗的感受。

除此以外，做者還對移動端的開發框架作了介紹，並提出了本身的選型分析，具體的內容，讀者能夠查看其原文。InfoQ讀者對於前端開發框架的選型有何心得，歡迎發表本身的見解。