Standards might not be exciting, but man, they’re important. Without them everyone does their own thing, reinvents the wheel, and unnecessarily injects new frameworks into the system. Lately the importance of standards has become painfully obvious. In my current role, our app has been around since the days of ASP.NET 1.0, so it’s over a decade old in various spots. In that time it’s picked up over a half dozen data access frameworks! And the story with the user interface frameworks is even more fragmented:

• jQueryUI
• KendoUI
• Silverlight
• Bootstrap
• ASP.NET Native Web Controls
• ASP.NET AJAX Control Toolkit
• Telerik ASP.NET AJAX server-side controls

Wow. And this list doesn’t even include the dozens of jQuery plugins that have been pulled in over the last few years like Fancybox, tablesorter, toastr, etc. So the question is, how do you pick one framework? And wait, is that even a practical goal these days? To do so, you obviously have to understand what each offers so you’re clear what you’re giving up.

Since our application is behind a login and requires a lot of rich interactions, we’re moving toward primarily client-side rendering via Knockout with Durandal. So to simplify this list, one important decision involves selecting a client-side UI framework. I pitted four leading client-side UI frameworks against one another for consideration: jQueryUI, KendoUI, Bootstrap 3, and Foundation 5. And yes, Foundation isn’t in the list above but is worth a look. Perhaps it checks all the boxes and can become the one new standard?

XKCD – https://xkcd.com/927/

Okay, fat chance. These all slice the market a little differently. You likely find it odd that I’m pitting jQueryUI and KendoUI against responsive CSS frameworks, but the fact is, as you can see below these four cover a lot of similar ground. I summarized their features in a table I compiled below. Unique attributes are highlighted in yellow.

 

jQueryUI

KendoUI

Bootstrap

Foundation

 

1.10.4

2013.4.1324

3.1.1

5

Accordian / Panelbar

x

x

x

x

Autocomplete

x

x

x

 

Alerts

 

x

x

x

Badges

 

 

x

 

Breadcrumbs

 

 

x

x

Button

x

x

x

x

ButtonDropdown

 

 

x

x

Calendar

 

x

 

 

Color Animation

x

 

 

 

Colorpicker

 

x

 

 

ComboBox

 

x

 

 

DatePicker

x

x

 

 

DateTimePicker

 

x

 

 

Draggable

x

x

 

 

DropDownList

 

x

 

 

Editor

 

x

 

 

Grid (paginated table)

 

x

 

 

Icons

x

x

x

 

Joyride (guided tour)

 

 

 

x

Labels

 

 

x

 

Lightbox

 

 

 

x

ListView

 

x

 

 

Menu

x

x

x

x

MultiSelect

 

x

 

 

NumericTextbox

x

x

 

 

Pagination

 

x

x

x

Pills

 

 

x

 

Position

x

 

 

 

ProgressBar

x

x

x

x

Scheduler

 

x

 

 

Slider

x

x

 

 

Splitter

 

x

 

 

Rotator

 

 

 

x

Resizable

x

 

 

 

Selectable

x

 

 

 

Sortable

x

x

 

 

Tabs

x

x

x

x

TimePicker

 

x

 

 

Tooltip

x

x

x

x

TreeView

 

x

 

 

Upload

 

x

 

 

Validation

 

x

 

x

Window

x

x

x

x

 

 

 

 

 

 

jQueryUI

KendoUI

Bootstrap

Foundation

Other Features

 

 

 

 

Themeable

x

x

x

 

Templatable

x

x

Knockout Compatable

KO/jqueryUI

KO-Kendo

KO-bootstrap

 

HTML Input styling

 

x

x

x

Grid System

 

 

x

x

JS Size (minified)

223

276

28

75

CSS Size (in K)

31

81

97

106

Total size (in K)

254

357

125

181

Browser support

IE7+

IE7+

IE8+

IE9+

Sass integration

 

 

x

x

Support

 

Telerik

 

Zurb

Visual Studio Default

 

 

x

 

Requires jQuery

x

x

 

 

Fluid grid resizing

 

 

 

x

Dev team

8 core

Telerik

Open. 500+

Zurb. 15

Summary

Each framework has it’s merits. jQueryUI is easy to use and well documented, though it’s progress lately has been slower than the others. Bootstrap is lightweight and very popular. It has a rich plugin ecosystem that fills in many features that aren’t listed above. Kendo offers many powerful and unique features with a high level of polish. And it certainly should since it’s not free! Foundation is the only option with a fluid resizing grid, and it arguably offers the most compelling mobile first story. Which would you pick if you could only choose one? How does your team avoid ending up with a laundry list of UI frameworks?

Comments

Burke — 2014-02-28

Hi Cory!

Wow – great article. Thank you for putting together this comprehensive feature list. I love it.

A few clarifications on Kendo UI…

Icons – do have those http://demos.telerik.com/kendo-ui/web/styling/icons.html

Alerts – we call em notifications, but I think it’s generally the same thing. http://demos.telerik.com/kendo-ui/Beta/web/notification/templates.html

Brandon — 2014-02-28

Nice comparison. Many of these frameworks are easy to mix and match. I prefer the jQuery + Bootstrap combo personally as most of the ‘unique’ features of Foundation 5 and Kendo UI are available via free community plugins that you can just drop on top of Bootstrap. Plus, jQuery and Bootstrap both being free and coming with a new MVC 5 project as default is a huge plus.

Dan — 2014-05-04

Small typo: comaptable should be “compatible”. Also, Bootstrap does have autocomplete – https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me

Frank — 2014-08-01

Good Article, but I have a doubt, why isn’t mention in the web site application to library like Extjs, http://dev.sencha.com/extjs/5.0.0/examples/index.html

It have many thing and more (mvc, mvvm), like touch screen support, data package, layout ect, I would like to know which is the reason to don’t mention extjs, maybe is because it is no adequate for web site, I don’t know, but I would like to know because it could be clarify me when to use extjs.

Regards
Frank

marco li mandri — 2014-08-19

Nice article.
An important infromation is version of jquery.
JQuery UI 1.11.1 > jquery 1.6+
Kendo 2014 Q2 > jquery 1.9.1

Foundation and bootstrap are dependent on jquery also
Bootstrap 3.2.0 > jquery 1.9.0+
Foundation 5 > jquery 2.1.1

Frank — 2014-08-19

Thanks for you answer about extjs, but yet I have a doubt, I know that extjs is heavier, but its a framework with OOP approach, so in in big application for instances 8 mb of javascript, hundreds of windows, I mean enterprise level, to use library like extjs is good because using jquery + others plug ins is hard to maintanance the code, I mean your developer team need to be well disciplined code, and to create SPA application when you add jquery + kendoui+ Others plug ins the final applications become in heavy too, so the doubt if I have to create an application where i need a good grid, calendar, schedule, tree, toolbar, chart, responsive design, mvc and mmvm which approach is appropriate build the application with many differents plug ins or to use a framework with almost all widget appropiate to build an application.

Again I am trying to get advice about when to use the appropriate library

Regards frank

andy — 2015-10-10

How do you think about SAPUI5 or OPENUI5 ? How about AngularJS?