CoffeeScript

On my last project, we decided to try out CoffeeScript. I was pleasantly surprised at how easy it was to get started with it and how nice it was to use, instead of JavaScript.

I’m a fan of object-oriented JavaScript code, but there are many different ways to structure the JavaScript (using the prototype, or constructing an object each time with private methods, to name a couple). I’ve seen several medium-to-large JavaScript codebases that use a range of techniques with no consistent pattern. CoffeeScript solves this problem by giving me a standard way to create new classes (which IMO is much easier to read and understand than JavaScript methods defined on the prototype). It’s performant (since the methods are defined on the prototype) and tries to produce easily-readable, JSLint-able code. (I had my first look at the JavaScript produced by ClojureScript last night, and it’s definitely much harder to navigate than the code produced by CoffeeScript).

Here are some tips to get started:

  1. The back-end was .NET and we were working in Visual Studio, so we used the free Web Workbench plugin to generate javascript files from our coffee files. It updates the files automatically at every save, which was really handy. Errors appear in the output window for Visual Studio.
  2. If you’re using the Node Package Manager, you can install CoffeeScript with that:
    npm install -g coffee-script
    You can then use the coffee command to compile coffeescript files:
    coffee -c myfile.coffee
    This also works with wildcards:
    coffee -c src/*.coffee

I was pretty amazed how easy it was to integrate CoffeeScript with any other JavaScript frameworks, including JQuery and Jasmine. Jasmine tests in CoffeeScript look like this:

What this means is that if you want to start using CoffeeScript, you can – you don’t even need to rewrite any of the existing JavaScript if you don’t want to.

In general, CoffeeScript reads much more like English than JavaScript – === is replaced by is, !== becomes isnt, you can use unless instead of if (!) and it also has Ruby-style string interpolation, just to name a few nice things.

We did run in to a couple of things that tripped us up, so here are some things to watch out for.

Classes are not global

Chances are, you’ll be creating classes across a number of files. If you just create your classes using class MyClass, you won’t be able to create one in another file by using new MyClass since CoffeeScript puts all the code inside a single file in a single closure (which is a Good Thing).

You can solve this by creating classes called new window.MyClass. However, the better practice is to use namespaces. We added a line to the top of all of our files to ensure the parent namespace was defined:


window.MyNamespace or= {}

Binding to this

You can access properties of the object with the @ symbol. Inside the javascript code, you will have a reference to this.propertyName.
However, for methods that are to be used as the targets of events, you will need to bind to the original value of this. CoffeeScript makes this easy, you just use => to define the function instead of ->.

Example of when you don’t need to bind to the original value of this:

Example of binding to an event target, when you do need to use the original value of this to access properties:

Is it worth a try?

I would definitely say yes! In particular, for larger JavaScript projects, if you don’t have an established consistent way of writing JavaScript, or if you’re writing object-oriented JavaScript code, it will probably simplify a lot of the code base and remove the danger of accidental bugs like creating global variables.

If you’re more in favour of functional-style JavaScript, or if you’re a JavaScript guru and just luuuurrrrve those curly braces, then you probably won’t get as much from CoffeeScript. Maybe you could try ClojureScript instead 😉