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。