How do I CoffeeScript?

Tagged InAllJavaScriptWeb

A Saturday morning getting aquainted with coffee

CoffeeScript  is a new and improved way of writing JavaScript. It is probably overkill for the average website, but for web apps or JavaScript heavy sites it is worth the effort to learn and use.  It just makes everything clearer to read and less typing in general, allowing you to focus on functionality over the syntax.  Gone are brackets, defining vars, and a host of other native javascript annoyances.  


In our example

We make a function that says something like "hello world" with "hello" random and "world" being an argument of the function (defaulting to "world").

This CoffeeScript

say = (name = 'world')->                                     # Define default 
  words = ["Hello", "Good Morning", "Good Bye"]              # Available words
  word = words[Math.floor(Math.random() * words.length)]     # Get a random word
  alert "#{word} #{name}"                                    # Do the alert

say "world";

Gets turned into this JavaScript

var say;

say = function(name) {
  var word, words;
  if (name == null) {
    name = 'world';
  words = ["Hello", "Good Morning", "Good Bye"];
  word = words[Math.floor(Math.random() * words.length)];
  return alert(word + " " + name);


Compiling and Installing

If you want to use CofeeScript you need a compiler. This converts the CoffeeScript into JavaScript, if you know how sass works, you should get the gist. The way I set it up is to compile on save, to do this I use nodejsgrunt and grunt-coffee. There are many guides out on the internets if you need help with your environment setup or CoffeeScript Install.


How hard is it to learn?

I have been programming for a while but generally focused on a couple of languages (PHP and JavaScript). People often say, "If you know how to program in one language, it is easy enough to pick up another" and I have found this relatively true. Dabbling with different languages, you often just need to get the structure right and work out how to do "Language X" thing using "Language Y".  With CoffeeScript it was even more so as you have two excellent tools available to assist with this.  One for Converting CoffeeScript to JavaScript and one for going from JavaScript to CoffeeScript. Very handy!

I also watched this Code School tutorial (from memory I got a month free trial). It was pretty helpful with explaining concepts, a video series walks you through the hows and the whys, then immediately following it up with a quiz. You test your learnings, even requiring a success to proceed to the next step.  A really good way to get the hang of something actually.

After just a few hours I was very comfortable CoffeeScript. In fact, I not only just wanted to use it, I really wanted to use in my next project. 


Build something with CoffeeScript

I personally find the best way to learn code is hands-on, giving you lots of opportunities to see where it breaks and how to solve a pile of given problems.  Building a web app is a great way to do that, hey, it might even be a success!

At the very least, you will be happy you had a sip of coffee. I was, and I think I am getting a bit addicted.

Next Article