MooTools and OO Javascript development

I’ve started work on a new project at my job — a fairly complex AJAX application for the education sector. For this project, I’ve been allowed to essentially choose my own direction, and I’ve chosen to implement the clientside Javascript using the MooTools framework. I’ll say it right here: I’m absolutely loving it.

What I’m really enjoying about MooTools is the object-orientedness it brings to development. Although syntactically it’s a little bit weird at first, the ability to create, extend, and implement classes makes my development progress much more quickly, and in a more efficient way. Add to that the plethora of utilities (like the .each prototype for arrays) and shorthand functions (like $ to replace document.getElementById), and all of a sudden Javascript development becomes a bit more, well, flexible.

I’m not saying that you can’t accomplish cool things in Javascript outside of MooTools (or other frameworks, for that matter); my point is that I believe you can accomplish cool things in Javascript more quickly using a good framework, which should really come as no surprise. Perhaps the reason I’m so enjoying this type of development, to the point of blogging about it, is that up till now, I’ve been stuck working in a non-frameworked, very non-OO Javascript development paradigm.

I mentioned the curious syntax that accompanies MooTools.  To create a new class, for example, you would probably write something like this:

var myClass = new Class({
  Implements: Options,
  options: {
    optionA: 'monkey',
    optionB: 'pony'
  },
  initializer: function(options) {
    this.setOptions(options);
    this.doSomeStuff();
  },
  doSomeStuff: function() {
    alert(this.options.optionA + ' eats ' + this.options.optionsB);
  }
});

And then you would initialise it like this:

var myInstance = new myClass({
  optionA: 'Big Pony'
});

Although it looks a bit weird, it’s actually not too bad. There are really only two problems I have with it:

  1. Remembering to put commas in all the right spots.
  2. Geany, my preferred IDE (cf. Geany IDE: Tango dark colour scheme) can’t pick up classes and members properly (actually, at all) in this style.

Other than that, though, I’m really enjoying it.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.