前端技术框架选型_常用的web开发框架

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读者对于前端开发框架的选型有何心得，欢迎发表自己的看法。