webmontag berlin "coffee script"
DESCRIPTION
TRANSCRIPT
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, …