Skip to content
Jan 19 / Rupak Ganguly

Playing with CoffeeScript

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
After having used Haml and Sass and loving them, a friend introduced me to CoffeeScript. In short CoffeeScript is to Javascript as Haml is to Html and Sass is to CSS. Not so strictly speaking but lets roll with this for now. So here is my how-to article to share my thoughts and experience, while I played with it.
What is CoffeeScript and why do you care?
Instead of me, making something up, here is what the CoffeeScript site has to say:
“CoffeeScript is a little language that compiles into JavaScript. Underneath all of those embarrassing braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.
The golden rule of CoffeeScript is: “It’s just JavaScript”. The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.”
Read more or try in your browser at the CoffeeScript website.
Ok, now that we are clear on that, if you are still interested, let’s play with it some, shall we…
First we will see how to get it installed on our machine, and then try out some code.
Installation on Mac OSx
1. Install node.js via homebrew:
1
brew install node.js
After node.js is installed you will get some instructions. Here is the one you need:
a. Add a NODE_PATH env. variable to your profile:
1
export NODE_PATH="/usr/local/lib/node_modules"
2. Install npm package manager via homebrew: (NOTE: No available formula for npm in homebrew)
1
curl http://npmjs.org/install.sh | sh
3. Install CoffeeScript via npm: (NOTE: the homebrew formula for coffee-script is retired)
1
npm install -g coffee-script
Once installed, you should have access to the “coffee” command, which can execute scripts, compile .coffee files into .js, and provide an interactive REPL. Let’s see if it works.
Type “coffee” into your terminal window:
1
$ coffee
If you see the following coffee prompt, you are golden:
1
coffee>
Now, lets just try something very simple:
1
coffee> square = (x) -> x * x
You should get the following:
1
[Function]
This tells us that we successfully created a new function named “square”. Let’s try it out:
1
coffee> square(2)
You should get the following:
1
4
Cool, right! Thought so.
Compiling into Javascript
Now, you must be dying to see the Javascript that is generated by compiling CoffeeScript. So head on to the terminal window, create a folder for testing our .coffee scripts. Create a text file test.coffee and write the following code that we saw earlier:
test.coffee
1
square = (x) -> x * x
Then, in your terminal window, in the folder where you have the test.coffee file, type the following command to compile the CoffeeScript code into Javascript code:
1
$ coffee -c test.coffee
In the above command “-c” is the option to complie into Javascript. You will now find a test.js file created in the same folder. The contents of the file is Javascript and looks as shown below:
test.js
1
2
3
4
5
6
(function() {
var square;
square = function(x) {
return x * x;
};
}).call(this);
Now, when you start using CoffeeScript in projects which have multiple .coffee files and you want them to be compiled instantly into .js files, CoffeeScript can watch a folder that contains .coffee files and turn them into .js files. You can use the following command to do that:
1
$ coffee -c -o js --watch source
In the above command, “-c” is compile, “-o js” is the output folder “js” where the .js files are written, “–watch source” is to watch the “source” folder for changes in .coffee files. There are several command line options that are provided by CoffeeScript and you can review them at the CoffeeScript website.
Rubymine plugin with syntax coloring
After all said and done, coding in a language is no fun without syntax checking and coloring. So comes CoffeeBrew, a Rubymine plugin, that gives us:
  • Syntax highlighting with a color settings preference pane
  • Commenting and uncommenting of line and block comments
  • Highlighting of matching braces
You can easily search for and install the plugin right from Rubymine’s plugin area.
And then with some customizations to match the Railscasts color-scheme that I use, we have:
All set and ready to go
So armed with all the knowledge to work your CoffeeScript into Javascript files, I am all set and ready to go. With all the attention Javascript is getting these days, this is an invaluable tool.

2 Comments

leave a comment
  1. Alex / Jan 20 2011

    Thanks for this writeup, I found out about CoffeeBrew from it, and it’s nicer than the coffeescript-idea plugin.

    By the way, you can set up the “coffee –watch” command as an external tool in RubyMine which lets you see the output of the compiler right in the IDE.

  2. Rupak Ganguly / Jan 20 2011

    Hi Alex,
    Thanks for your comment. Yeah, I found CoffeeBrew to be nicer than coffeescript-idea plugin as well. And, I am aware of the tip you mentioned but I did not want to get too much into Rubymine in the article. Thanks for mentioning it though.

Leave a Comment