JavaScript widget libraries / UI components

Let's assume you've picked a backend (or, better yet, a full-stack JavaScript framework like Meteor.js), and now you want to build the front-end of a web app.

If you want to build a "classic" modern web app, there are plenty of CSS libraries out there (Bootstrap, Foundation, Semantic UI; Font Awesome for vector icons etc.), plus a ton of widgets: d3, HighCharts, Timeline.js and so on.

But what if you want to build a business/enterprise app? You could cobble together DataTables.net for grids, d3 (or something easier) for charts, and other libraries for forms, calendars, layouts and so on. Or, you could use an integrated suite of UI widgets (aka components - though don't confuse them with Web Components as implemented by Polymer).

I'll expand below on my comparison of alternatives to ExtJS that I posted on StackOverflow. None of these libraries integrate with Meteor - but see my Meteor integration of Sortable (a reorderable list widget) to learn about ways to integrate them.

ExtJS

By far, the most popular choice. Tens of thousands of questions on StackOverflow. Developed by Sencha, with a lot of resources behind it. Heavy, long learning curve. Touch support comes as a separate library, Sensa Touch.

My experience parsing the JSDuck docs to generate the TypeScript definition located many (as in hundreds) of places where the API is either inconsistent (e.g. subclass and superclass methods/properties have incompatible types or arguments), illogical (e.g. required arguments appear after optional arguments in method signatures), or where the docs are just incorrect for the class/method/property being documented. These would be very hard to find by simply eyeballing the docs, but as soon as it gets run through a real compiler, the problems come pouring out.

-- a user ranting in the Kendo vs. Sencha thread

Cons

Kendo UI

Kendo is well-supported, actively developed, very popular, has well-designed widgets, but no trees or tables in the open-source version. It does have 40+ open-source widgets, plus commercial "Professional" widgets (trees, charts, grids etc.). Responsive & mobile support. Works with Bootstrap and AngularJS. Modern, with Material Design themes. GitHub/Telerik.

Telerik is a trend-setter. They've released well-known tools (e.g. Fiddler, and write quality blog posts. Check out for example Planning A Front-end JavaScript Application - 16 detailed steps needed to develop a maintainable complex enterprise application using a JavaScript stack.

If you need the professional components in an open-source project, make sure to check with your Telerik contact that it's OK to include the minified source of the component in your open source repo, having in mind that folks could clone it at any time. This is a legal matter only, of course, as anyone who can access an app using Kendo UI Professional can get the minified source; such is the nature of JavaScript.

dxhtmlx

JavaScript library for building rich Web and Mobile apps. Looks most like ExtJS - check the demos. Has been developed since 2005 but still looks modern. All components except TreeGrid are available under GPLv2. Claims to be used by many Fortune 500 companies.

Minimal presence on GitHub and StackOverflow but very active forum.

Webix

Webix is a little mind-boggling. It was launched in July 2013, yet the demo is jaw-dropping, integrates with pretty much everything, has all the widgets you'd want, is super straightforward to use, amazingly composable, yet... nobody has heard of it.

Check out the Webix Wikipedia page (I wrote most of it). Then see my question, Why is Webix so little known, on Quora and on the Webix forums. Apparently they have a small but brilliant team of Belorussian engineers with no good marketers or product advocates.

The GPL3 edition has 55 UI widgets, and the commercial edition introduces three more (Pivot, Scheduler, Kanban). Treetable demo, bar and line charts, basic windows.

Minimal GitHub presence, with very slow issue resolution. I've reported trivial things like typos, weeks ago (early Dec 2014), and they're still not fixed.

DojoToolkit

Dojo and their powerful Dijit set of widgets is a candidate with a long history. Themes look desktop-oriented and dated. I wasn't able to use any other theme than "Claro". The learning curve is medium to long.

I should look more into Dojo but the look&feel are less than encouraging.

YUI

Looks old-school and was built pre-2010. Its gallery of components is deprecated.

Recommendation

ExtJS is the most, well, extensive.

KendoUI seems to be the best supported and highest quality, yet still mostly open source. If you can live with the widgets in Kendo UI Core, this is my recommended UI widget library.

If you need more advanced widgets, pick DHTMLX, until Webix cleans up their act.

That is, unless you need a TreeGrid. In that case, pick Webix.

It's really unfortunate that I can't recommend Webix more, even though I've spent the most time evaluating it. As soon as they fix up their act, I'd love to move them up in the list of recommendations.

My tags:
 
Popular tags: