CoffeeScript: an awesome alternative to JavaScript
2010-09-07

I’m working on a project with a lot of JavaScript, and after a while I started getting lost in the sea of parentheses, curly braces, semicolons and anonymous functions which seem unavoidable in any non-trivial script. Even using jQuery and Underscore.js didn’t help matters much, my scripts were becoming hard to read.

By a lucky coincidence, I stumbled on a post about CoffeeScript around this time. CoffeeScript is a language with a much nicer syntax than JavaScript and some very handy features like array comprehensions, so I decided to give it a go.

Short summary of the results

Even though CoffeeScript isn’t quite mature yet, and I encountered a glitch or two along the way, I converted the JavaScript in my project to it and hope to never go back.

Longer version

CoffeeScript is about 30% shorter in terms of lines than the JavaScript it produces. Not only that, the lines themselves are a lot shorter and clearer, and thus everything becomes a lot easier to read and understand. Perhaps handwritten JavaScript would be a bit shorter, but I’m not sure about that.

Overall, it’s so nice that it even made me change my opinion about significant whitespace which I never liked before.

Compilation

For the sake of simplicity, I just run up this script in a shell:

coffee -wc -o <output dir> <CoffeeScript dir>

It compiles the files in the CoffeeScript directory as soon as they are saved, and outputs errors, if any. Most of the time the errors are very easy to track down and fix.

For Rails apps, another option is to use the bistro_car gem to serve CoffeeScript. For Rails 3, there is also Barista.

I also chose to use JavaScript in my views, first because there should be as little JavaScript in the views as possible, and second, to reduce the number of moving parts. However, there are things like a HAML CoffeeScript filter available.

Debugging

The JavaScript output of CoffeeScript is readable and preserves the function names, so it can be debugged in Firebug.

Deployment

I opted for simply including the JavaScript output in the deployment. This way there aren’t any extra steps required other than adding the output files to git.

Testing

Since you’re really testing the JavaScript output, any JavaScript testing approach is valid. I’m using QUnit at the moment.

Other considerations

Naturally, my IDE doesn’t have any support for CoffeeScript beyond syntax highlighting. It would be nice to have built-in navigation, auto-complete and syntax checking, but so far my CoffeeScripts are simple enough that I can do just fine without these features.