Bartosz Skorupski, Tomasz Szatkowski

…

Who likes JavaScript?Rise your hand, please!

● Runs in browser environment,● Has AWESOME features

JAVASCRIPT

UGLY!

And preserve what’s best of it

How to make it better?

ECMAScript Harmony

Let’s standardize it!

and get new features right now

Use a compiler!

CoffeeScript!● Expose the good parts of JS in a simple way● Compiles one-to-one into the equivalent JS, no interpretation at runtime● You can use any existing JS library seamlessly from CS (and vice-versa)● Output is readable and pretty-printed, will work in every JS runtime and

tends to run as fast or faster than the equivalent handwritten JS

Installing CSnpm install -g coffee-script

coffee -v

coffee -w -o javascripts/ -c coffeescripts/coffee -j javascripts/app.js -c coffeescripts/*.coffee

Command Line Usage

date = if friday then weekend else weekday

# eat luncheat = (what) -> "om nom noming #{what}"eat food for food in ['toast', 'cheese', 'wine']

class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m."

new Animal('dog').move 3

var Animal, date, eat, food, _i, _len, _ref;

date = friday ? weekend : weekday;

eat = function(what) { return "om nom noming " + what;};

_ref = ['toast', 'cheese', 'wine'];for (_i = 0, _len = _ref.length; _i < _len; _i++) { food = _ref[_i]; eat(food);}

Animal = (function() { function Animal(name) { this.name = name; }

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

return Animal;

})();

new Animal('dog').move(3);

better switch, function binding, for in, for of, handy literals (@, ->), splats, classes, default arguments, destructuring assignment, ranges

It has much to offer

year = 2014speed = 50

VARIABLES

first_name = "Jan"

full_name = first_name + " Kowalski"full_name = "#{first_name} Kowalski"

STRINGS

square = (x = 2) -> x * x # square(x)

FUNCTIONS

Immediate functions

for i in [0...3] do (i) -> setTimeout ( -> console.log(i) ), 1000

012

Function binding

... # @prop <=> this.prop @prop = "Caller's scope" func = => console.log(@prop) func()...

Caller's scope

names = ["Marty", "George", "Dave"]

ARRAYS

classicalNotation = { age: 11, name: 'Alice'};

OBJECTSsimplifiedNotation = age: 11 name: 'Alice'

days = [1..7]tuesday_to_friday = days[1..4] # 2, 3, 4, 5range = [1...4] # 1, 2, 3

RANGES

merge = (head, tail...) -> [head].concat(tail)

SPLAT

Classes, Inheritance, Super

class Animal constructor: (@name) ->

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

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

sam = new Snake "Sammy the Python"

sam.move()

Use cases

CoffeeScript with Backbone

define ["Backbone", "someModule"], (Backbone, someModule) ->

class SomeClass extends Backbone.View initialize: -> @prop = 9 render: -> someModule.doSomething()

Debugging

CoffeeScript generates source mapping. Currently works under Google Chrome and Mozilla Firefox.

Thank you

Questions