Webmontag Berlin "coffee script"

Everybody  loves  coffee,  right?  

Today,  Everybody  loves  JavaScript,  right?  

•  JavaScript  revival  •  Node.js  •  One-­‐Page  applica@ons  •  Real@me  applica@ons  

Some  things  I  like  about  CoffeeScript  

1.  FUNCTION  SYNTAX  

1.  FUNCTION  SYNTAX  

function  greet(name)  {    return  ”Hello  ”  +  name  

}  

1.  FUNCTION  SYNTAX  

greet  =  (name)  -­‐>    ”Hello  ”  +  name  

1.  FUNCTION  SYNTAX  

$(”a”).click(function(event)  {    $(this).addClass(”busy”);  

});  

1.  FUNCTION  SYNTAX  

$(”a”).click  (event)  -­‐>    $(this).addClass  ”busy”  

2.  SIGNIFICANT  WHITESPACE  

2.  SIGNIFICANT  WHITESPACE  

if(url)  {    $.get(url,  function(data)  {      return  $(”#result”).html(data);    });  

}  else  {    $(”#error“).show();  

}  

2.  SIGNIFICANT  WHITESPACE  

if  url    $.get  url,  (data)  -­‐>      $(”#result”).html  data  

else    $(”#error“).show()  

2.  SIGNIFICANT  WHITESPACE  

if(url)  {    $.get(url,  function(data)  {      return  $(”#result”).html(data);    });  

}  else  {    $(”#error“).show();  

}  

2.  SIGNIFICANT  WHITESPACE  

var  response  =  function(callback)  {    return  $.get("/data.php",  function(data,  textStatus)  {      if(textStatus  ==  200)  {        return  data.toUpperCase();      }      else  {        return  callback(data);      }    }  

};  

2.  SIGNIFICANT  WHITESPACE  

response  =  (callback)  -­‐>    $.get  "/data.php",  (data,  textStatus)  -­‐>      if  textStatus  ==  200        data.toUpperCase()      else        callback(data)  

3.  BARE  OBJECTS  

var  student  =  {    name:  ”Sebastian”,    age:  21,    hobbies:  [”drums”,  ”programming”]  

}  

3.  BARE  OBJECTS  

student  =    name:  ”Sebastian”    age:  21    hobbies:  [”drums”,  ”programming”]  

4.  COMPREHENSIONS  

var  squares  =  []    for(var  i  =  0;  i  <  100;  i++)  {  

 squares.push(i  *  i);  }  

4.  COMPREHENSIONS  

squares  =  []    for  i  in  [0..100]  

 squares.push  i  *  i  

4.  COMPREHENSIONS  

squares  =  (i  *  i  for  i  in  [0..100])  

4.  COMPREHENSIONS  

squares  =  (i  *  i  for  i  in  [0..100]  when  i  %  2  is  0)  

4.  COMPREHENSIONS  

var  i,  squares;  squares  =  (function()  {      var  _results;      _results  =  [];      for  (i  =  0;  i  <=  100;  i++)  {          if  (i  %  2  ===  0)  {              _results.push(i  *  i);          }      }      return  _results;  })();  

5.  FUNCTION  BINDING  

$(”a”).click(function()  {    $.get(”/data.php”,  (function(data,  responseText)  {      $(this).html(data);    }).bind(this));  

});  

5.  FUNCTION  BINDING  

$(”a”).click  -­‐>    $.get  ”/data.php”,  (data,  responseText)  =>      $(this).html  data  

6.  STRING  SYNTAX  

$(”#elements”).append(    ”<li  class=’entry’>”  +  data.name  +  ”</li>”  

);  

6.  STRING  SYNTAX  

$(”#elements”).append  ”<li  class=’entry’>#{data.name}</li>”  

6.  STRING  SYNTAX  

render  (student)  -­‐>    ”””      <div  class=”student”>        <a  href=”/student/#{student.id}”>          <span>#{student.name}</span>        </a>      </div>    ”””  

There  is  lots  more:  

hHp://coffeescript.org  

Sebas@an  Hoitz  -­‐  @sebas@anhoitz  –  hHp://suplify.me  

Classes,  existen@al  operator,  destructuring  assignment,  …