User Interface Framework Showdown: Bootstrap, Foundation, KendoUI, and jQueryUI

Posted byCory House 11 Comments on User Interface Framework Showdown: Bootstrap, Foundation, KendoUI, and jQueryUI

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:

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/
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?

11 replies on “User Interface Framework Showdown: Bootstrap, Foundation, KendoUI, and jQueryUI”

    1. Thanks for the reply Burke! I’ve updated the table to reflect KendoUI alerts. I’ve also updated the icons row since both jQueryUI and KendoUI offer a limited set of icons. Foundation 5 also offers an icon set, but it’s not part of the core so I’ve left it off the table.

      And by the way, I’m very impressed with KendoUI. We’ve been really happy with the results in our apps!

  2. 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.

  4. 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

  5. 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

  6. 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

Comments are closed.