Ojay: the OTHER media’s JavaScript library
Written 20.08.08 by: James Coglan
Here at the OTHER media, a significant amount of our research and development time is invested in user interface and design: the public-facing part of a website where a web visitor spends their time. JavaScript is one component of that user interface technology, being the programming language that allows us to create dynamic and interactive websites (when you see a drop-down menu or a button change colour in a rollover state that’s made possible by JavaScript).
The background to Ojay
The problem with JavaScript is that it is supported differently by the various web browsers (Microsoft Internet Explorer, Firefox, Opera etc running on PCs, Macs and Linux). Thus JavaScript libraries (collections of commonly used programming functions) exist to help developers overcome web browser differences and focus on their sites, rather than on browser quirks. Over the past two years, we’ve used a number of JavaScript libraries, trying to find the one that supports our work best. However, although these libraries are useful and mostly robust, they all had weak points that left us wanting more: either lacking features or being hard to program with.
Our main priority was to find a really robust and feature-packed library that would last us a long time, offering a stable platform to work with. Based on this criteria we decided to use the Yahoo! User Interface (YUI) library as our main JavaScript platform. YUI is packed with features and is commercially supported, with frequent new releases.
Despite its power and reliability, YUI is one of the harder libraries to work with on a day-to-day basis; taking a lot of code to do anything. This results in a longer program writing period and more difficult maintenance because of the size and complexity of the code. Larger, more complex codebases also tend to lead to more bugs, which is another reason why we wanted to find a better way to write our JavaScript code. Essentially, we wanted YUI’s features and robustness with much simpler implementation, allowing us to develop sites faster and maintain them more effectively. To fix these problems, we decided to develop Ojay, our own JavaScript library
Ojay an API for YUI
Ojay introduces an alternate ‘application programming interface’ (API) for YUI, allowing developers to build the same features with less code in less time. As a simple example, consider a situation where we want to show an England cricketer’s profile as a result of clicking on his name in a scrollable list, as we have developed on the new England & Wales Cricket Board (ECB) website. With YUI, you would implement this as follows:
YAHOO.util.Event.on('header', 'click', function(e) {
YAHOO.util.Event.preventDefault(e);
YAHOO.util.Connection.asyncRequest(
'GET', '/?q=search', {
success: function(response) {
YAHOO.util.Dom.get('sell').innerHTML =
response.responseText;
}
});
});
In contrast, this is how you would write the code using Ojay:
$('#header').on('click', $.stopDefault)
._($.HTTP).GET('/', )
.insertInto('#sell');
This is a simple example, but the differences become apparent when functionality gets more complex with animations, AJAX calls and other events. Ojay allows us to express these actions with less complex code than other libraries, meaning that we can be more ambitious in our interface design, without worrying too much about the problems of building it.
The benefits of open-source Ojay
As well as making our developers more productive, Ojay is helping other developers around the world, as we’ve released the library under an open-source license. We use several pieces of open-source software in-house (YUI itself is an open-source project) and realise the importance of supporting the development community we are a part of, hence making Ojay open-source.
Releasing Ojay on an open-source license allows many more people to use the software; criticising it and making their own improvements. This collaborative approach allows us to channel feedback back into our own software to make it more robust, useful and well-tested. This open-source ethos is something we intend to continue, with the next release of our content management system, OTHERobjects, being completely open-source.
See Ojay in action
If you would like to see what we are currently doing with Ojay, the best place to look is our new site for the ECB. The ECB site features slick photo galleries; an Ajax-powered live scoreboard and various other user interface refinements, which make extensive use of Ojay’s interface packages.
For the technically curious, Ojay is fully documented and available to download at ojay.othermedia.org The source code is hosted in a public repository at ojay.googlecode.com, allowing anyone to browse, download and make changes to the code.