Coffeescript: No really, it's just Javascript

S

CoﬀeeScript

No really, it’s just Javascript
Brian Mann
@be_mann
Atlanta, GA

What is CoffeeScript?

• Exposes the good parts
• Transpiles directly to JS
• Removes / Adds new syntax
• Enhances readability, and productivity
• Clearly expresses intents

Agenda

• An Emotional Assessment
• Dive Into Features
• Real World Experiences
• Challenges / Critiques

CoffeeScript
is one of the most
BEAUTIFUL

/

UGLY

LOVED

/

HATED

EMBRACED

/

FEARED

LANGUAGES.

/

TOOLS.

/

SYNTAX.

Why the hate?

• CoffeeScript looks different
• CoffeeScript acts different

FUD.
Fear. Uncertainty. Doubt.

Before we begin

•
• No more commas
• Optional parenthesis
• Optional curly braces
• White space sensitive

No more semi-colons ;
,
()
{}

Vars are long gone
var count, increment;

JAVASCRIPT

count = 0;
increment = function() {
var total;
count += 1;
return total = "The total is: " + count;
};

count = 0

COFFEESCRIPT

increment = ->
count += 1
total = "The total is: " + count

Objects Simplified
JAVASCRIPT

var person = {
name: "Toby Ho",
language: "javascript",
likes: ["node", "testem", "jazz"]
};

COFFEESCRIPT

person =
name: "Toby Ho"
language: "javascript"

Functions in JS
function eat(){
console.log("eating");
};

var eat = function(){
console.log("eating");
};

DECLARATION

EXPRESSION

Functions in CS
COFFEESCRIPT
eat = ->
console.log "eating"

JAVASCRIPT
var eat;
eat = function() {
return console.log("eating");
};

Function Arguments
COFFEESCRIPT
eat = (options = {}) ->

JAVASCRIPT
var eat;
eat = function(options) {
if (options == null) {
options = {};
}
};

Function Context
JAVASCRIPT

COFFEESCRIPT

var person;
person = {
name: "Toby Ho",
energy: 0,
eat: function() {
return this.energy += 10;
}
};

> person.eat();
# 10

person =
name: "Toby Ho"
energy: 0
eat: ->
@energy += 10

Function Binding
JAVASCRIPT
var person;
person = {
name: "Toby Ho",
energy: 0,
work: function() {
var _this = this;
$("#stop").click(function() {
return _this.energy -= 20;
});
}
};

COFFEESCRIPT
person =
name: "Toby Ho"
energy: 0
work: ->
$("#stop").click =>
@energy -= 20

Function Binding
JAVASCRIPT
var person;

COFFEESCRIPT

person =
name: "Toby Ho"
person = {
energy: 0
name: "Toby Ho",
person = {
work: ->
energy: 0,
name: "Toby Ho",
$("#stop").click =>
energy: 0, work: function() {
@energy -= 20
return $("#stop").click((function(_this) {
work: function() {
return function() {
var _this = this;
$("#stop").click(function() {
};
})(this));
});
}
}
};
};
var person;

Function Splats
JAVASCRIPT
var person;

COFFEESCRIPT
person =
name: "Toby Ho"
dislikes: []
addDislikes: (args...) ->
@dislikes.push args...

person = {
name: "Toby Ho",
dislikes: [],
addDislikes: function() {
var args = [].slice.call(arguments);
return [].push.apply(this.dislikes, args);
}
};

> person.addDislikes(“frameworks”, “long plane rides”);

Array + String Slicing
COFFEESCRIPT

JAVASCRIPT

nums = [1..10]

nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

nums[0...5]

nums.slice(0, 5);

[1,2,3,4,5]

nums[2..3] = [-3, -4]

[].splice.apply(nums,
[2,2].concat([-3, -4])
);

[1,2,-3,-4,5,
6,7,8,9,10]

"Toby Ho"[0..3]

"Toby Ho".slice(0, 4);

Toby

Flow Control
person =
name: "Toby Ho"
tired: true
work: ->
return if @tired
@program "javascript"
relax: ->

var person;

person = {
name: "Toby Ho",
tired: true,
work: function() {
if (this.tired) {
if moment.hour() > 10 then @read() else @tv()
return;
sleep: ->
}
@relax() unless @tired
return this.program("javascript");
},
relax: function() {
moment.hour() > 10 ? this.read() : this.tv();
},
sleep: function() {
if (!this.tired) {
return this.relax();
}
}
};

COFFEESCRIPT

JAVASCRIPT

Operator Comparison
COFFEESCRIPT

JAVASCRIPT

is

===

true is true

isnt

!==

@name isnt "randall"

not

!

and

&&

or

||

true yes

on

true

false no

oﬀ

false

relax() if not working()
exercise() unless @tired and @sleepy

happy() if @happy or @energy

> 50

Do You Really Exist?
person =
name: "Toby Ho"
energy: 0
address:
city: "Alpharetta"
state: "GA"
zip: 30307
phone: null
mail: -> "mailing..."

var _ref;
if ((_ref = person.address) != null) {
_ref.city;
}
if (typeof person.call === "function") {
person.call();
}

> person.address?.city

=>

Alpharetta

> person.phone?.cell

=>

undefined

> person.call?( )

=>

undefined

> person.call?( ) ? person.mail( )

=>

mailing...

No more awkward ‘+’
JAVASCRIPT
"Hey, " + person.name + " is " + person.age + " years young.";

COFFEESCRIPT
"Hey, #{person.name} is #{person.age} years young."

Easy var extraction
person =
name: "Toby Ho"
energy: 0
address:
city: "Alpharetta"
state: "GA"
zip: 30307

COFFEESCRIPT
{name, energy, address} = person

JAVASCRIPT
var address, energy, name;
name
= person.name;
energy = person.energy;
address = person.address;

Module Pattern
JAVASCRIPT
App = (function() {
var privateVar = "can't get to me!";
var privateFn = function() {
return "can't invoke me either";
};
var obj = {
data: [],
props: {},
publicFn: function() {}
};
return obj;
})();

COFFEESCRIPT
App = do ->
privateVar = "can't get to me!"
privateFn = -> "can't invoke me either"
obj =
data: []
props: {}
publicFn: ->
return obj

Local Dependencies
JAVASCRIPT
(function($, BB) {
//reference jQuery as $
//reference Backbone as BB
})(jQuery, Backbone);

COFFEESCRIPT
do ($ = jQuery, BB = Backbone) ->
#reference jQuery as $
#reference Backbone as BB

...minus the case
COFFEESCRIPT
switch
when
when
when
else

state
"GA"
then "humid"
"WA"
then "rainy"
"AZ", "UT", "NV" then "dry"
"moderate"

JAVASCRIPT
switch (state) {
case "GA":
"humid";
break;
case "WA":
"rainy";
break;
case "AZ":
case "UT":
case "NV":
"dry";
break;
default:
"moderate";
}

No Control Expression
COFFEESCRIPT
energyLevel = switch
when @energy < 10 then "exhausted"
when @energy < 20 then "okay"
when @energy < 40 then "caffeinated"
else "bouncing off walls"

JAVASCRIPT
var energyLevel;
energyLevel = (function() {
switch (false) {
case !(this.energy < 10):
return "exhausted";
return "okay";
return "caffeinated";
default:
return "bouncing off walls";
}
}).call(this);

For Loops
person =
name: "Toby Ho"
language: "javascript"

COFFEESCRIPT
for like, num in person.likes
console.log "#{num + 1}. #{like}"
var like, num, _i, _len, _ref;

=>

1. node
2. testem
3. jazz

JAVASCRIPT

_ref = person.likes;
for (num = _i = 0, _len = _ref.length; _i < _len; num = ++_i) {
like = _ref[num];
console.log("" + (num + 1) + ". " + like);
}

Property Iteration
heros = { john: "resig", ryan: "dahl" };

COFFEESCRIPT
for first, last of heros
console.log first, last

var first, last;

JAVASCRIPT

for (first in heros) {
last = heros[first];
console.log(first, last);
}

=>

john resig
ryan dahl

Array ‘in’ checking
person =
name: "Toby Ho"
dislikes: ["frameworks", "long plane rides"]

COFFEESCRIPT
if "coffeescript" in person.dislikes then "hater" else "friend :-)"

var __indexOf = [].indexOf || function(item) { for (var i = 0, l
= this.length; i < l; i++) { if (i in this && this[i] === item)
return i; } return -1; };
if (__indexOf.call(this.dislikes, "coffeescript") >= 0) {
"hater";
} else {
"friend :-)";
}

JAVASCRIPT

Comprehensions
{100 Objects}

COFFEESCRIPT
nums = (num: i for i in [1..100])

var i, nums;

=>

JAVASCRIPT

nums = (function() {
var _i, _results;
_results = [];
for (i = _i = 1; _i <= 100; i = ++_i) {
_results.push({
num: i
});
}
return _results;
})();

-------------------------[{
num: 1
},{
num: 2
}]

What was missed?

•
• Block Regular Expressions
Some Operators
•
• Chained Comparisons
Trailing Commas
•
• Reserved Words
Literate Coffeescript
•
• Classes, Inheritance, & Super
Block Strings

Syntax Errors
@PE.module "HeaderApp", +>

SUBLIME TEXT

Dispelling the Myths

• Compiler Errors (WAT?)
• Performance
• Restrictions*
• Harder to Debug
• Less Readability
• You can skip learning JS

Lies,
Damned Lies,
& Statistics.

Productivity Gains
LINES OF
CODE

34,014

84,681

2.49X

CHARS

1,198,518

2,704,135

2.25X

S

CoﬀeeScript
The End
Brian Mann
@be_mann

Coffeescript: No really, it's just Javascript

More Related Content

What's hot

Similar to Coffeescript: No really, it's just Javascript

Recently uploaded

Coffeescript: No really, it's just Javascript