转载

几个前端UI框架的的比较

首先是在问答里面看到了一个问题：

CSS框架 ui 有哪些啊（ http://segmentfault.com/q/1010000002547926 ）

刚开始接触HTML刚开始接触JS我也不懂就看了下- 正好我也在考虑怎么用HTML来搭我的APP UI。作为初学者，我发现Amaze UI是中文的，觉得对初学者看起来会更简单 - 尤其对HTML CSS等一窍不通，很快有人推荐了Ratchet，看了下感觉用来做手机APP确实很简单的样子.. 开始纠结了.. 跟公司大神讨教了下什么是UI框架以及一些主流的框架区别优劣势，以及我们一些项目上使用的内容后，大神总结出了以下内容，受益匪浅 - 作为答案有点长，以博文形式发出来供大家一起探讨下：

------- 以下分割线 --------

IoTgo 用的是 Bootstrap（ http://getbootstrap.com ），原先是 Twitter 内部的一个 CSS 框架，后来开源放到 Github 上，成了 Github 上最热门的项目。Bootstrap 在 3.0 版本之前，都是以桌面优先，在 3.0 版本后，采用移动优先，即很好的支持移动平台，然后才考虑更好的支持桌面。所以 Bootstrap 对手机的支持也很好。

Foundation（foundation.zurb.com）是设计公司 zurb.com 推出的开源 CSS 框架，在 CSS 框架领域是目前唯一能跟 Bootstrap 的竞争的项目。Foundation 的可定制性更好一些（因为是设计公司的产品，要应对各种客户需求），但入手难度也高一些。对于很多 Web 项目开发者而言，他们需要的就是一套简单快捷的 UI，对其美观性、可定制性要求不是太高，所以目前相对来讲 Foundation 没有 Bootstrap 热门。

答案中推荐的Ratchet如何：

Ratchet 之前也是 Twitter 内部的一个 CSS 框架，后来也是开源到 Github 上，目前是作为 Bootstrap 的子项目存在（ http://blog.getbootstrap.com/2014/04/02/ratchet-2-0-2-released/ ），开发 Ratchet 和 Bootstrap 的基本就是同一拨人。Ratchet 一开始就以移动为先，预先提供了很多移动平台的常见 UI 工具，比如底部 Tab 标签栏、顶部标题及后退按钮、滑动的侧边栏等等——Bootstrap 也有，只是很多以插件形式存在，又或者需要自己做一些修改，不像 Ratchet 默认就有。

如果是做一个小项目，而且只以手机 App 的形式存在，可以考虑先用 Ratchet，如果同时兼容桌面，Bootstrap 更好一些。而且 Bootstrap 更新的速度更快，马上 4.0 版本就要出来了，有很多针对移动平台优化的特性，而 Ratchet 已经快一年没更新了。

另外，目前的移动 CSS 框架（或者更合适的说，UI 框架），还有 Facebook 的 React（ http://facebook.github.io/react/ ），Google 的 Angular Material（ https://material.angularjs.org ），Telerik 的 Kendo UI(www.telerik.com/kendo-ui)，还有预先捆绑了 Cordova 的 Ionic Framework（ionicframework.com）等等。大家的评价大致是：

React：性能很好，因为采用了 Virtual DOM，但没有默认支持 2 way data binding（双向数据绑定），程序员需要自己做更多的工作来通过 UI 获取用户的输入
Angular Material：前景非常好，只是目前处于 pre-release 阶段（代码兼容性和稳定性都不是很好）。Angular目前几乎已经是前台 MVC 框架的事实标准（大约 70% 以上的占有率，其他的还有 Ember、Meteor、Backbone等等），Angular Material 基于 Google Material Design 开发，默认支持 Angular，因而在 UI的美观型和开发效率上都比较好。但性能是个问题，解决性能问题，需要程序员自己对代码做优化
Kendo UI：非常完备的 UI 框架，但是是商业版（前段时间将部分核心模块开源了）。开发商业 Web 或移动产品的企业更倾向Kendo UI 一些，因为可以得到很好的技术支持（当然要花钱）。Angular 热门知会，Telerik 也升级了 Kendo UI，使其能够较好的跟 Angular 交互——Kendo UI 是 UI，Angular 是前台代码逻辑
Ionic Framework：目前非常热门，因为他在 Angular 的基础上开发了支持移动平台的 UI Widget（UI组件）。Ionic Framework 搭好了整套移动开发环境（指的是 App 开发，不是网站移动版）、UI 套件、JS框架（Angular），因而在 2014 年获得巨大的社区反响。被誉为最有前景的移动开发框架（不仅仅是 UI 了）。

我个人对 Angular 比较热衷，所以都会选择能够很好跟 Angular 交互的 CSS/UI 框架——一般来说，如果是纯 CSS 框架，那么跟任一一个 MVC 框架（比如 Angular、Ember）都可以很好的配合；如果是 UI 框架，可能会有一些冲突。

之前我们的智能开关手机 App 是基于 Ionic Framework 来开发的，后来切换到 Angular Material。一个是 Ionic Framework 虽然入手简单，但出现 Bug 我搞不清楚该怎么修改（需要花时间研究 Ionic Framework 的内部工作机制），二是我认为 Material Design 会成为 UI 设计的主流思想，Angular Material 会很快成熟起来。

正文到此结束