Scribd
Upload
12K views

CoffeeScript - The Beautiful Way To Write Javascript

A short presentation about CoffeeScript and how it enables you to create more beautiful JavaScript code. Link to the presentation: http://amix.dk/blog/post/19624#Presentation-CoffeeScript-The-Beautiful-Way-to-Write-Javascript

Uploaded by

Amir Salihefnedic
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
12K views

CoffeeScript - The Beautiful Way To Write Javascript

A short presentation about CoffeeScript and how it enables you to create more beautiful JavaScript code. Link to the presentation: http://amix.dk/blog/post/19624#Presentation-CoffeeScript-The-Beautiful-Way-to-Write-Javascript

Uploaded by

Amir Salihefnedic
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

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?  

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy