Write your JS in CoffeeScript

Do me a favor

Remind me to slow down

Why use CoffeeScript?

It's better

Don't just take my word for it

Rails 3.1 does it

37 Signals does it

GitHub does it

[blah blah blah]
Write new JS in CoffeeScript.
[blah blah blah]
- GitHub JavaScript Style Guide

Lots of you do it

What is  CoffeeScript?

CoffeeScript is just a language that compiles to JavaScript

Looks like
Ruby and Python's
awesome love child

It's JS with all the crap removed


It's a great tool

Let the tool do the work

Too Much To Cover

Installation Usage Language Reference Literals: Functions, Objects and Arrays Lexical Scoping and Variable Safety If, Else, Unless, and Conditional Assignment Splats... Loops and Comprehensions Array Slicing and Splicing Everything is an Expression Operators and Aliases Classes, Inheritance, and Super Destructuring Assignment Function Binding Embedded JavaScript Switch and Try/Catch Chained Comparisons String Interpolation, Block Strings, and Block Comments Block Regular Expressions Cake, and Cakefiles "text/coffeescript" Script Tags Books, Screencasts, Examples and Resources

Less syntax means
low cognitive load

function vs ->


  function add(a, b) { return a + b; }


  add = (a, b) -> a + b

{} vs indents


  function addIfDifferent(a, b) {
    if (a !== b) {
      return a + b;
    else {
      return null;


  addIfDifferent = (a, b) -> 
    if a != b
      a + b

No var needed


  function sayHi(name) {
    var greeting = "Hello, "
    return greeting + name + " !"


  sayHi = (name) ->
    greeting = "Hello, "
    greeting + name + " !"
    # Don't worry, we can do better than this (later)...

Boolean Sugar

  a is b         # a === b
  a isnt b       # a !== b
  a or b         # a || b
  a and b        # a && b
  not a          # ! a
  unless a       # if (!a)
  true, yes, on  # true
  false, no, off # false

CoffeeScript has your back

No global scope pollution

Output is wrapped in
a self-executing anonymous function


JS type coercion prevention


  '' == '0'           // false
  0 == ''             // true
  0 == '0'            // true

  false == 'false'    // false
  false == '0'        // true

  false == undefined  // false
  false == null       // false
  null == undefined   // true

  ' \t\r\n ' == 0     // true

Stuff You'll Love

List Comprehensions

    friends = ['Chelsea', 'Jack', 'Cameron']
    greet = (name) -> alert 'Hello ' + name
    greet name for name in friends
    # Will alert once for each friend

    c_friends = (name for name in friends \
                 when name.indexOf('C') is 0)
    # ['Chelsea', 'Cameron']

Multi-line Strings

  long_string = "Somtimes it's just nice to be able 
    to put newlines in strings in your source code.
    Thankfully, CoffeeScript makes this easy."

String Interpolation

  # Just like in ruby

  food = 'sushi'
  sentence = "Gabe's favorite food is #{food}" 
  # "Gabe's favorite food is sushi"


(Better than JS's switch)

  # Just like Ruby's case

  food_reaction = switch food
    when 'sushi' then 'my favorite!'
    when 'durian' 
      if trying_to_impress_girl
        "it's not so bad"
        "omg wtf"

? - The Existential Operator

(not a band name, yet)

Checking for variable existence


  if (variable) 
  // Returns false when variable has 
  // a value of 0,  '', or false


  var_is_set = my_var? 
  # True if my_var has 
  # a value (even false), else false

Also good for
null references
in method chaining

# Returns null if person.preferences is null

Post-fix conditionals

  eat_sushi() if hungry
  drink_whiskey() unless alone

OK. But...

It looks different.

  • Spend 20 minutes and read the excellent docs.
  • You'll adjust. Different is good.

I don't want a language
between me and my JS.

  • Use HAML?
  • Use SASS?
  • OK then. Use CoffeeScript.

Whitespace signifigance. Really?

  • Yes. Really.
  • Use folding, indent guides,
    or more spaces in your tabs.

How can I debug it?

  • Tests?
  • Put debugger right in your coffee
    and use the Webkit Inspector
  • Source Maps (coming really soon)
  • Use guard and guard-coffeescript gems
    for compile error growl notifications on saves

Browser Tools


Bonus Material

is written in

You can embed coffeescript with
<script type="text/coffeescript">

But please don't (for anything hefty)

the Future You
a Gift

Start Using CoffeeScript

Gabe Hollombe

I ♥ Ruby & JS/Coffee

I ♥ You

Thank You


Please keep in touch


Time for questions?