Tag Archives: jquery

reviews

Three jQuery-based frameworks for a rich UI

6 Comments

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
code

Cross browser multi-columns with JQuery and CSS3

2 Comments

column-count was proposed in January 2001, candidate in December 2009. It’s supported in WebKit and Mozilla via extensions and Opera directly, but it’s not in IE9. Y U no support columns IE9? That’s OK, we can work around this with columnizer:

 
if ($.browser.msie && $.browser.version < 10) { // am I a hopeless romantic for assuming that IE10 will support it?
        $('.multicolumn').columnize({
            width: 600,
            columns: 3
        });
    }
 
 
/* Support for Webkit, Mozilla, Opera */
div#multicolumn, .multicolumn {
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;
        width:600px;
}
code

Rotating content with JQuery, JTemplates & AJAX

Leave a comment

The following JavaScript is used here to rotate the featured product every 30 seconds. I will leave the implementation of the JSON-emitting REST api for another post.

<!--mce:0-->
<!--mce:1-->    
 
<!--mce:2-->
<div class="outerbox"></div>
<textarea> 
&lt;div class="outerbox"&gt;
&lt;div class="box featured"&gt;
&lt;h2 &gt;
                        Featured&lt;/h2&gt;
&lt;div class="item"&gt;
&lt;div class="bord-se"&gt;
&lt;div class="bord-ne"&gt;
&lt;div class="bord-s"&gt;
                                                &lt;a href="/store/Product.aspx?ProductId={$T.ProductId}&amp;utm_source=Homepage&amp;utm_medium=FeaturedProd&amp;utm_term=Widget&amp;utm_campaign=Featured_Widget" mce_href="/store/Product.aspx?ProductId={$T.ProductId}&amp;utm_source=Homepage&amp;utm_medium=FeaturedProd&amp;utm_term=Widget&amp;utm_campaign=Featured_Widget" id="A1"&gt;
                                                        &lt;img class="FeaturedProduct" src="{$T.ThumbnailUrl}" mce_src="{$T.ThumbnailUrl}" alt="featured" style="border-width:0px;" mce_style="border-width: 0px;" /&gt;
                                                &lt;/a&gt;
                                        &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h4&gt;
                        &lt;a href="/store/Product.aspx?ProductId={$T.ProductId}&amp;utm_source=Homepage&amp;utm_medium=FeaturedProd&amp;utm_term=Widget&amp;utm_campaign=Featured_Widget" mce_href="/store/Product.aspx?ProductId={$T.ProductId}&amp;utm_source=Homepage&amp;utm_medium=FeaturedProd&amp;utm_term=Widget&amp;utm_campaign=Featured_Widget"&gt;{$T.Name}&lt;/a&gt;&lt;/h4&gt;
 
                        &lt;span&gt;Author: &lt;/span&gt;
                        &lt;a href="/store/search.aspx?m={$T.AuthorId}" mce_href="/store/search.aspx?m={$T.AuthorId}"&gt;{$T.Author}&lt;/a&gt; 
                        &lt;span class="Price"&gt;
                                ${$T.Price}&lt;/span&gt; 
 
            {$T.Summary}                                
 
                        &lt;a class="more" href="/store/New-Products-C52.aspx" mce_href="/store/New-Products-C52.aspx"&gt;view all…&lt;/a&gt;
 
&lt;/div&gt;
&lt;/div&gt;
 
</textarea>