实战对比评测:哪一款用户界面控件最适合你?

    2017-10-10 11:33  浏览次数:159

在一次使用ASP.NET MVC进行开发的Web项目中,我们需要用户界面控件来帮助实现界面的大部分功能。由于项目比较复杂,我们最终确定对 Kendo UIDevExpress 这两款国际知名的用户界面组件进行评估。下面笔者跟大家分享一下评估控件的经验,希望对其他选购控件的朋友提供一个参考和借鉴。

当时我们评估这两款控件主要考察:控件的功能、易用性、与当前项目的集成时间和自动代码完成的时间。

控件功能


首先我们比较了Kendo UI和DevExpress当前所提供的控件,并大致评估了控件的功能。根据项目的需求,我们主要测试了文本和日期两个控件。

Kendo UI

Kendo UI是Telerik旗下的控件,在Web和移动开发领域都有非常棒的表现,在开发者当中也是相当的受欢迎。Kendo UI提供了两个文本字段控件:AutocompleteNumericTextBox。后面个控件提供了各种选项,比如价格、百分比、测量和质量。这些控件非常惊艳,功能很强大,不过唯一的不足就是它的Mask文本字段,比如输入邮件和地址必须要用固定的格式,不过这个问题用一个jQuery插件就可以轻松解决。

Kendo UI,Telerik,Autocomplete,DateTimePicker

Kendo UI的文本字段有三个选项:Calendar, DatePickerDateTimePicker。Calendar非常平滑,可以自定义模板,比如可以为日历添加图标。

DatePicker 和 DateTimePicker使用比较简单,比如要提取其他DatePicker上的动态数据,只需要一行代码就可以实现。同样,这两个控件也是完全可自定义的,不仅可以提取单个的日期,还可以提取月份,DateTimePicker可以提取单个小时。

>>Kendo UI Web下载

DevExpress

DevExpress当然不用我多介绍了,界面控件中的老大,界面效果好,控件丰富,可以实现各种意想不到的效果,用了之后都会有相见恨晚的感觉。它的文本控件支持多种格式,可随意添加各种数字、Email、地址和IP等,它还可以添加正则表达式验证和定义消息。

>>DXperience 13.1.8下载

网格


Kendo UI

Kendo UI的网格非常棒!功能很丰富,支持主从结构、行模板、行内编辑、随意翻阅和同步加载等。这里不能列出所有的功能,对Kendo UI有兴趣的朋友不妨体验一下它的Grid Demo

Kendo UI Web,Grid Demo

DevExpress

之后我们又测试了DevExpress Grid,不愧是老牌控件,它的网格控件当然也不负众望。不过经过测试体验之后发现它的功能比Kendo UI Grid稍微要少一点,模板指定比较麻烦,主从结构无法获取,而且网格的样式也比Kendo UI要简单。

DevExpress,GridView,Kendo UI Grid

考虑到我们的项目需要大量的网格数据操作,最终我们选择了Kendo UI。当然这里不是说功能越丰富的就越好,当然要根据自己的项目需求和价格预算来综合考量,毕竟两款控件都是非常值得信赖的。

易用性


Kendo UI

Kendo UI的安装比DevExpress要稍显复杂,因为Helpers必须手动注册,但之后就变得比较简单了,比如:

@Html.Kendo().NumericTextBox().Name("MyNumericText")

Helpers是类型化的,比如NumericTextBoxFor。如果使用带有文本字段的模型,字段只需要用'Name'就可以完成绑定。
在上面提到的例子中,字段设置属性MyNumericText的值,然后就会自动发生转换,即使是文本字段也不例外。

日期字段也是一样的。创建一个显示月份和年份的日期字段,如下面的代码:

@Html.Kendo().DatePicker().Name("MyTextBox").Depth(CalendarView.Year).Start(CalendarView.Year).Format("MMMM yyyy")

DevExpress

DevExpress的安装可以说是既简单又复杂。它在安装的时候会自动安装Visual Studio序列模板用于项目所需的各种配置,如果自己去手动添加是非常麻烦的。在任何情况下,我们都可以随意的复制模板,但有时候也会出现误差。

在DevExpress下创建控件的难度比在Kendo UI中要大,因为它的控件都是通用型的,所以我们不得不为每个控件都配置一个helper,比如:

@Html.DevExpress().SpinEdit(settings => {
settings.Name = "MyPercent";
settings.Properties.MinValue = 0;
settings.Properties.MaxValue = 100;
settings.Properties.NumberFormat = SpinEditNumberFormat.Percent;
settings.Properties.SpinButtons.ShowIncrementButtons = false;
}).GetHtml()

这段代码创建了一个百分比字段。这段代码显得有点臃肿,而且它没有类型化助手,同样的问题也出现在Grid控件中。

集成时间


Kendo UI

Kendo UI可以快速集成到当前的项目中,因为它既不需要大量编译也不需要大量配置。改变当前的字段也不需要花太多时间。Kendo的网格非常容易上手,但是我们的项目过于复杂,所有集成也花了相当长的时间。

DevExpress

DevExpress的集成速度稍微比Kendo要慢一些,因为它既要配置我们的站点又要配置每个字段。

自动代码完成


Kendo UI

这基本上是Kendo最好用的功能之一。它生成的HTML和JavaScript代码非常干净,它不使用表格而用Divs代替,这样界面会更加流畅。额外的JS在视图面板是不可见的,因为它全部被放到了代码库中。

DevExpress

个人感觉DevExpress的自动代码完成功能不是很好用,因为它会生成大量临时的JS代码,导致调试比较困难。HTML的生成也不是很友好。另外它用表格代替Divs,导致界面不流畅并且无法重用样式。

总结


  Kendo UI DevExpress
优点
  • 技术支持渠道多,有论坛、发布会、培训、文档和博客等等
  • 即使助手被类型化,不用绑定到模型属性,可用MVC自动绑定到非类型化助手的'Name'方法
  • 控件生成的界面样式可以重用
  • 提供JavaScript API,可以使用 jQuery传统方式
  • 价格较DevExpress要便宜,可购买单个版本的授权
  • 提供各种版本的界面控件:ASP.NET,Winforms,WPF,Silverlight,Windows8等等,非常全面,还有非常强大的VS插件CodeRush,大大提升编码效率
  • 界面高端大气,适用范围广
  • 技术支持渠道和帮助文档、Demo等非常丰富,和Kendo UI差不多,反馈也比较及时
  • 代码集成完整全面,自己的代码编写量较小,可节省不少时间
缺点
  • 没有only-text文本框
  • 数字和日期只支持固定格式
  • 有些函数需要手动添加
  • 生成的HTML代码不是很友好,比如用tables而不是divs
  • 某些函数需要手动添加
  • 许多设置行需要添加到每个控件,导致出现大量冗余代码

 

综合以上评估,Kendo UI和DevExpress这两款界面控件在技术支持、控件功能和界面效果方面都不相上下。由于我们比较看重样式的重用,所以最终选择了Kendo UI。

慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课


近期公开课

官方微博 官方微博
官方微信 官方微信

联系我们

购买:sales@evgetedu.com

意见与建议: service@evgetedu.com

Tel:400-700-1020(免费)

023-66090381(重庆总部)

地址:重庆市高新区陈家坪帝豪名都31楼