CoffeeScript: Getting Started and Never Looking Back

Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page

So what is so great about CoffeeScript?

Um… Everything.

Ok you may need more than that, and rightly so. Here’s a basic overview.

The bullet points:

  • Cleaner code
  • Less characters
  • Variable binding
  • Better looping
  • Avoids “Callback Hell”

If it doesn’t seem like much, look at it in a “Save me 10 minutes a day and it adds up” type of scenario. Then multiply that by every line of JS code you write in a day.

Cleaner Code: CoffeeScript is whitespace dependent. I love that this forces us to write prettier and more readable code. I’ve heard some developers complain about this aspect of CoffeeScript, but I’m not sure why. I can’t tell you how many hours I’ve spent fixing spacing and tabs in others’ HTML, CSS and SASS (Syntactically Awesome Style Sheets) because they completely ignore the hierarchy of nested elements.

Less Characters: CS removes all the unnecessary characters that plague JavaScript. Curly braces, parenthesis, commas and semi-colons are eliminated from your code base, leaving you with really only what is needed to get the job done.

Variable Binding: CS makes the this variable/object more manageable. In function callbacks and objects with nested methods the this often gets lost or over-written. With CoffeeScript’s @ operator, you will always know exactly what you’re getting.

Better Looping: This aspect of CoffeeScript took me a bit to really wrap my head around, but eventually I got what it was trying to do and it’s made coding these loops easier and faster. Instead of a for(i=0, i<…; i++) type loop, think of these more as a jQuery $.each() type syntax. We'll dive further into this in the next post.

Avoids "Callback Hell": Anyone who’s done coding in node.js knows exactly what I’m talking about. Setting up a node.js server is function nested in function nested in function nested- you get the picture. Because CoffeeScript is whitespace dependent and there aren’t any curly braces, everything just looks cleaner. This makes working with so many nested callbacks and functions easier to navigate.

Installing CoffeeScript & Dependencies

Before installing CoffeeScript, we must first install node.js and npm. So let's get started.

The easiest way to do this on osX is via Homebrew. Open up your terminal and run:

$ brew update
$ brew install node

Recently the Homebrew package for node.js started including npm. Once node.js and npm are installed installing CoffeeScript is as easy as:

$ npm install coffee

Setting Up Your CoffeeScript Project

I tend to organize my projects with a coffee/ directory within the javascripts/ directory

Screen Shot 2014-03-10 at 10.54.38 PM

In your terminal, cd into your project's directory where the javascripts/ directory is and run:

$ coffee -o javascripts -cw javascripts/coffee

I created a nice little .bash_profile alias that you might find helpful as well:

alias watch:c='coffee -o javascripts -cw javascripts/coffee'

This watches the javascript/coffee/ directory for changes to any file within and compiles down to JS in the javascript/ directory. If you're new to CoffeeScript and this sounds confusing or scary, understand that all that's going on here is that all that fancy CoffeeScript is being turned into plain old, recognizable JavaScript.

In the next post we'll start looking at the syntax differences and comparing the CoffeeScript to the JS it compiles to.

Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page