The next 10,000 hours

I’ve been fiddling with Coffeescript, a nifty language for writing Javascript – well, really it’s more like a pre-compiler than a language; it compiles directly to readable javascript (including comments!) and generally one Coffeescript statement produces one javascript statement.

So why would you use it? Because it bypasses some of the horribleness of Javascript syntax, and implements a few handy patterns, like anonymous function creation, in much clearer code.

For example, the following Coffeescript:

square: (x) ->
alert 'squaring: ' + x
x * x

converts to the following javascript:

square: function square(x) {
  alert('squaring:' + x);
  return x * x;
}

There are many more examples at the Coffeescript home page.

I’m not 100% sold on this, as I’m still learning (proper) Javascript, and this amplifies some of my ignorance. For example, I really struggle with ‘this’ and functions/objects – and while Coffeescript automatically enforces some good Javascript behaviour, when I do something wrong it’s a bigger than usual struggle to work out why.
A longer example: I’ve been playing with Raphael (and JQuery) and decided to do some fiddling in Coffeescript:

app: {
  init: ->
    app.paper: Raphael('playspace',320,200)
    app.draw_circle()
    app.draw_square()

  # simple circle with event-based on-click event
  draw_circle: ->
    circle: app.paper.circle(50,40,30)
    circle.attr("fill","#f00")
    circle.attr("stroke","#fff")
    $(circle.node).click((e) -> app.kick(e))

  # square with object-based on-click event
  draw_square: ->
    square: app.paper.rect(150,40,50,30)
    square.attr("fill","#0f0")
    square.attr("stroke","#fff")
    $(square.node).click((e) -> app.punt(square,e))

  kick: (e) ->
    app.paper.text(e.pageX + 10, e.pageY + 10, "Raphaël\nkicks\nbutt!")

  punt: (obj,e) ->
    obj.translate(10,10)
}

# make it globally visible - not really needed, handy for debugging
if window?
  window.APP: app

$(app.init)

The javascript version is:

(function(){
  var app;
  app = {
    init: function init() {
      app.paper = Raphael('playspace', 320, 200);
      app.draw_circle();
      return app.draw_square();
    },
    // simple circle with event-based on-click event
    draw_circle: function draw_circle() {
      var circle;
      circle = app.paper.circle(50, 40, 30);
      circle.attr("fill", "#f00");
      circle.attr("stroke", "#fff");
      return $(circle.node).click(function(e) {
        return app.kick(e);
      });
    },
    // square with object-based on-click event
    draw_square: function draw_square() {
      var square;
      square = app.paper.rect(150, 40, 50, 30);
      square.attr("fill", "#0f0");
      square.attr("stroke", "#fff");
      return $(square.node).click(function(e) {
        return app.punt(square, e);
      });
    },
    kick: function kick(e) {
      return app.paper.text(e.pageX + 10, e.pageY + 10, "Raphaël\nkicks\nbutt!");
    },
    punt: function punt(obj, e) {
      return obj.translate(10, 10);
    }
  };
  // make it globally visible - not really needed, handy for debugging
  (typeof window !== "undefined" && window !== null) ? (window.APP = app) : null;
  $(app.init);
})();

Now, this works, it’s a lot more readable than the Javascript version, and it’s nifty how Coffeescript wrapped everything in an anonymous function so as to not pollute the global namespace (except where I did so deliberately).

But this was about my 8th try.  I had endless problems getting the ‘click’ handlers to hook into the ‘kick’ and ‘punt’ methods.  I tried (initially) using ‘this.kick’ but it failed as when the click handler is called, this is bound elsewhere. I tried storing ‘this’ in a variable, but had pain with the fact that somewhere in the mess of anonymous function wrappers, ‘this’ never seemed to mean the right thing.

In the end, I hit on storing the whole thing as an object ‘app’ – I was already going to make it part of ‘window.APP’ but didn’t want to prefix all calls with ‘APP’… but in the end, that’s kind-of what I did, only the global APP variable isn’t actually needed, just the local ‘app’ variable.

Anyway, I’m sure there is a better way to do this – but I haven’t found it, and this one works. Now I have to decide if I want to keep playing with Coffeescript, having worked all this out, or go back to ugly old Javascript, where at least there are hundreds of net resources to help me when I get stuck!

This entry was posted on Thursday, February 25th, 2010 at 1:03 pm and is filed under Uncategorized and tagged javascript coffeescript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.