Coffeescript: No really, it's just Javascript

@be_mannBrian Mann

Atlanta, GA

SCo!e"Scrip#

No really, it’s just Javascript

• Exposes the good parts

• Transpiles directly to JS

• Removes / Adds new syntax

• Enhances readability, and productivity

• Clearly expresses intents

What is CoffeeScript?

• An Emotional Assessment

• Dive Into Features

• Real World Experiences

• Challenges / Critiques

Agenda

I am Biased.

CoffeeScript

BEAUTIFUL UGLY/LOVED HATED/

EMBRACED FEARED/

/ / SYNTAX.TOOLS.LANGUAGES.

is one of the most

Javascript Landscape.

Golden Age

Golden Age

S

Co!e"Scrip#

• CoffeeScript looks different

• CoffeeScript acts different

Why the hate?

FUD.

Fear. Uncertainty. Doubt.

Crutch.

Absolutely

NOT.

Nothing To Fear.

S

Co!e"Scrip#

Its just Javascript.

Okay thx. Code plz.

• No more semi-colons

• No more commas

• Optional parenthesis

• Optional curly braces

• White space sensitive

Before we begin

;,

{}()

Vars.

var is, no, more;

Vars are long gone

count = 0

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

COFFEESCRIPT

var count, increment;

count = 0;

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

JAVASCRIPT

Rule:99/100

Object Literals.

Objects Simplified

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

COFFEESCRIPT

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

JAVASCRIPT

Functions.

Functions in JS

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

DECLARATION

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

EXPRESSION

Functions in CS

eat = -> console.log "eating"

COFFEESCRIPT

var eat;

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

JAVASCRIPT

Function Arguments

eat = (options = {}) ->

COFFEESCRIPT

var eat;

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

JAVASCRIPT

Function Context

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

COFFEESCRIPT

var person;

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

JAVASCRIPT

> person.eat();# 10

Function Binding

var person;

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

JAVASCRIPT

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

COFFEESCRIPT

Function Binding

var person;

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

JAVASCRIPT

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

COFFEESCRIPTvar person;

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

Function Splats

var person;

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

JAVASCRIPT

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

COFFEESCRIPT

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

Ranges / Slicing

Array + String Slicing

nums = [1..10]

COFFEESCRIPT JAVASCRIPT

nums[0...5]

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

"Toby Ho"[0..3]

[1,2,3,4,5]

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

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

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

nums.slice(0, 5);

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

Toby

If, Else, Unless.

Flow Controlvar person;

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

person = name: "Toby Ho" tired: true work: -> return if @tired @program "javascript" relax: -> if moment.hour() > 10 then @read() else @tv() sleep: -> @relax() unless @tired

COFFEESCRIPT

Operators.

Operator ComparisonCOFFEESCRIPT JAVASCRIPT

yestrue on true

nofalse off false

and && exercise() unless @tired and @sleepy

or || happy() if @happy or @energy > 50

not ! relax() if not working()

isnt !== @name isnt "randall"

is === true is true

ExistentialOperator.

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

> person.address?.city Alpharetta=>

> person.phone?.cell undefined=>

> person.call?( ) undefined=>

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

if (typeof person.call === "function") { person.call();}

var _ref;

if ((_ref = person.address) != null) { _ref.city;}

String Interpolation.

No more awkward ‘+’

"Hey, " + person.name + " is " + person.age + " years young.";

JAVASCRIPT

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

COFFEESCRIPT

Destructuring Assignment.

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

{name, energy, address} = person

COFFEESCRIPT

JAVASCRIPT

var address, energy, name;

name = person.name;energy = person.energy;address = person.address;

IIFE’s.

Module Pattern

App = do -> privateVar = "can't get to me!"

privateFn = -> "can't invoke me either"

obj = data: [] props: {} publicFn: ->

return obj

COFFEESCRIPTJAVASCRIPTApp = (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;})();

Local Dependencies

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

COFFEESCRIPTJAVASCRIPT

(function($, BB) { //reference jQuery as $ //reference Backbone as BB

})(jQuery, Backbone);

Switch / Case.

...minus the case

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


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

No Control Expression

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


var energyLevel;

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

Loops / Comprehensions.

For Loopsperson = name: "Toby Ho" language: "javascript" likes: ["node", "testem", "jazz"]

COFFEESCRIPTfor like, num in person.likes console.log "#{num + 1}. #{like}"

1. node2. testem3. jazz

=>

var like, num, _i, _len, _ref;

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

JAVASCRIPT

Property Iteration

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

COFFEESCRIPTfor first, last of heros console.log first, last

john resigryan dahl=>

var first, last;

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

JAVASCRIPT

Array ‘in’ checking

COFFEESCRIPTif "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

person = name: "Toby Ho" dislikes: ["frameworks", "long plane rides"]

Comprehensions

var i, nums;

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

JAVASCRIPT

COFFEESCRIPT

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

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

=>

• Block Strings

• Block Regular Expressions

• Some Operators

• Chained Comparisons

• Trailing Commas

• Reserved Words

• Literate Coffeescript

• Classes, Inheritance, & Super

What was missed?

Debugging.

Syntax [email protected] "HeaderApp", +>

SUBLIME TEXT

Source Maps

CoffeeConsole

Literal CoffeeScript

Criticisms.

Dispelling the Myths

• Compiler Errors (WAT?)

• Performance

• Restrictions*

• Harder to Debug

• Less Readability

• You can skip learning JS

Lies, Damned Lies,

& Statistics.

Productivity Gains

CHARS 1,198,518 2,704,135 2.25X

34,014 84,681 2.49XLINES OFCODE

The End

@be_mannBrian Mann

SCo!e"Scrip#

Technology

Coffeescript: No really, it's just Javascript