1. COFFEESCRIPT
A Rubyist’s Love Affair

2. Mark Bates

3. Distributed
Programming
with
Ruby
Addison-Wesley
2009
http://books.markbates.com

4. Programming
in
CoffeeScript
Addison-Wesley
2012
http://books.markbates.com

5. A (BRIEF) HISTORY LESSON

7. “
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)

9. “ 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)

10. 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;
};
});

11. FAST FORWARD
About 15 Years

13. 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;
};
});

14. 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

15. WHAT IS COFFEESCRIPT?

16. What is CoffeeScript?

17. What is CoffeeScript?
“A little language that compiles into JavaScript.”

18. What is CoffeeScript?
“A little language that compiles into JavaScript.”
Easily integrates with your current JavaScript

19. What is CoffeeScript?
“A little language that compiles into JavaScript.”
Easily integrates with your current JavaScript
Easier to read, write, maintain, refactor, etc...

20. 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.

21. 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.
Helpful.

22. What CoffeeScript Is Not?
Not Magic!
Limited by what JavaScript can already do

23. “
I’m happy writing JavaScript.
I don’t need to learn another language. ”

24. FINE WITH ME

25. BUT...

26. .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

27. .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

28. #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;
}

29. 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;
}
}

30. def fibonacci Ruby
a = 0
b = 1
100.times do
printf("%dn", a)
a, b = b, a + b
end
end

31. “
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! ”

32. SAME GOES FOR
COFFEESCRIPT

33. SYNTAX

34. $(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

35. Syntax Rules
No semi-colons (ever!)
No curly braces*
No ‘function’ keyword
Relaxed parentheses
Whitespace significant formatting

36. 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"

37. Parentheses Rules
var noArg1, noArg2, withArg;
noArg1 = function() {};
noArg2 = function() {};
withArg = function(arg) {};
noArg1();
noArg2();
withArg("bar");
withArg("bar");

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

39. Whitespace

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

41. 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
$.get('/users', success, 'json');
});

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

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

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

45. RUBYSCRIPT?

46. Conditionals

47. Conditionals
if true
doSomething()
unless true
doSomething()

48. Conditionals
if true doSomething() if true
doSomething()
doSomething() unless true
unless true
doSomething()

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

50. Objects/Hashes
someObject = {conf: "RailsConf", talk: "CoffeeScript"}
someObject =
conf: "RailsConf"
talk: "CoffeeScript"
someFunction(conf: "RailsConf", talk: "CoffeeScript")

51. Objects/Hashes
var someObject;
someObject = {
conf: "RailsConf",
talk: "CoffeeScript"
};
someObject = {
conf: "RailsConf",
talk: "CoffeeScript"
};
someFunction({
conf: "RailsConf",
talk: "CoffeeScript"
});

52. Ranges
a = [1..5]
b = [1...5]
c = [1..100]
d = [100..1]

53. 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);

54. String Interpolation
name = "RailsConf 2012"
console.log "Hello #{name}"
# Hello RailsConf 2012
console.log 'Hello #{name}'
# Hello #{name}

55. 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}');

56. 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>
"""

57. 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>";

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

59. Functions
var p;
p = function(name) {
return console.log("Hello " + name);
};
p('RailsConf 2012');

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

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

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

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

64. 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;
};

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

66. 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]);

67. Loops & Comprehensions
for someName in someArray
console.log someName
for key, value of someObject
console.log "#{key}: #{value}"

68. Loops & Comprehensions
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);
}

69. Loops & Comprehensions
numbers = [1..5]
console.log number for number in numbers

70. Loops & Comprehensions
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);
}

71. Loops & Comprehensions
numbers = [1..5]
console.log number for number in numbers when number <= 3

72. Loops & Comprehensions
var number, numbers, _i, _len;
numbers = [1, 2, 3, 4, 5];
for (_i = 0, _len = numbers.length; _i < _len; _i++) {
number = numbers[_i];
if (number <= 3) {
console.log(number);
}
}

73. Loops & Comprehensions
numbers = [1, 2, 3, 4, 5]
low_numbers = (number * 2 for number in numbers when number <= 3)
console.log low_numbers # [ 2, 4, 6 ]

74. Loops & Comprehensions
var low_numbers, number, numbers;
numbers = [1, 2, 3, 4, 5];
low_numbers = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = numbers.length; _i < _len; _i++) {
number = numbers[_i];
if (number <= 3) {
_results.push(number * 2);
}
}
return _results;
})();
console.log(low_numbers);

75. Classes
class Employee
emp = new Employee()
emp.firstName = "Mark"

76. Classes
var Employee, emp;
Employee = (function() {
Employee.name = 'Employee';
function Employee() {}
return Employee;
})();
emp = new Employee();
emp.firstName = "Mark";

77. 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"

78. 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());

79. Extending Classes
class Manager extends Employee
constructor: ->
super
@options.salary ?= "$500,000"
manager = new Manager()
console.log manager.salary() # "$500,000"

80. 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());

81. Extending Classes
class Manager extends Employee
constructor: ->
super
@options.salary ?= "$500,000"
salary: ->
"#{super} + $10k"
manager = new Manager()
console.log manager.salary() # "$500,000 + $10k"

82. 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());

83. 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)

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

85. 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)

86. 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)

87. 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)

88. Bound Functions
about to execute callback...
Hello bob
...executed callback
about to execute callback...
Hello mary
...executed callback

89. Bound Functions
class User
constructor: (@name) ->
sayHi: =>
console.log "Hello #{@name}"

90. 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;
})();

91. FINALLY
One of my favorite features

92. Existential Operator
if foo?
console.log "foo"
console.log "foo" if foo?

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

94. WAIT! IT GETS BETTER!

95. Existential Operator
console?.log "foo"

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

97. Existential Operator
if currentUser?.firstName?
console.log currentUser.firstName

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

99. What Didn’t I Cover?
Scoping
Security
Strict Mode
Fixes common ‘mistakes’
Operators
The `do` keyword
Plenty more!

100. Thank You

101. Thank You
myName = "Mark Bates"
you.should buyBook("Programming in CoffeeScript")
.at("http://books.markbates.com")
you.should followMe(@markbates)