Archive

Archive for October, 2011

Implementing UJS

October 15, 2011 Leave a comment

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:

Jabber Bot

October 9, 2011 Leave a comment

I’ve been inspired many times by reading through developer blogs from various companies: Atlassian, GitHub, Google, Etsy, etc.  I love to hear from other developers, how they work and how their company works.  I have borrowed many of these ideas and incorporated them into our workflow at Sentry.

I recently came across this blog post by Zach Holman from GitHub:
http://zachholman.com/posts/why-github-hacks-on-side-projects/

I’m no n00b to jabber bots.  Sentry has been using them for years, but mainly for alerting and error reporting.  I love being jabbered, with a full stack trace and supporting data, any time a problem occurs in our system.  It makes fixing things 10x easier.

I’ve also been using the jabber bot that Jenkins (fka Hudson) provides for several years and have always liked the idea of it.

I finally decided to make a bot to do our bidding at work.  We decided to call her GLaDOS, which many of you will recognize from the famous Portal game.

GLaDOS can now deploy to remote systems (via capistrano recipes), merge/commit changes to our various svn repositories, jabber other users, run caching scripts, and hopefully much more in the near future.

Categories: Uncategorized Tags: ,