转载

几个前端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 会很快成熟起来。

正文到此结束
Loading...