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?

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?