前端开发框架对比

本文选取了 Bootstrap、jQuery UI、jQuery Mobile、Sencha ExtJS、Sencha
Touch、Sencha GXT、Dojo、Dojo
Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 16
单国内外前端开发框架进行初步的横向比较,可以当作大家选择前端开发框架的启幕参考。

临近几年就 jQuery、Ext 以及 CSS3 的上进,以 Bootstrap
为代表的前端开发框架而恒河沙数一般挤入视野,可谓应接不暇。不论是桌面浏览器端还是倒端都涌现起成千上万良好之框架,极大丰富了出素材,也造福了豪门之开。这些框架各有特点,本文对这些框架进行初步的介绍和较,希望能为大家挑选框架提供一些援手,也也继承详细研究这些框架的抛砖引玉。

JavaScript & CSS

目前前端框架主要利用 JavaScript+CSS 模式,我们事先来询问一下立两者。

事先准备的 JavaScript

即主流的 JavaScript 框架排名中,jQuery 和 Ext
可终佼佼者,获得了用户的普遍好评。国内的局部框架很多也是仿 jQuery 对
JavaScript 进行了打包,不过这些框架的鼻祖 YUI 还是坚持用好的
JavaScript 类库。

jQuery 是现阶段因故底最多的前端 JavaScript 类库,据初步统计,目前 jQuery
的占有率已经越 46%,它算比较轻量级的类库,对 DOM
的操作也于便于得,支持的作用和控件也异常多。同时,基于 jQuery
有为数不少扩张项目,包括 jQuery UI(jQuery 支持的局部控件和效应框架)、jQuery
Mobile(移动端的 jQuery 框架)、QUnit(JavaScript 的测试框架)、Sizzle(CSS
的选项引擎)。这些补使得 jQuery
框架进一步完整,更令人兴奋的是,这些扩展和眼前之框架基本都是相当的,可以陆续使用,使得前端开发更加助长。

Ext 是 Sencha 公司重视的 JavaScript 类库,相比 jQuery,Ext JS
更重量级,动辄数兆的文本,使得 Ext
在外网使用的时段会担心多。但是,另一方面,在 Ext JS 庞大之文本背后是
Ext JS 强大的意义。Ext JS
的控件和效能可以说强大以及华及了受丁发指的程度。图表、菜单、特效,Ext JS
的控件库非常丰富,同时其的交互也深强,独立靠 Ext JS
几乎就足以代表控制层完成叫客户的互动。强大的功力,丰富的控件库,华丽的力量也使得
Ext JS 成为内网开发利器。

框架鼻祖 YUI 也产生和好的 JavaScript 类库,DOM
操作和功效处理吧尚较有利,功能跟控件也充分齐全,但是比 jQuery 和 Ext
JS 显得较平和一些。随着 Yahoo!的凋零,YUI
的意见也日渐被新打底框架淹没,想来也于丁心疼。

除去上述的老三独 JavaScript 类库,还有 Dojo、Prototype、Mootools
等许多类库,由于本文讨论的框架多以上述框架,所以任何框架暂未讨论。

优先准备的 CSS

就 CSS3
的出,浏览器对体制的支持更上了一个层次,效果更是突出。各框架为困扰出出基于
CSS3 的体裁,让框架进一步丰富。

对 CSS3,更是推出了一些预编译的扩大框架,主要是 LESS、Sass 和
Compass(Compass 是因 Sass
的扩展)。可以一本万利地拓展变量定义,格式引用,函数定义等操作,并置于了大气之功效。让您的
CSS 开发效率提升一个水平。根据 Chris Coyier 的比,Sass+Compass
几乎完胜
LESS。有趣味之读者可活动参考http://css-tricks.com/sass-vs-less/。由于
Sass 是用 Ruby 开发的,所以啊需相应的 Ruby 环境将文件编译成 CSS 文件。

 

回页首

国内外前端开发框架对比

首先我们先对眼前国内外主流前端开发框架做一个为主的摸底,之后再针对他们进行一个直观的自查自纠。

Bootstrap

Bootstrap(http://www.bootcss.com)是时下桌面端最为盛行的出框架,一经
Twitter 推出,势不可挡。Bootstrap 主要对桌面端市场,Bootstrap3
提出走优先,不过当下桌面端依然还是 Bootstrap 的重中之重目标市场。Bootstrap
主要根据 jQuery 进行 JavaScript 处理,支持 LESS 来做 CSS
的扩张。如果想只要以 Bootstrap 框架中动用 Sass,则需要经
Bootstrap-Sass(https://github.com/thomas-mcdonald/bootstrap-sass)项目增加兼容。Bootstrap
框架在布局、版式、控件、特效方面都格外给人乐意,都预置了长的意义,极大便利了用户支出。在作风设置方面,还得用户以下载时手动设置,可配备粒度非常细,相应也比较麻烦,不顶直观,需要对
Bootstrap 非常熟悉配置起才得心应手。

在浏览器兼容性方面,目前 Firefox, Chrome, Opera, Safari,
IE8+等主流浏览器 Bootstrap 都提供支撑。但是在 IE 支持地方略发短板,对
IE6 和 IE7 支持且未是特别好。在 Bootstrap3 中还是扬弃了针对性 IE6、IE7
的支持。不过当境内,根据 CNZZ 的统计,目前 IE 的占有率还高达
46.98%,同时大量国内浏览器为是利用 IE 内核。这被我们在采用 Bootstrap
的上总是有所顾忌。在 Bootstrap2 上面,可以由此 BSIE 项目有增无减对 IE6
的支持,但是也非可知支撑一切成效。

每当框架扩展方面,随着 Bootstrap
的大面积采用,扩展插件与组件为非常丰富,涉及显示器件、兼容性、图表库等各个方面。

图 1. Bootstrap 之布局及效益示例

图片 1

jQuery UI

jQuery UI(http://jqueryui.com/)是 jQuery
项目组中对桌面端的扩充,包括了长的控件和特效,与 jQuery
无缝兼容。同时,jQuery UI
中预置了又品格供用户选择,避免了相同。如果您对预置的品格不乐意,还好透过
jQuery UI 的可视化界面,自助对 jQuery UI
的亮效果开展安排,非常便于,够高端大气上档次。

祈求 2. jQuery UI 底力量示例

图片 2

jQuery Mobile

jQuery Mobile (http://jquerymobile.com)是
jQuery 项目对倒端的恢弘,目前支持 iOS, Android, Windows Phone, Black
Berry
等主流平台。具体支持情况可以参见http://jquerymobile.com/gbs/。另外
jQuery Mobile 在布局,控件和特效方面都坏慷慨。在风格方面,与 jQuery UI
类似,除了预置的品格效果外,还支持用户可视化配置的效力。

可圈可点的凡,jQuery Mobile 还跟 Codiqa
无缝连接,用户可以直接通过拖拽实现对界面的规划,以及代码的成形。

图 3. jQuery Mobile 的机能示例

图片 3

图片 4

Sencha Ext JS

Sencha Ext JS(http://www.sencha.com/products/extjs)是 Sencha 基于
Ext JS
开发之前端框架,内容极其丰富,控件、特效等支撑大非常丰富,表格、图画、报告、布局、甚至数连接,无所不包。只有你想不顶,没有她办未交。基于
Sass 和 Compass,使得用户指向格式的改动和特效制作更加有益。此外,Sencha
有抬高的成品线,Sencha Desktop Packager
可以吃你的下拥有桌面应用之效能, Sencha Animator 基于 CSS3
更加便民用户指向特效的打造,不光支持桌面端,移动端更是无以话下。在 Sencha
看来,用 Animator 做打都是自在破。Sencha Space 是基于
HTML5,提供制作过平台以的利器。同时 Sencha Ext JS
对主流浏览器的支持吗甚美妙。

Sencha Ext JS 有着耀眼的宏伟,但是光芒背后总有点阴影。除了前面涉嫌的
Ext JS 太过重量级之外,商业化是 Sencha 的外一样将利剑。帮助 Sencha
披荆斩棘的时,也拿坏把的码农砍在马下。Sencha
规定,凡是商业化的下,都需付费。另外,Sencha
的援手产品吗全收费,否则只能是试用版。这里的扶产品,其实不外乎了面提到的具有产品。

图 4. Sencha Ext JS 底功效示例

图片 5

图片 6

Sencha Touch

Sencha Touch(http://www.sencha.com/products/touch)是 Sencha
面向移动端的支付框架,基于 HTML5
技术,保证了针对性大多数活动平台的支撑。Sencha Touch
包括丰富的布局,控件和特效。并且 Sencha Touch
对响应式支持的充分好,在不同装备上,甚至在横屏和竖屏时还见面显得不同的效能。这种力量是
Sencha Touch 控件自适应的。Sencha Touch
也实现了对大部分走设备的支持。Sencha Architect
是本着动端的可视化编辑工具,有着不朽之效应,但为颇具难得的身价。

又 Sencha Touch 也支持混合式 App 创建,也便凡因 Web 技术,配合
PhoneGap (http://phonegap.com/)或者
Cordova(http://cordova.apache.org/)之类的家伙,就好构建移动应用。Sencha
Touch、jQuery Mobile、Foundation
这些前端框架负责界面和法力的编,PhoneGap、Cordova 框架则允许通过
JavaScript
和其余接口对手机配备的调用,开创了初的位移端支出模式,真正实现了运动端的跨平台开发。

Sencha GXT

Sencha GXT(http://www.sencha.com/products/gxt/)是 Sencha 对 Google
的 Web Toolkit 框架的恢宏。可以支撑通过 Java 文件的分析,生成 HTML5
页面文件,可以与 Java
环境无缝集成。有着丰富的控件和特效,并且可无缝调用 Google 地图等
Google 应用。虽然开时莫是专门直观,但是效果还是非常丰富的。与 Sencha
Ext JS 丝毫不发弱势。

图 5. Sencha GXT 之机能示例

图片 7

图片 8

Dojo

时唯一能够跟 Sencha Ext JS 一较高下的框架就只有
Dojo(http://dojotoolkit.org)了。抱在 IBM,
VMWare 等诸多杀腿,Dojo 的等同皱眉一笑都分外惹人注目。Dojo
项目之产品线和效能也专程丰富。首先,Dojo 有自己的 DOM 解析器 Nano,是
DOM 解析和处理的基石。此外,Dojo 的 Web
框架来非常丰富的布局、版式、控件以及特效,对大多语言和图片的扩张支持都生好,并支持针对地图的操作。大家好翻其的示范(http://demos.dojotoolkit.org/demos/),与
Ext JS 的效果开展比。此外,Dojo 还有团结之图形化设计与开发工具
Maqetta,可以经拖拽实现规划。Dojo
的作风设置不是在下载的时光指定的,而是通过引用不同之 CSS 格式来贯彻。

Dojo 虽然于 jQuery 重量级无丢掉,但是比 Ext JS
还是轻量级一些,至少在文件大小上。另外,Dojo 还有温馨之 CDN
机制,只要通过配备,就得本着 Dojo 文件进行 CDN。由于有 IBM,Oracle
等大佬的支撑,Dojo 在和 Spring 等现有框架支持方面呢表现得不行美妙。

图 6. Dojo 的功用示例

图片 9

图片 10

Dojo Mobile

Dojo Mobile(http://dojotoolkit.org/features/mobile)是 Dojo
推出的移动端框架,表现也坏尊重。在布局,控件,特效方面都生了广大功夫。并支持与所用平台匹配的品格设置,如果您不喜尚足以引用不同
CSS 文件来贯彻不同功效。

除外可以于倒端的浏览器上运,Dojo Mobile 也支撑以及 PhoneGap
无缝连接,可以由此 Dojo Mobile 开发活动 App
应用。同时为负有对的响应性(在宽屏和窄屏上之显示力量不同)。

希冀 7. Dojo Mobile 在 IPhone 上的成效示例

图片 11

Mootools

Mootools(http://mootools.net)可以说凡是眼下极轻量级的前端框架,内核
js 压缩了后只有 8k,完整版本减后也未至
100k,远较其它框架而稍稍群。Mootools 有投机之面向对象设计之内核 Mootools
Core。伴随在最为小之文件大小,框架的效力比较其它框架为如弱不丢,只有以控件和特效及有微量支撑。

贪图 8. Mootools 效果示例

图片 12

图片 13

Prototype JS

Prototype
JS(http://prototypejs.org)也是一个简洁之框架,有着丰富的对准
DOM 操作的功能,对 Ajax 和 JSON 支持得还死好,在使用及与 jQuery
相比吗相差不多。作为 Rails 默认的 JavaScript
框架,相信对常见开发人员也很有借鉴意义的。

在扩大方面,Scriptaculous(http://script.aculo.us/)对 Prototype JS
进行了丰富的扩充,主要是于动画特效、Ajax 控制、DOM
操作、单元测试方面等。

YUI

YUI(http://yuilibrary.com)作为开源前端框架的鼻祖,在框架上之功非常的老。有着自己之解析
DOM 的中心框架,并且于特效、动画、图表等方面还生增长的扩展,并得以由此
YQL 直接访问 Yahoo!的多少。在用户时时采取的法力点都抱有不错的呈现。

暨 jQuery 灵活的语法相比,YUI
显得愈加中规中矩,在代码组织、结构及模式方面都越发讲究,更体现出工程师的谨言慎行。同时
YUI 也有所丰富的制品线,拥有测试框架 YUITest、文档生成框架
YUIDoc、自动构建框架 YUI Build,满足项目开发各面的求。随着
Yahoo!的没落,YUI
也感觉到逐渐步入暮年,但当相当严谨完整的前端框架鼻祖,足以秒杀其他。

图 9. YUI 底功效示例

图片 14

Foundation

Foundation(http://foundation.zurb.com/)是 ZURB
旗下之第一面向移动端的出框架,但是也保障对桌面端的相当,目前已经更新至
Foundation4 版本。框架主要采用 jQuery 和 Zepto(语法酷似 jQuery,但正如
jQuery 更轻量级)作为 JavaScript 基础,CSS 则基于
Sass、Compass,有着不行好的扩展性,并具有丰富的布局,版式和各种各样的控件与特效,非常便利开发者使用。控件的响应式效果啊赞助用户识别不同浏览器效果。

ZURB
作为一个完完全全的种类组,包括广大原型、设计、构建、分析等一律多样工具,为用户提供整体的服务。当然,有众多劳务是如果收费的。

Foundation 主要归因于移动端风格为主,如图 10 所著。

图 10. Foundation 底作风示例

图片 15

图片 16
图片 17

Kissy

Kissy(http://docs.kissyui.com)是阿里集团独立开发之前端框架,目前当淘宝网、一淘网等阿里系网站上收获多使。Kissy
框架模仿 jQuery 编写了投机之内核 Kissy Core,用于对 DOM 的剖析,Ajax
处理等。同时,有着丰富的控件,并贯彻了片卡通效果跟特效。同样,在 Kissy
的控件被吗堪见到 Bootstrap 等海外框架的影子。此外,Kissy abc
项目工具得以拉用户实现自动化构建,并起无数恢宏组件方便用户用。

应当说 Kissy
是当下境内开之太好的前端框架,在实质上运用着吗通过了视察,但同国外成熟框架相比还是发生必然别。

图 11. Kissy 的功力示例

图片 18

Kissy Mobile

Kissy
Mobile(http://mobile.kissyui.com)是
Kissy
推出的移动版本框架,意在支付出得当活动浏览器和活动使用达到还得运用的框架,不过当下型内容还较少,控件和特效为比较少,也不备响应式的功能。

图 12. Kissy Mobile 效果示例

图片 19

Qwrap

Qwrap(http://www.qwrap.com/)是百度有什么团队出的 JavaScript
框架,现在吃收入 360,被广泛应用与 360 产品面临。Qwrap 综合
jQuery、Prototype、YUI 特点,对 JavaScript 进行了打包。但是,如果如将
Qwrap 算成一个前端开发框架或略牵强,因为除此之外 JavaScript
类库之外,Qwrap 基本乏善可陈,还处在发展阶段。

Tangram

Tangram(http://tangram.baidu.com)是百度推出的外一个
JavaScript 框架,被广泛应用于百过息息相关外来下的活,与 Qwrap 类似,Tangram
也只好算是一个 JavaScript 框架,对 JavaScript
做了众扩张,但是当前端开发框架或显得比较软。基于此,百度公司后续推出了有限独依据
Tangram 的花色,Magic 和 Baidu Template。Magic 项目基于 Tangram
对控件和特效都召开了扩大,增加了 10 个新的控件。Baidu Template
则再多是对准移动端支付的扩大,目前对此绝大多数主流移动设备和操作系统还有支撑。

问询了这些框架,我们从平台、基础技术、布局、CSS、控件、特效及作风设置等几乎单方面来对她进行一个骨干比较:

表 1.国内外主流前端开发框架对比
框架名称 主要
平台
基础技术 布局 CSS
版式
控件 特效 风格设置
桌面端 jQuery, LESS 丰富 丰富 丰富 丰富 手动配置
桌面端 jQuery 丰富 丰富 预置/可视化配置
移动端 jQuery 丰富 丰富 丰富 预置/可视化配置
桌面端 Ext JS, Sass 丰富 极丰富 极丰富 预置
移动端 HTML5 丰富 丰富 丰富
桌面端 Java, HTML5 丰富 丰富 丰富
桌面端 Dojo Nano 丰富 丰富 极丰富 极丰富 CSS 代码
Mobile 移动端 Dojo Nano 丰富 丰富 丰富 内置与移动端匹配
桌面端 Mootools Core 少量 少量
桌面端 Prototype 少量 丰富
桌面端 YUI 丰富 丰富 丰富  
移动端 jQuery/Zepto, Sass 丰富 丰富 丰富 丰富  
桌面端 Kissy Core 丰富
移动端 Kissy
桌面端 QWrap  
桌面端 Tangram  

由此我们可以看,对于桌面端,目前 Bootstrap 和 jQuery UI
已经得以满足大多数的出需要,也以业界得到了常见的采用,有着丰富的组件和壮大,以及相对简单之语法和操作。应针对咱的主导需求都够用了。如果您对前者界面的意义有比较大之求,希望可以动用像结构树这样比较复杂的控件,建议乃考虑
Dojo,抱了马上多年的大腿为无是白抱的,效果还是坏正确的。对于,局域网的运用,还足以设想
Sencha Ext JS
框架,效果更加激动,但是针对网络的渴求也再也强。如果这些还是未能够满足你内心之狂野,那只好建议乃运
Flex 或者 SilverLight
了。相反,如果你对纱快特别灵活,希望物色一个迷您并且职能是的框架,那
Mootools 会是若不利的选料。如果您特别怀旧,也堪行使
YUI,虽然曲线不足够骚,但是内容好丰富。如果您是一个 Ruby on Rails
的开发人员,建议你可以先看一下 Prototype
框架,毕竟是默认的框架。如果你对地方说及之框架还无乐意,那建议你感受一下国内的框架一段时间,然后重新回过头来看刚刚说到的框架,相信您一定会起平等栽豁然开朗的发。

对于移动端的采取,jQuery Mobile, Foundation 依然是轻量级选择,Dojo
Mobile 和 Sencha Touch 会为卿提供逾有力的效应。同时,您还得与
PhoneGap 和 Cordova 框架结合使用,利用 Web
的技术开发移动使用。不过这种混合式开发模式起时连无长,还以频频上扬遭受。

 

回页首

结束语

方只是目前涌现出底前端开发框架中的同一组成部分,相信还有复多出色的框架还于研发核心,到之我们本着“百花齐放”这无异于词起了再直观的感觉,也印证以静谧了连年随后,前端开发的办事更得到大家的珍视,也定会进一步旺。文中的提议只有象征作者个人的初浅意见,大家最终的选料还要结合实际的开需要。

相关文章