CoffeeScript

   
The  Beau1ful  Way    
to  Write  JavaScript  
by  amir  salihefendic  -­‐  amix@amix.dk  -­‐  amix.dk  
 My  history  with  JavaScript  
•  WriDen  more  than  50.000  lines  of  JavaScript  

•  One  of  the  first  to  use  node.js  in  produc1on  

•  Scaled  a  node.js  comet  server  to  handle  
100.000+  concurrent  users  

•  I  like  JavaScript,  but  I  think  it  can  be  improved  

What  is  beau1ful  code?  
 My  defini1on  of  Beau1ful  Code  
•  Beau+ful  code  uses  the  least  amount  of  code  to  solve  a  
given  problem  

•  Beau+ful  code  is  readable  and  understandable  

•  Beau+ful  code  is  achieved  not  when  there  is  nothing  

more  to  add,  but  when  there  is  nothing  leP  to  take  
away.  Just  like  great  designs  

•  The  minimal  length  is  a  side-­‐effect  of  beau1ful  code  

and  not  a  goal  or  a  measure  
Example  of  Ugly  Code  

function f(n) {
var s= 0;
if(n == 0) return(s);
if(n == 1) {
s += 1;
return(s);
}
else {
return(f(n - 1) + f(n - 2));
}
}  
Example  of  Beau1ful  Code  

function fib(n) {
return n<2 ? n : fib(n-1) + fib(n-2)
}

or

function fib(n) {
if (n < 2)
return n
return fib(n-2) + fib(n-1)
}  
Is  it  possible  to  write  
beau1ful  JavaScript?  

YES  it  is,    

but  it  could  be  much  easier  
 What  is  JavaScript?  
•  JavaScript  is  a  func1onal  language  

•  JavaScript  is  an  object  oriented  language,    

but  it  uses  prototype  inheritance  

•  JavaScript  is  very  dynamic  and  is  a  lot  closer  to  Lisp  
than  C/Java,  but  it  has  a  C/Java  syntax  

•  …  JavaScript  is  highly  misunderstood.  Beneath  the  

dirty  surface  there’s  a  diamond  and  CoffeeScript  
aims  to  expose  this  diamond  
“
JavaScript  had  to  look  like  Java  only  less  so,    
be  Java’s  dumb  kid  brother  or  boy-­‐hostage  sidekick.  
 
Plus,  I  had  to  be  done  in  ten  days  or    
something  worse  than  JavaScript  would  have  happened.  
 
—  Brendan  Eich  (creator  of  JavaScript)  
  
 
 
Makes  it  much  easier  to  
create  beau+ful  JavaScript  code  
by  removing  a  lot  of  annoyances  
 What  is  CoffeeScript?  
•  CoffeeScript  is  a  language  that  compiles  to  JavaScript.  It’s  a  
transpiler  compiling  from  one  language  to  another  

•  CoffeeScript  is  an  aDempt  to  expose  the  good  parts  of  
JavaScript  in  a  simple  way  

•  CoffeeScript  does  not  deprecate  your  old  JavaScript  code  

•  CoffeeScript  will  work  in  every  JavaScript  

implementa1on  and  tends  to  run  as  fast  or  faster  than  
the  equivalent  handwriDen  JavaScript  
Example  of  CoffeeScript  code  
square = (x) -> x * x
cube = (x) -> square(x) * x  

Gets  compiled  to  following  JavaScript  code  

var cube, square;
square = function(x) {
return x * x;
};
cube = function(x) {
return square(x) * x;
};  
 node.js JavaScript HTTP server

var http = require('http');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8080, "127.0.0.1");

console.log('Server running at http://127.0.0.1:8080/');  

node.js CoffeeScript HTTP server

http = require 'http'

[host, port] = ['127.0.0.1', 8080]

http.createServer((req, res) ->
res.writeHead 200, 'Content-Type': 'text/plain'
res.end 'Hello World\n'
).listen(port, host)

console.log "Server running at http://#{ host }:#{ port }/"  
 CoffeeScript  Highlight  
Arrays  on  steroids  

#Python's list comprehensions

list = [1, 2, 3, 4, 5]
cubes = (math.cube num for num in list)


#Slicing
copy = list[0...list.length]


#Array generators
countdown = (num for num in [10..1])  
 CoffeeScript  Highlight  
Strings  from  Ruby  

author = "Wittgenstein"
quote = "A picture is a fact. -- #{ author }"

mobyDick = "Call me Ishmael. Some years ago -
never mind how long precisely -- having little
or no money in my purse, and nothing
particular..."  
 CoffeeScript  Highlight  
Inheritance  made  easy  

class Animal
constructor: (@name) ->

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


class Snake extends Animal

move: ->
alert "Slithering..."
super 5  
 CoffeeScript  Highlight  
Solving  this  nightmare    
loader.prototype.loadStuff = function() {
this.state = 'loading';
$.get('getStuff', function(data) {
//this is not what we think it is...!
this.state = 'loaded';
});
};  

Solved  in  CoffeeScript  using  =>  

loader::loadStuff = ->
@state = 'loading’

$.get 'getStuff', (data) =>
@state = 'loaded'  
 CoffeeScript  Highlight  
Write  less  code!  
function frob(obj) {
var rest = [].slice.call(arguments, 1),
results = []
for (var k in obj) if (obj.hasOwnProperty(k)) {
v = obj[k]
if (blurgh(v, rest)) {
results.push(v)
}
}
return results
}  

This  above  is  an  one-­‐liner  in  CoffeeScript:  

frob = (obj, rest...) -> [v for v of obj if blurgh(v, rest)]  

source  
Extended  usage  of  CoffeeScript  
Domain  Specific  Languages  
(DSL)  
Ac1veRecord’s  DSL  in  CoffeeScript  
Rails  Ac1veRecord  DSL  lets  you  easily    
express  rela1onships  between  model  classes  

class Post extends ActiveRecord

has_many: 'comments’


class Comment extends ActiveRecord
belongs_to: 'post'  
 Sinatra’s  DSL  in  CoffeeScript  
Sinatra  is  a  popular  Ruby  web  framework  and  DSL  
for  crea1ng  web  applica1ons.  

get '/helloWorld/:name', (name) ->

"Hello #{ name }"  
 Rake’s  DSL  in  CoffeeScript  
Rake  is  Ruby’s  make  system  –  it’s  also  a  DSL.  

task "kill_hal", ->

alert "I am sorry Dave, I'm afraid I can't do that"  
 CoffeeScript  features  in  ES.next?  
•  Following  features  could  be  added  to  ES.next:  
–  let  iden1ty  =  (x)  -­‐>  x  
–  callback  =  (msg)  =>  this.vmail.push(msg)  
–  CoffeeScript  inheritance  
–  @foo  for  this.foo  
–  if  x  >  y  return  x    (Op1onal  parenthesis)  

•  Source:  Brendan’s  JS.conf  talk    

 External  Links  
•  The  official  CoffeeScript  page  
hDp://jashkenas.github.com/coffee-­‐script/  
 
•  CoffeeScript’s  annotated  source  code…  Beau1ful  
hDp://jashkenas.github.com/coffee-­‐script/documenta1on/docs/grammar.html  
 
•  CoffeeScript’s  community  hangs  around  GitHub  
hDps://github.com/languages/CoffeeScript  

•  My  blog  posts  on  JavaScript  and  CoffeeScript  

hDp://amix.dk/blog/label/11#JavaScript  
Ques1ons?