Introduction to CoffeeScript

Marcin Szczepanski, webqem

CFCamp 2013

G'Tag!

Agenda

  • What is CoffeeScript?
  • CoffeeScript syntax
  • Using CoffeeScript

What is CoffeeScript?

“A better way of writing JavaScript”

Alt.JS

Like TypeScript

Not like ClojureScript, Roy, etc

It's a transpiler!

So what is it?

  • It's like a mix of Ruby, Python and Javascript
  • No curly braces
  • No semi-colons
  • (Mostly) optional parentheses
  • Syntactically significant whitespace

Why not just use JavaScript?

  • It's just more fun to write CoffeeScript!
  • It can be easier to read
  • No technical reason

So what are the drawbacks?

  • More difficult to debug (Source Maps help)
  • Requires a compile step (Tools make this less painful)
  • Potential clashes with ES6 Harmony functionality
  • It's not a substitute for knowing JavaScript!

Should I use it?

So what does it look likeā€½

I'll get to that...

Common pattern:


                        $(function () {
    $(".link").click(function () {
        console.log("You clicked a link: " + this.href);
    });
});

In CoffeeScript

$(function () {
    $(".link").click(function () {
        console.log("You clicked a link: " + this.href);
    });
});

would be written as..

$ ->
    $(".link").click ->
        console.log "You clicked a link: #{@href}"

Function declaration

CoffeeScript output

iffy: Immediately-Invoked Function Expression (IIFE)

CoffeeScript Constructs

Variable, Object and Array Definitions

Variables

Variables: Warning!

Arrays

Objects

Conditionals

if

if

if: assignment

unless

console.log "x is NOT 2" if x != 2

unless

unless

NOT good practice!

Aliases

Aliases

Loops and Comprehensions

Array Comprehensions

result = (expression for object in array)
result = (expression for object in array when condition)

Array Comprehensions

Array Comprehensions: Filter

Object Comprehensions

result = (expression for key of object)
result = (expression for own key, value of object)

Object Comprehensions

Comprehensions: Complex Expressions

Comprehensions: Complex Expressions

Ranges

Ranges

Ranges

Ranges: Splicing

Ranges: Splice assignment

Classes

Classes: Inheritance

Miscellany

Syntax stuff that didn't fit in the other categories!

this

this: Fat Arrow

Splats

Destructuring Assignment

Destructuring Assignment and Splats

Using CoffeeScript

Installing CoffeeScript

npm install -g coffee-script

Running CoffeeScript

coffee # REPL
coffee file.coffee # run script
coffee -c file.coffee # compile
coffee -wc file.coffee # watch & compile
coffee -cm file.coffee # sourcemap
coffee -wmc *.coffee # ALL THE THINGS!

coffee-script.js


<script type="text/coffeescript">window.alert "Hello World!"</script>
var compiled = CoffeeScript.compile(source);

Using CoffeeScript with ColdFusion

  • Pre-compile: coffee, GruntJS
  • CFStatic (Demo)

Summary

  • CoffeeScript makes writing JavaScript fun!
  • Useful syntactic sugar

But..

  • It adds complexity to your dev process
  • Potential clashes with future JS functionality
  • Might be solving a problem you don't have

The End