Three jQuery-based frameworks for a rich UI

Posted by & filed under reviews.

After spending several months refactoring a large ASP.Net MVC application for performance, I became intimately aware of certain fundamental limitations of the server-side UI approach and began looking into pure client-side UI frameworks as an alternative. Having decided on jQuery as the foundation, I’ve narrowed down the possibilities to three candidates: jQuery UI, Kendo UI and Wijmo.  Here are some of my conclusions:

 Why choose pure-client side?

My current development approach is MVC 3 “enriched” with the Telerik Extensions for ASP.Net MVC.   ASP.Net MVC HtmlHelpers are much simpler than the traditional .Net drag-and-drop Web Forms approach in that they simply return strings, without the baggage of ViewState management or a complex page event lifecycle.    This provides certain advantages: lightweight rendering, granular state management and simple AJAX – along with auto-generated HTML and IntelliSense.  But any developer-friendly server-side technology also has costs: server-processing time affects performance and flexibility, and server-side controls prevent you from having a true rich-client design which fully separates the user interface and business logic.

Presenting a new alternative to server-side MVC controls, are several client-side UI frameworks.  Much of the rich client movement comes from the open-source world with frameworks like SproutCore/Amber.js, YUI and Cappuccino.  But now that Microsoft is embracing HTML5, the two heavyweight .Net tool vendors are getting on-board as well.

There are three competing HTML5 UI/Ajax UI frameworks I want to mention.  They are pure-JavaScript libraries built on top of jQuery.

jQuery UI

jQuery UI provides a bunch of client-side UI widgets, “interactions” and effects.   It is semi-sponsored by industry bigwigs which include such as Microsoft and Adobe.

Pros: From the same team which brought you jQuery.  There are many plug-ins for missing functionality.  Theming is very nice. (Btw, Juice UI is server-side jQueryUI for ASP.Net WebForms – perhaps an intermediate solution?)

Cons: Key components are not included with the framework, such as Grid, Template, DataSource/DataView, Validation.

Cost: Free for commercial and non-commercial use: MIT and GPL licenses

 Telerik Kendo UI:

Kendo UI is a fork of Telerik ASP.Net MVC framework.  The first version of Kendo UI has just been released, but the client-framework is based on the two-year old Telerik MVC framework.

Pros: Complete feature set, with 16 widgets (vs. 8 for jQuery UI), including everything missing from jQuery UI; Visualization; Mobile versions of widgets;

Cons: Just released late 2011; is not jQuery UI;

Cost: GPLv3 and Commercial licenses; closed-source code requires purchasing the commercial license which starts at $399/1yr

ComponentOne Wijmo:

ComponentOne is Telerik’s arch competitor.  Their client-side offering is an “extension” of jQuery UI, and so relies on both jQuery and jQuery UI.  It is more mature (version 2.0) and they are sponsoring jQuery UI development.

Pros: mature; sponsor of jQuery UI development; works well (shares theming) with jQuery UI;

Cons: Free version comes with a subset of controls; replaces existing jQuery UI widgets

Cost: “Open” version with 18 widgets is free (MIT/ GPL v2).  “Complete” version with Grids, Charts, Forms, etc is $299-499

I’m still getting started with this approach, so I’m not sure which framework is best.  They are all good alternatives to a server-side framework (whether Web Forms or MVC).  They all have a learning curve and are probably less efficient from a developer perspective – especially one used to writing server-side controls.  On the other hand, they enable a different development methodology (isolation of UI and the service stack) which may be more efficient overall and better for performance and scalability.

My tentative suggestions:

  •  jQuery UI for open-source, small projects, low budgets, simple or non-form heavy UI, and minimal support or learning-curve availability
  • Kendo UI to leverage Telerik MVC expertise and maintain compatibility with MVC
  • Wijmo when a rich UI is needed as well as compatibility with JQuery UI or the open-source world

6 Responses to “Three jQuery-based frameworks for a rich UI”

  1. Todd

    Hello David. Thanks for taking a look at Kendo UI!

    Just to correct, a Kendo UI commercial license only costs $399, and that includes Premium Support + access to commercial updates for 1yr.

    And while Kendo UI builds on the engineering best practices from both the Telerik Extensions for MVC and ASP.NET AJAX, it is not a direct fork. There are even more improvements in Kendo UI that make it lightning fast for JavaScript developers. We will be shipping server wrappers for Kendo UI (starting with ASP.NET MVC) later this year.

    It’s also probably worth mentioning that Kendo UI extends beyond Web and offers Kendo UI DataViz (HTML5 charting/gauges) and Kendo UI Mobile, too.

    Hope that helps!
    -Todd

    Reply
    • Dave

      I’m in same situation with my team. We were narrowed down to jqwidgets or kendo (others pushing for jqwidgets.) After building out a few test apps to get a realistic look, there’s no question that I prefer Kendo over jqwidgets. I hope to change convince my team to change course and go with kendo. I just checked out Wijmo recently – looks really good, but haven’t worked with it yet. Cost isn’t an issue but, of course,, wasting time with the wrong product just to hit a roadblock way into development is.

      Reply
  2. Chris Bannon

    David, great article. It’s good to see you came to the same conclusion we did about server-side UI in MVC. Wijmo was actually created because we didn’t think making MVC extensions for complex UI controls made sense. Our philosophy in MVC has been to just enhance clean markup. We did write some MVC Scaffolding that automatically generates markup and wijmo scripts in Views that you might want to look at too. Thanks for posting the article! I think it sums up the client-side UI pattern and tooling options pretty well.

    Reply

Leave a Reply