Home > Uncategorized > Implementing UJS

Implementing UJS

Unobtrusive Javascript, or UJS for short, is an approach to javascript development that is gaining momentum now that Rails3 and other frameworks are baking in support for it.  I first learned about UJS from watching the Rails3 screencasts shortly after they came out, which was months ago now.  The main concept is nothing new to software development, it’s the old adage of Separation of Concerns.   Javascript has a very different responsibility than your HTML markup. Javascript is used to apply additional behavior on top of existing markup but that doesn’t mean it has to be done in the same line(s) of code or even in the same file.

The DRY (Don’t Repeat Yourself) principle is another benefit of the UJS approach.  If there are common javascript behaviors that are applied throughout your site, shouldn’t they be done in one place rather than scattered about?

In our web application at work we have javascript “widgets” that get applied on almost every page.  The two big ones are a Calendar (DateSelector) and Tabbed interface.

Almost every report in our system has at least a Start and End Date field with a calendar widget used to select dates.

Before UJS

page.html
<form>
<input type=”text” name=”start_date” />
<input type=”text” name=”end_date” />
</form>

...
<script>
window.addEvent('domready', function() {
var start = new DateSelector($('start_date'));
var end = new DateSelector($('end_date'));
});
</script>

This got very repetitive throughout our site and I cringe at how boiler plate it became.  I hated wasting my time and all our other developers time by forcing them to write (copy/paste) these couple of lines of javascript.

After learning about UJS we have re-thought our approach to markup and how javascript is used.

After UJS

page.html
<form>
<input type=”text” class=”date” name=”start_date”/>
<input type=”text” class=”date” name=”end_date” />
</form>

A new global domready event that applies for all input elements with class=”date”:

application.js (using mootools)
<script>
window.addEvent('domready', function() {
$$('input[class=date]').each(function(element) {
var date = new DateSelector(element);
});
</script>

We’ve expanded our UJS support to auto-initialize tabbed interfaces based off pure markup, create async Request objects for form submissions, and validate form input.  This has drastically reduced the amount of javascript our developers write and absolves them of a responsibility that should rightly be separate and unobtrusive to the work they’re trying to accomplish.

By using simple markup attributes (class, id, type) and the support of HTML5 data attributes, you can create both descriptive markup and advanced javascript behaviors to go with it.   A big thanks to Rails3 for making this so easy and moving this approach forward.  If you’re not using Rails, like us, just take these concepts and apply them yourself.

Advertisements
Categories: Uncategorized Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: