CoffeeScript: A Brief History and Introduction

COFFEESCRIPT
A Rubyist’s Love Affair

Distributed
Programming
with
Ruby
Addison-Wesley
2009

http://books.markbates.com

Programming
in
CoffeeScript
Addison-Wesley
2012

http://books.markbates.com

“
I need to come up with a scripting language
for web browsers.

I know! I'll make it cool and Lispy! ”
Dramatic Re-enactment (1995)

“ Yeah, So... Java is getting really popular.
So we're going to need you to rewrite your
language into something a bit more Java-
esque and name it something like JavaScript.

Yeah, and we're going to need it in a week.

Thanks, that'd be great. ”
Dramatic Re-enactment (1995)

var MyApp.Models.Product = Backbone.Model.extend({

isLiked: function() {
var _ref;
return ! ((_ref = this.like()) != null ? _ref.isNew() : void 0);
};

like: function() {
return new MyApp.Models.Like(this.get("like"));
};

image: function(size) {
var img;
if (size == null) {
size = "full";
}
if (this.get("image") != null) {
img = this.get("image")[size];
}
if (img == null) {
img = "/images/fallback/product_" + size + "_default.png";
}
return img;
};

});

FAST FORWARD
About 15 Years

class MyApp.Models.Product extends Backbone.Model

isLiked: ->
!@like()?.isNew()

like: ->
new MyApp.Models.Like(@get("like"))

image: (size = "full") ->
if @get("image")?
img = @get("image")[size]
unless img?
img = "/images/fallback/product_#{size}_default.png"
return img

What is CoffeeScript?

“A little language that compiles into JavaScript.”



Easily integrates with your current JavaScript




Easier to read, write, maintain, refactor, etc...





A Hybrid of Ruby and Python.





A Hybrid of Ruby and Python.

Helpful.

What CoffeeScript Is Not?

Not Magic!

Limited by what JavaScript can already do

“
I’m happy writing JavaScript.

I don’t need to learn another language. ”

.MODEL SMALL DISP:
MOV BL,VAL1
.STACK 64 ADD BL,VAL2

.DATA MOV AH,00H
VAL1 DB 01H MOV AL,BL
VAL2 DB 01H MOV LP,CL
LP DB 00H MOV CL,10
V1 DB 00H DIV CL
V2 DB 00H MOV CL,LP
NL DB 0DH,0AH,'$'
MOV V1,AL
.CODE MOV V2,AH

MAIN PROC MOV DL,V1
MOV AX,@DATA ADD DL,30H
MOV DS,AX MOV AH,02H
INT 21H
MOV AH,01H
INT 21H MOV DL,V2
MOV CL,AL ADD DL,30H
SUB CL,30H MOV AH,02H
SUB CL,2 INT 21H

MOV AH,02H MOV DL,VAL2
MOV DL,VAL1 MOV VAL1,DL
ADD DL,30H MOV VAL2,BL
INT 21H
MOV AH,09H
MOV AH,09H LEA DX,NL
LEA DX,NL INT 21H
INT 21H
LOOP DISP
MOV AH,02H
MOV DL,VAL2 MOV AH,4CH
ADD DL,30H INT 21H
INT 21H
MAIN ENDP
MOV AH,09H END MAIN
LEA DX,NL
INT 21H

.MODEL SMALL DISP:
Assembly MOV BL,VAL1
.STACK 64 ADD BL,VAL2

.DATA MOV AH,00H
VAL1 DB 01H MOV AL,BL
VAL2 DB 01H MOV LP,CL
LP DB 00H MOV CL,10
V1 DB 00H DIV CL
V2 DB 00H MOV CL,LP
NL DB 0DH,0AH,'$'
MOV V1,AL
.CODE MOV V2,AH

MAIN PROC MOV DL,V1
MOV AX,@DATA ADD DL,30H
MOV DS,AX MOV AH,02H
INT 21H
MOV AH,01H
INT 21H MOV DL,V2
MOV CL,AL ADD DL,30H
SUB CL,30H MOV AH,02H
SUB CL,2 INT 21H

MOV AH,02H MOV DL,VAL2
MOV DL,VAL1 MOV VAL1,DL
ADD DL,30H MOV VAL2,BL
INT 21H
MOV AH,09H
MOV AH,09H LEA DX,NL
LEA DX,NL INT 21H
INT 21H
LOOP DISP
MOV AH,02H
MOV DL,VAL2 MOV AH,4CH
ADD DL,30H INT 21H
INT 21H
MAIN ENDP
MOV AH,09H END MAIN
LEA DX,NL
INT 21H

#include <stdio.h> C
int fibonacci()
{
int n = 100;
int a = 0;
int b = 1;
int sum;
int i;

for (i = 0; i < n; i++)
{
printf("%dn", a);
sum = a + b;
a = b;
b = sum;
}
return 0;
}

public static void fibonacci() { Java
int n = 100;
int a = 0;
int b = 1;

for (int i = 0; i < n; i++) {
System.out.println(a);
a = a + b;
b = a - b;
}
}

def fibonacci Ruby
a = 0
b = 1

100.times do
printf("%dn", a)
a, b = b, a + b
end

end

“
I can write an app just as well in Java

as I can in Ruby, but damn it if Ruby

isn’t nicer to read and write! ”

$(function() { $ ->
success = (data) ->
success = function(data) { if data.errors?
if (data.errors != null) { alert "There was an error!"
alert("There was an error!"); else
} else { $("#content").text(data.message)
$("#content").text(data.message);
} $.get('/users', success, 'json')
};

$.get('/users', success, 'json');

}); JavaScript CoffeeScript

Syntax Rules

No semi-colons (ever!)

No curly braces*

No ‘function’ keyword

Relaxed parentheses

Whitespace significant formatting

Parentheses Rules
# Not required without arguments:
noArg1 = ->
# do something

# Not required without arguments:
noArg2 = () ->
# do something
# Required without arguments:
# Required with Arguments: noArg1()
withArg = (arg) -> noArg2()
# do something
# Not required with
arguments:
withArg("bar")
withArg "bar"

Parentheses Rules
var noArg1, noArg2, withArg;

noArg1 = function() {};

noArg2 = function() {};

withArg = function(arg) {};

noArg1();

noArg2();

withArg("bar");

withArg("bar");

Parentheses Rules
# Bad:
$ "#some_id" .text()
# $("#some_id".text());

# Good:
$("#some_id").text()
# $("#some_id").text();

Whitespace
$(function() {
success = function(data) {
if (data.errors != null) {
alert("There was an error!");
} else {
$("#content").text(data.message);
}
};
});

Whitespace
$(function() { def fibonacci
success = function(data) { a = 0
if (data.errors != null) { b = 1
alert("There was an error!"); 100.times do
} else { printf("%dn", a)
$("#content").text(data.message); a, b = b, a + b
} end
}; end
});

Whitespace
$(function() { def fibonacci
a = 0
success = function(data) { b = 1
alert("There was an error!"); 100.times do
} else { printf("%dn", a)
$("#content").text(data.message); a, b = b, a + b
} end
};
end

});

Whitespace
$ ->
success = (data) ->
if data.errors?
alert "There was an error!"
else
$("#content").text(data.message)

$.get('/users', success, 'json')

Whitespace
$(function() {
var success;
success = function(data) {
return alert("There was an error!");
} else {
return $("#content").text(data.message);
}
};
return $.get('/users', success, 'json');
});

Conditionals
if true
doSomething()

unless true
doSomething()

Conditionals
if true doSomething() if true
doSomething()
doSomething() unless true
unless true
doSomething()

Conditionals
if true doSomething() if true
doSomething()
doSomething() unless true
unless true
doSomething()
if true
doSomething()
else
doSomethingElse()

Objects/Hashes
someObject = {conf: "RailsConf", talk: "CoffeeScript"}

someObject =
conf: "RailsConf"
talk: "CoffeeScript"

someFunction(conf: "RailsConf", talk: "CoffeeScript")

Objects/Hashes
var someObject;

someObject = {
conf: "RailsConf",
};

someObject = {
conf: "RailsConf",
};

someFunction({
conf: "RailsConf",
});

Ranges
a = [1..5]

b = [1...5]

c = [1..100]

d = [100..1]

Ranges
a = [1..5] var a, b, c, d, _i, _j, _results, _results1;

a = [1, 2, 3, 4, 5];
b = [1...5]
b = [1, 2, 3, 4];
c = [1..100]
c = (function() {
_results = [];
d = [100..1] for (_i = 1; _i <= 100; _i++){ _results.push(_i); }
return _results;
}).apply(this);

d = (function() {
_results1 = [];
for (_j = 100; _j >= 1; _j--){ _results1.push(_j); }
return _results1;
}).apply(this);

String Interpolation
name = "RailsConf 2012"

console.log "Hello #{name}"
# Hello RailsConf 2012

console.log 'Hello #{name}'
# Hello #{name}

String Interpolation
name = "RailsConf 2012" var name;

console.log "Hello #{name}" name = "RailsConf 2012";
# Hello RailsConf 2012
console.log("Hello " + name);
console.log 'Hello #{name}'
# Hello #{name} console.log('Hello #{name}');

Heredocs
html = """
<div class="comment" id="tweet-#{tweet.id_str}">
<hr>
<div class='tweet'>
<span class="imgr"><img
src="#{tweet.profile_image_url}"></span>
<span class="txtr">
<h5><a href="http://twitter.com/#{tweet.from_user}"
target="_blank">@#{tweet.from_user}</a></h5>
<p>#{tweet.text}</p>
<p class="comment-posted-on">#{tweet.created_at}</p>
</span>
</div>
</div>
"""

Heredocs
var html;

html = "<div class="comment" id="tweet-" + tweet.id_str
+ "">n <hr>n <div class='tweet'>n <span class=
"imgr"><img src="" + tweet.profile_image_url + ""></
span>n <span class="txtr">n <h5><a href=
"http://twitter.com/" + tweet.from_user + "" target=
"_blank">@" + tweet.from_user + "</a></h5>n <p>" +
tweet.text + "</p>n <p class="comment-posted-on">"
+ tweet.created_at + "</p>n </span>n </div>n</div>";

Functions
p = (name) ->

p('RailsConf 2012')

Functions
var p;

p = function(name) {
return console.log("Hello " + name);
};

p('RailsConf 2012');

Functions
p = (name)->

p('RailsConf 2012')

Functions
p = (name)->
console.log "Hello #{name}" CoffeeScript
p('RailsConf 2012')

Functions
p = (name)->
console.log "Hello #{name}" CoffeeScript
p('RailsConf 2012')

p = ->(name) {
puts "Hello #{name}"
}
Ruby 1.9
p.call('RailsConf 2012')

Default Arguments
createElement = (name, attributes = {}) ->
obj = document.createElement name
for key, val of attributes
obj.setAttribute key, val
obj

Default Arguments
var createElement;

createElement = function(name, attributes) {
var key, obj, val;
if (attributes == null) {
attributes = {};
}
obj = document.createElement(name);
for (key in attributes) {
val = attributes[key];
obj.setAttribute(key, val);
}
return obj;
};

Splats*
splatter = (first, second, others...) ->
console.log "First: #{first}"
console.log "Second: #{second}"
console.log "Others: #{others.join(', ')}"

splatter [1..5]...

Splats*
var splatter,
__slice = [].slice;

splatter = function() {
var first, others, second;
first = arguments[0], second = arguments[1], others = 3
<= arguments.length ? __slice.call(arguments, 2) : [];
console.log("First: " + first);
console.log("Second: " + second);
return console.log("Others: " + (others.join(', ')));
};

splatter.apply(null, [1, 2, 3, 4, 5]);

Loops & Comprehensions
for someName in someArray
console.log someName

for key, value of someObject
console.log "#{key}: #{value}"

var key, someName, value, _i, _len;

for (_i = 0, _len = someArray.length; _i < _len; _i++) {
someName = someArray[_i];
console.log(someName);
}

for (key in someObject) {
value = someObject[key];
console.log("" + key + ": " + value);
}

numbers = [1..5]

console.log number for number in numbers

var number, numbers, _i, _len;

numbers = [1, 2, 3, 4, 5];

for (_i = 0, _len = numbers.length; _i < _len; _i++) {
number = numbers[_i];
console.log(number);
}

numbers = [1..5]

console.log number for number in numbers when number <= 3

var number, numbers, _i, _len;

numbers = [1, 2, 3, 4, 5];

if (number <= 3) {
console.log(number);
}
}

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

low_numbers = (number * 2 for number in numbers when number <= 3)

console.log low_numbers # [ 2, 4, 6 ]

var low_numbers, number, numbers;

numbers = [1, 2, 3, 4, 5];

low_numbers = (function() {
var _i, _len, _results;
_results = [];
if (number <= 3) {
_results.push(number * 2);
}
}
return _results;
})();

console.log(low_numbers);

Classes
class Employee

emp = new Employee()
emp.firstName = "Mark"

Classes
var Employee, emp;

Employee = (function() {

Employee.name = 'Employee';

function Employee() {}

return Employee;

})();

emp = new Employee();

emp.firstName = "Mark";

Classes
class Employee

constructor: (@options = {}) ->

salary: ->
@options.salary ?= "$250,000"

emp = new Employee()
console.log emp.salary() # "$250,000"

emp = new Employee(salary: "$100,000")
console.log emp.salary() # "$100,000"

Classes
var Employee, emp;

Employee = (function() {

Employee.name = 'Employee';

function Employee(options) {
this.options = options != null ? options : {};
}

Employee.prototype.salary = function() {
var _base, _ref;
return (_ref = (_base = this.options).salary) != null ? _ref : _base.salary = "$250,000";
};

return Employee;

})();

emp = new Employee();

console.log(emp.salary());

emp = new Employee({
salary: "$100,000"
});

console.log(emp.salary());

Extending Classes
class Manager extends Employee

constructor: ->
super

manager = new Manager()
console.log manager.salary() # "$500,000"

Extending Classes
var Manager, manager,
__hasProp = {}.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; };

Manager = (function(_super) {

__extends(Manager, _super);

Manager.name = 'Manager';

function Manager() {
var _base;
Manager.__super__.constructor.apply(this, arguments);
if ((_base = this.options).salary == null) {
_base.salary = "$500,000";
}
}

return Manager;

})(Employee);

manager = new Manager();

console.log(manager.salary());

Extending Classes
class Manager extends Employee

constructor: ->
super

salary: ->
"#{super} + $10k"

manager = new Manager()
console.log manager.salary() # "$500,000 + $10k"

Extending Classes
var Manager, manager,
__hasProp = {}.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; };

Manager = (function(_super) {

__extends(Manager, _super);

Manager.name = 'Manager';

function Manager() {
var _base;
Manager.__super__.constructor.apply(this, arguments);
if ((_base = this.options).salary == null) {
_base.salary = "$500,000";
}
}

Manager.prototype.salary = function() {
return "" + Manager.__super__.salary.apply(this, arguments) + " + $10k";
};

return Manager;

})(Employee);

manager = new Manager();

console.log(manager.salary());

Bound Functions
class User

constructor: (@name) ->

sayHi: ->
console.log "Hello #{@name}"

bob = new User('bob')
mary = new User('mary')

log = (callback)->
console.log "about to execute callback..."
callback()
console.log "...executed callback"

log(bob.sayHi)
log(mary.sayHi)

Bound Functions
about to execute callback...
Hello undefined
...executed callback
Hello undefined

Bound Functions
class User


sayHi: =>

bob = new User('bob')
mary = new User('mary')

log = (callback)->
console.log "about to execute callback..."
callback()
console.log "...executed callback"

log(bob.sayHi)
log(mary.sayHi)

Bound Functions
Hello bob
Hello mary

Bound Functions
class User


sayHi: =>

Bound Functions
var User,
__bind = function(fn, me){ return function(){ return fn.apply(me,
arguments); }; };

User = (function() {

User.name = 'User';

function User(name) {
this.name = name;
this.sayHi = __bind(this.sayHi, this);
}

User.prototype.sayHi = function() {
return console.log("Hello " + this.name);
};

return User;

})();

FINALLY
One of my favorite features

Existential Operator
if foo?
console.log "foo"

console.log "foo" if foo?

if (typeof foo !== "undefined" && foo !== null) {
console.log("foo");
}

if (typeof foo !== "undefined" && foo !== null) {
console.log("foo");
}

console?.log "foo"

console?.log "foo"

if (typeof console !== "undefined" && console !== null) {
console.log("foo");
}

if currentUser?.firstName?
console.log currentUser.firstName

if currentUser?.firstName?
console.log currentUser.firstName

if ((typeof currentUser !== "undefined" && currentUser !==
null ? currentUser.firstName : void 0) != null) {
console.log(currentUser.firstName);
}

What Didn’t I Cover?
Scoping

Security

Strict Mode

Fixes common ‘mistakes’

Operators

The `do` keyword

Plenty more!

Thank You
myName = "Mark Bates"

you.should buyBook("Programming in CoffeeScript")
.at("http://books.markbates.com")

you.should followMe(@markbates)

CoffeeScript: A Brief History and Introduction

Recommended

Recommended

More Related Content

More from Mark

More from Mark (18)

Recently uploaded

Recently uploaded (20)

CoffeeScript: A Brief History and Introduction

Editor's Notes