Damn Fine CoffeeScript

Some Kind of Holy
Python

Ruby

JavaScrip t

Raw
var render = function (width, height, draw, filePath)
{
var canvas = new Canvas(width, height),
ctx = canvas.getContext('2d');
draw.call(ctx);
var out = fs.createWriteStream(filePath),
stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
out.write(chunk);
});
stream.on('end', function() {
console.log("Created: " + filePath);
});
};

Brewed

render = (width, height, draw, filePath) ->
canvas = new Canvas(width, height)
draw.call canvas.getContext '2d'
out = fs.createWriteStream filePath
stream = canvas.createPNGStream()
stream.on 'data', (chunk) ->
out.write chunk
stream.on 'end', ->
console.log "Created: #{filePath}"

Basically

● function is () ->
● local variables

● indentation

● omittable parentheses

True To JavaScript

The golden rule of CoffeeScript is: "It's just
JavaScript"

Less Syntactic Noise

stream.on('end', function() {
console.log("Created: " +
filePath);
});

stream.on 'end', ->
console.log "Created: #{filePath}"

My perspective

Node

A platform: JS machine + CommonJS stdlib

Browser

Just JS (generated)

Convert & Eval...

<script src="/extras/coffee-script.js"></script>
<script type="text/coffeescript">
# coffee time
</script>

Node

$ npm install coffee-script

101

# Assignment:
number = 42
opposite = true

Conditions

if happy and knowsIt
clapsHands()
chaChaCha()
else
showIt()

date = if friday then sue else jill

options or= defaults

number = -42 if opposite

Functions

square = (x) -> x * x

cube = (x) -> square(x) * x

fill = (container, liquid="coffee") ->
"Filling the #{container} with #{liquid}..."

noop = ->

In JQuery

$('span').each ->
it = $(this)
if it.is('.style-1, .style-20') or
not it.attr('class')
it.replaceWith(it.html())

Data

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x

modes = {ready: yes, balance: off}

bitlist = [
1, 0, 1
0, 0, 1
1, 1, 0
]

Compile

$ coffee -c some.coffee

# or just print out
$ coffee -p some.coffee

number = 42
opposite = true

number = -42 if opposite

list = [1, 2, 3, 4, 5]

math =
root: Math.sqrt
square: square
cube: (x) -> x * square x

var list, math, number, opposite;
number = 42;
opposite = true;
if (opposite) {
number = -42;
}
list = [1, 2, 3, 4, 5];
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};

Lexical Scopes & Safety

outer = 1
changeNumbers = ->
inner = -1
outer = 10
inner = changeNumbers()

var changeNumbers, inner, outer;
outer = 1;
changeNumbers = function() {
var inner;
inner = -1;
return outer = 10;
};
inner = changeNumbers();

Syntactic

Thin Coat of Sugar

And Some Boilerplate

Sugar++

# Splats:
race = (winner, runners...) ->
print winner, runners

# Existence:
alert "I knew it!" if elvis?

var race;
var __slice = Array.prototype.slice;
var race = function() {
var runners, winner;
winner = arguments[0], runners = 2 <= arguments.length ?
__slice.call(arguments, 1) : [];
return print(winner, runners);
};
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}

Expressions, Implicitness, Return

Unpacking

[first, second] = [1, 2, 3, 4]

_ref = [1, 2, 3], first = _ref[0], second = _ref[1];

{puts, inspect} = require 'util'

_ref2 = require('util'), puts = _ref2.puts, inspect =
_ref2.inspect;

Comprehensions!

cubes = (math.cube num for num in list)

var cubes;
cubes = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = list.length; _i < _len; _i++) {
num = list[_i];
_results.push(math.cube(num));
}
return _results;
})();

Comprehensive

yearsOld = max: 10, ida: 9, tim: 11

ages = for child, age of yearsOld
child + " is " + age

Closing Over Loops

for filename in list
do (filename) ->
fs.readFile filename, (err, contents) ->
compile filename, contents.toString()

Operator Names
CoffeeScript JavaScript

is, isnt ===, !==

and, or, not &&, ||, !

true, yes, on true

false, no, off false

in, of in, N/A

@, this this

:: prototype

Different Kinds of Else

● unless
● a?

●a ? b

● a ?= b

● a?.b

Classes
class Animal
constructor: (@name) ->

move: (meters) ->
alert @name + " moved " + meters + "m."

class Snake extends Animal
move: ->
alert "Slithering..."
super 5

class Horse extends Animal
move: ->
alert "Galloping..."
super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"

sam.move()
tom.move()

var Animal, Horse, Snake, sam, tom;
var __hasProp = Object.prototype.hasOwnProperty, __extends =
function(child, parent) {
for (var key in parent) { if (__hasProp.call(parent, key))
child[key] = parent[key]; }
function ctor() { this.constructor = child; }
ctor.prototype = parent.prototype;
child.prototype = new ctor;
child.__super__ = parent.prototype;
return child;
};

Animal = (function() {
function Animal(name) {
this.name = name;
}
Animal.prototype.move = function(meters) {
return alert(this.name + " moved " + meters + "m.");
};
return Animal;
})();

Snake = (function() {
__extends(Snake, Animal);
function Snake() {
Snake.__super__.constructor.apply(this, arguments);
}
Snake.prototype.move = function() {
alert("Slithering...");
return Snake.__super__.move.call(this, 5);
};
return Snake;
})();

Binding => This

Account = (customer, cart) ->
@customer = customer
@cart = cart

$('.shopping_cart').bind 'click', (event) =>
@customer.purchase @cart

var Account;
var __bind = function(fn, me){ return function(){ return
fn.apply(me, arguments); }; };
Account = function(customer, cart) {
this.customer = customer;
this.cart = cart;
return $('.shopping_cart').bind('click', __bind(function(event)
{
return this.customer.purchase(this.cart);
}, this));
};

● Literals: Functions, Objects and Arrays
● If, Else, Unless, and Conditional Assignment

● Splats...
● Array Slicing and Splicing

● Loops and Comprehensions

● Destructuring Assignment

● Everything is an Expression

● Operators and Aliases
● Lexical Scoping and Variable Safety

● Classes, Inheritance, and Super

● Function Binding

● Switch and Try/Catch
● Chained Comparisons

● String Interpolation, Heredocs, and Block

Comments
● Extended Regular Expressions

● Embedded JavaScript

Coding in Coffee

sameness?

seeing clearly..

transparencies..

choices...

Tinkering Fun!

Node goodies: Zombie.js, Canvas, ...

$ npm link .

$ coffee --watch src

$ cake

Cakefile
{spawn, exec} = require 'child_process'

SRC = 'js/src'
LIB = 'js/lib'

task 'build', "compile coffee to js", -> build onErrorExit

task 'watch', "continously compile coffee to js", ->
cmd = spawn "coffee", ["-cw", "-o", LIB, SRC]
cmd.stdout.on "data", (data)-> process.stdout.write data
cmd.on "error", onErrorExit

build = (cb)->
console.log "Coffee compiling..."
exec "rm -rf #{LIB} && coffee -c -l -b -o #{LIB} #{SRC}",
(err, out)-> cb err

onErrorExit = (err)->
if err
process.stdout.write "#{err.stack}n"
process.exit -1

Image Tributes (CC)

"Black as midnight on a moonless night."
Knight of the Holy Grail
Reflecting on a Sunday afternoon
In The Red Room
Fall down mountains, just don't fall on me
Midnight Black
Orrery Steam Punk Assemblage by urbandon
Steampunk Time Contraption

Damn Fine CoffeeScript

Related slideshows

More Related Content

Damn Fine CoffeeScript