1. 程式人生 > >前端開發框架選型清單

前端開發框架選型清單



隨著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 框架,畢竟是預設的框架。如果您對上面說到的框架都不滿意,那建議您體驗一下國內的框架一段時間,然後再回過頭來看剛才說到的框架,相信您一定會有一種豁然開朗的感覺。