前端开发框架选型清单

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读者对于前端开发框架的选型有何心得，欢迎发表本身的见解。