UI框架选型

  最近公司的一个新项目要进行UI框架的选型，我把选型的思路和过程跟大家分享一下。

 

选型标准

  在选型之前，我们先要定一下选型的标准，就像人生一样，想清楚“自己要的是什么”是最重要的。

  选型的标准分为几部分：

 

 

•  符合业务

业务是根本，和大部分的技术一样，框架没有好坏之分，只有适合与不适合。

        我们项目是一个通讯类的监控项目，用户群是移动、电信等运营商的运维人员，系统的特点是：

业务逻辑复杂、表格较多、图表较多、用户权限体系复杂。。。。。

 

        此外，虽然是运维类项目，客户（包括我公司领导）对界面美观的要求越来越高。

•  用户群（社区）

选用的UI框架应该有活跃的用户群（社区）。

• 开发效率

使用框架应该能提高开发效率。

• 团队素质

 

选用的框架应该符合项目团队的技术情况。

 

 

选型过程

  对比现有的WEB UI框架，可以简单把他们分为两类：企业型、互联网型。

 

  企业型

 

  企业型指的是类似EXTjs的框架，这类型框架的特点是功能强大、UI风格比较接近非web的系统。

 

  ExtJs：www.sencha.com/products/extjs 

  jQuery easyui：www.jeasyui.com

  dwz：code.google.com/p/dwz/

  dhtmlx：dhtmlx.com

 

  互联网型

  互联网型指的是类似Twitter Bootstrap这样的适合用于互联网开发的框架，这类型框架的特点是UI美观、自由度较大。

 

  Compass + Blueprint：

Blueprint和Compass，是一个分工很明确的组合，前者负责样式渲染，后者则是基础框架和模块，可以说，在bootstrap诞生之前，是web开发首选的黄金组合。

 

 

  Twitter Bootstrap：

Bootstrap是Twitter开源的一个CSS框架。关于Bootstrap的优点、缺点，我后面再用另外的文章描述。

 

  Alice(CSS) +  Kissy(UI)：

        Alice和Kissy是阿里系开源的css框架和ui框架，用户基本都在国内。值得一提的是他们写的文档，可以认真参考一下，应用在一些内部的框架中。

 

选型结果

 

1.  考虑到用户对界面美观要求较高，因此放弃掉企业型的框架
2. 考虑到国内国外的用户群，与文档的完备程度，放弃掉Compass + Blueprint
3. 考虑到Alice和Kissy的用户群还不够大，因此，最终我们选用的是Bootstrap。在ui方面可以会使用jquery ui bootstrap。

 

评论

15 楼 hellokitty2020 2013-07-20  

推荐国内360UI界面框架，兼容性等很不错

14 楼 hellokitty2020 2013-07-20  

推荐国内360UI界面框架，兼容性等很不错

13 楼 white_crucifix 2012-11-16  

cavenfeng 写道

yellen 写道

楼主有没有考虑使用js的mvc类框架？

不一样的领域哦，js的mvc框架是应用在Single-Page的应用当中的

js的mvc框架不就是extjs咯。

12 楼 spiniper 2012-11-16  

cavenfeng 写道

spiniper 写道

其实对于你这套系统，我更倾向于extjs，当然那样会花费更多的开发成本，对人员素质要求也会更高。

使用extJs的确很方便，成本不一定会提高，对人员素质的要求主要是js和对ExtJs本身。
用ExtJs做了几年的系统，大家看到那种UI看到想吐了，因此想换一套UI。

关于这个成本问题，也许你那边大家都很熟悉extjs的开发，但是我以前呆过的公司对ext都不太熟悉，使用起来成本就搞了，而且我发现现在的新程序员大多都不太懂ext，而且学习能力也比较差。

11 楼 cavenfeng 2012-11-16  

spiniper 写道

其实对于你这套系统，我更倾向于extjs，当然那样会花费更多的开发成本，对人员素质要求也会更高。

使用extJs的确很方便，成本不一定会提高，对人员素质的要求主要是js和对ExtJs本身。
用ExtJs做了几年的系统，大家看到那种UI看到想吐了，因此想换一套UI。

10 楼 spiniper 2012-11-16  

其实对于你这套系统，我更倾向于extjs，当然那样会花费更多的开发成本，对人员素质要求也会更高。

9 楼 cavenfeng 2012-11-16  

cavenfeng 写道

yellen 写道

楼主有没有考虑使用js的mvc类框架？

不一样的领域哦，js的mvc框架是应用在Single-Page的应用当中的

可以看看我这篇文章，js的mvc框架应用在什么领域
http://cavenfeng.iteye.com/blog/1551516

8 楼 cavenfeng 2012-11-16  

yellen 写道

楼主有没有考虑使用js的mvc类框架？

不一样的领域哦，js的mvc框架是应用在Single-Page的应用当中的

7 楼 cavenfeng 2012-11-16  

richie144 写道

为何没有dojo

dojo也属于我归纳的企业开发型，更适合企业应用的需要：离线存储、DataGrid、2D、3D图形、Chart、Comet

6 楼 tianshaojie 2012-11-16  

好文章

5 楼 yellen 2012-11-16  

楼主有没有考虑使用js的mvc类框架？

4 楼 Navee 2012-11-16  

同时期待楼主对bootstrap的详细介绍

3 楼 Navee 2012-11-16  

white_crucifix 写道

用bootstrap唯一要注意的就是用户的浏览器如果是IE核的千万要IE9以上

对，bootstrap已经不兼容ie9以下的版本了，但是现在ie9一下的用户太多了

2 楼 white_crucifix 2012-11-16  

用bootstrap唯一要注意的就是用户的浏览器如果是IE核的千万要IE9以上

1 楼 richie144 2012-11-16  

为何没有dojo