Three jQuery-based frameworks for a rich UI

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

Four tips for more effective web design projects

I want to share some strategies for maximizing the productivity and effectiveness of  web design projects.  I’ve used them when the project has a large scope but minimal budget for a professional design team, such as non-profit organizations.

1: Visualize your users with analytics, personas, and user stories

The most important consideration in web design is to meet the needs of your users. There are two aspects to this:

First, collect statistical data on the demographics and usage patterns of existing users. Use web analytics, (GA), in-page analytics (GA events, crazyegg) to understand exactly how users use the site, what content is popular, and how that relates to revenue goals.  There is no need to rely on hunches and guesses when the relevant information is easily available.

Second: visualize the kind of customers you have and want to have with personas and user stories. Understand their goals and visualize the best way to meet them.

2: Steal ideas from the best

Web design consists mostly of weaving together design patterns from other projects. Coming up with entirely new design paradigms is very rare, difficult and risky. With that in mind, how can we choose the best design patters for a projects? By systematically borrowing from other successful designs.

One of the nice things about web development is that it is much easier to copy successful designs than in other fields. So why not pick the very best websites on the web? There are many websites which have spent millions on market research and high-end design firms. I systematically research successful designs and borrow the best elements from each. Many people make the mistake of only looking at their competition for inspiration.  But looking just like the competition won’t inspire users and limits you to a very narrow sample.

Here are three ways to find sources for inspiration:

  • Look for winners of web design awards
  • Frequent web design blogs & magazines
  • The easiest way: go straight for the websites with the biggest design budgets.

For #3, I sometimes use Wikipedia as a resource to find proxies for design budgets and just go down the list. For example, I use the list of the wealthiest charitable foundations or the largest market caps.  I go straight down the list and note the designs I like.
For example, #5 – the Ford Foundation has a very effective design.  The useful information we can gather goes far beyond visual elements.  By researching their site, press releases and job ads, I was quickly able to identify their technology platform, content management system, the person in charge of their information technology (technical people at non-profits are often willing to share expertise) and some of the contractors they hired to work on it.  The cross-section of people visiting the Ford Foundation and your site is likely to be very small, so you can borrow more liberally than you could from a competitor.

3: Develop a design language

A “design language” is a set of visual concepts which we can use as building blocks for a web design. A design language helps us share ideas visually and then create consistent look and feel for the site, even if multiple people or multiple iterations are involved. A coherent design pattern is very important for a site. I suggest something like a Google Docs document with screenshots of elements from other sites and mockups. Eventually we can weed it down to unique elements representing key building blocks: header, menu, tabular data, form, product list, etc.

A design language is also important for controlling costs, as it is cheaper to pay a designer to create a reusable set of elements than to pay them to create each page from scratch.

4: Aim for the web technologies of the future

The lifetime of the average web design is about three years, though many last much longer. Three years is a long time in web design – paradigms come and go very quickly, as does the need to respond to competitors. That’s why it’s important to find the right balance between targeting emerging technologies while controlling risk. For example, most people don’t have smartphones with full web browsers, but they are likely to in a year or two. It thus makes more sense to invest in full-featured mobile sites and not the last-generation WAP version. At the same time, we don’t know if the Apple, Android, or Windows Phone platform will be most popular in the future, so it’s best to build mobile web versions than native apps in today’s hottest platform.