In a programmer’s mind

Javascript development can lead you to create some pretty huge security holes but can also lead you to create a beautiful web 2.0 masterpiece. If you have been developing all your Javascript code by yourself, it is time to embrace Javascript frameworks.

Javascript framworks encapsulate the common stuff you do not want to do by yourself all the time. It is often things that should have been there in the first place to make your life easier. It is as plain and simple as that. It makes your life as a developer a hell lot easier.

There are many frameworks available out there. I will try to focus on the ones that are code oriented and avoid those that are more user interface oriented. It might be for another post. The one I use the most is called Prototype developed by the same guys that brought Ruby on Rails. I believe you can see where their code style influence is coming from. You might also have heard about JQuery, MooTools, MochiKit or Dojo Toolkit. They are all similar frameworks in terms of productivity you can gain from not using a framwork to using one of those ones. I suggest you try them all to figure out their strengths and weaknesses before you settle on using one. I will focus on Prototype for the following examples.

So what can you do with Prototype that simplify your life? Many things, but first let me say that most features available with this framework are cross-browsers compatible from IE6+ on Windows to Firefox 1.5+ on Fedora Core including Safari 2.0+ on Mac and Opera 9.25+. There is no need to create those dreaded separate code paths for different browsers. The framework already does it when necessary. Let’s get started with the features!

Object oriented programming concepts

It is possible to do object oriented programming with Javascript on its own, but it is much easier and fun using Prototype. Here is a classical example:

var Mammal = Class.create({
initialize: function(personalName) {
this.personalName= personalName;
},
feed: function() {
return this.personalName + ' has been fed';
}
});
var Lion = Class.create(Mammal, {
// redefine the feed method
feed: function($super) {
return $super() + '. The lion is still hungry!';
}
});
var myLion = new Lion("Leo");
alert(myLion.feed());

DOM selection, manipulation and iterators

Can you imagine how much of pain it would be to hide every elements that has the class name adminSection using plain old Javascript? With the prototype framework you can do that using this line:

$$(".adminSection").invoke("hide");

The $$ function is a DOM elements selector that use the same syntax as CSS. The invoke method is an optimized invoking method that call a function on every elements in an enumerable structure. The hide method simply hide an element by setting its display property to none. It cannot get easier than that.

Ajax

The holy grail of many two dot zero applications, Ajax is being used everywhere these days. If you have been using XMLHttpRequest directly, you really need to have a look at how simple it is to do Ajax request with Prototype. Have a look at this example:

new Ajax.Request("myAjaxCityProvider.dhtml", {
onSuccess: function(transport) {
$("cityDisplay").update(transport.responseText);
},
onFailure: function(transport) {
alert("We were not able to update the city display. Please try again in a few minutes.");
}
});

The onSuccess function is called when the Ajax call returned correctly with the transport argument giving the information of what was returned. The onFailure function is called when there is a problem with the Ajax call. The $ function is a utility function and a shortcut for document.getElementById. The update method change the content of an element. The whole thing updates an element content using what was returned from an Ajax call.

Even if you are doing simple form validations, you can get more productive using a Javascript framework today. Have a look.