Oracle前端开发框架相比较

正文采用了 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 开发效用提高一个程度。依据 克莉丝 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 底布局及力量示例

Oracle 1

jQuery UI

jQuery UI(http://jqueryui.com/)是 jQuery
项目组中对桌面端的增加,包括了丰盛的控件和特效,与 jQuery
无缝兼容。同时,jQuery UI
中预置了多种风格供用户接纳,防止了千篇一律。即便你对预置的作风不称心,还足以经过
jQuery UI 的可视化界面,自助对 jQuery UI
的展现效果开展布局,非凡有益,够高端大气上档次。

祈求 2. jQuery UI 之意义示例

Oracle 2

jQuery Mobile

jQuery Mobile (http://jquerymobile.com)是
jQuery 项目针对运动端的增加,如今支撑 iOS, Android, Windows Phone, 布莱克Berry
等主流平台。具体匡助情形可以参见http://jquerymobile.com/gbs/。其它jQuery Mobile 在布局,控件和特效方面都万分慷慨。在风格方面,与 jQuery UI
类似,除了预置的作风效果外,还援助用户可视化配置的力量。

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

图 3. jQuery Mobile 的机能示例

Oracle 3

Oracle 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 的遵从示例

Oracle 5

Oracle 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 底效能示例

Oracle 7

Oracle 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 的职能示例

Oracle 9

Oracle 10

Dojo Mobile

Dojo Mobile(http://dojotoolkit.org/features/mobile)是 Dojo
推出的移动端框架,表现吗分外正面。在布局,控件,特效方面都产了好多功。并补助以及所用平台匹配的作风设置,如若你不爱尚可以引用不同
CSS 文件来实现不同功用。

除去可于走端的浏览器上动,Dojo Mobile 也支撑以及 PhoneGap
无缝连接,可以经过 Dojo Mobile 开发移动 App
应用。同时为享有对的响应性(在宽屏和窄屏上的来得力量不同)。

祈求 7. Dojo Mobile 在 IPhone 上之遵从示例

Oracle 11

Mootools

Mootools(http://mootools.net)能够说凡是时最好轻量级的前端框架,内核
js 压缩了事后只有 8k,完整版本减后呢不至
100k,远较其他框架而稍稍群。Mootools 有投机的面向对象设计的内核 Mootools
Core。伴随着极小之文件大小,框架的功能相比另外框架为只要辞世不掉,唯有以控件和特效及有少量协理。

祈求 8. Mootools 效果示例

Oracle 12

Oracle 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 底效能示例

Oracle 14

Foundation

Foundation(http://foundation.zurb.com/)是 ZURB
旗下的重大面向移动端的支出框架,然则呢保对桌面端的匹配,方今曾经更新至
Foundation4 版本。框架重要行使 jQuery 和 Zepto(语法酷似 jQuery,但于
jQuery 更轻量级)作为 JavaScript 基础,CSS 则基于
Sass、Compass,有着很好的扩展性,并兼有充足的布局,版式和形形色色的控件与特效,相当有益开发者使用。控件的响应式效果啊赞助用户识别不同浏览器效果。

ZURB
作为一个完的花色组,包括不少原型、设计、构建、分析等一律多重工具,为用户提供完整的服务。当然,有过多服务是若收费的。

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

图 10. Foundation 之风格示例

Oracle 15

Oracle 16
Oracle 17

Kissy

Kissy(http://docs.kissyui.com)是阿里集团自主开发往日端框架,近年来在Taobao网、一淘网等阿里系网站上落许Dolly用。Kissy
框架模仿 jQuery 编写了协调之内核 Kissy Core,用于对 DOM 的分析,Ajax
处理等。同时,有着充裕的控件,并促成了有动画效果及特效。同样,在 Kissy
的控件被为堪看 Bootstrap 等海外框架的黑影。此外,Kissy abc
项目工具得以扶持用户实现自动化构建,并发出诸多恢弘组件方便用户以。

应该说 Kissy
是眼下境内开之无比好的前端框架,在实际上利用被呢经过了查实,但与外国成熟框架相比仍然来早晚差别。

图 11. Kissy 的效能示例

Oracle 18

Kissy Mobile

Kissy
Mobile(http://mobile.kissyui.com)是
Kissy
推出的动版本框架,目的在于开出得于倒浏览器和移动使用达到还得以用的框架,可是当下色内容还比少,控件和特效为于少,也非持有响应式的力量。

图 12. Kissy Mobile 效果示例

Oracle 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
的技术开发移动接纳。然则这种混合式开发情势起时并无增长,还以相连升华碰到。

 

回页首

结束语

地点只是如今涌现起往日端开发框架中的如出一辙组成部分,相信还有复多优质之框架还在研发要旨,到这么些我们对“百花齐放”那同样乐章来了重直观的觉得,也印证在静谧了多年从此,前端开发的劳作更拿到大家之厚,也定会进一步发达。文中的提出只有象征作者个人的初浅意见,我们最后的挑三拣四还要结合实际的支出需要。

相关文章