More Related Content Similar to Introduction à CoffeeScript pour ParisRB Similar to Introduction à CoffeeScript pour ParisRB (20) Introduction à CoffeeScript pour ParisRB 3. HTML ...
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%= current_user.address
%></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></
div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
4. HAML !
#profile
.left.column
#date= print_date
#address=
current_user.address
.right.column
#email=
current_user.email
#bio= current_user.bio
6. SCSS !
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
12. Yes, it’s true, Rails 3.1 is going to
ship with CoffeeScript and SCSS
in the box for use with the new
asset pipeline. It’s bad ass.
13. C’est juste du Javascript !
$(function() {
$("body").html("Une merguez ?");
});
15. C’est juste du Javascript !
$('.articles').each(function(article)
var items;
items = $(article).children();
return $(items).show();
});
16. C’est juste du Javascript !
$('.articles').each (article)->
items = $(article).children()
$(items).show()
24. return implicite
compute = (articles, couponPercent) ->
total = articles.map (article) ->
article.price
total * ( 1 - couponPercent )
3
25. return implicite
var compute;
compute = function(articles, couponPercent)
var total;
total = articles.map(function(article) {
return article.price;
});
return total * (1 - couponPercent);
};
3
26. Au revoir var
lastClick = 0
$(‘a’).click ->
now = new Date().getTime()
if now - lastClick > 100
$(‘#message’).show()
4
lastClick = now
27. Au revoir var
var lastClick = 0
$(‘a’).click ->
var now = new Date().getTime()
if now - lastClick > 100
$(‘#message’).show()
4
lastClick = now
28. '' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' trn ' == 0 // true
Comparaisons
29. == ===
Comparaisons 5
30. == ===
Comparaisons 5
31. == ===
Pas de conversion de type
Comparaisons
32. whitespaces.
if (url) {
$.get(url, function(data) {
return $("#result").html(data);
});
} else {
$("#error").show();
}
6
34. server.listen(function(request, response) {
database.open(function(connection) {
connection.query("SELECT * FROM posts",
function(cursor) {
cursor.fetchAll(function(posts) {
response.write(posts.forEach(function(post) {
return post.title;
}));
});
});
6
});
});
35. server.listen(function(request, response) {
database.open(function(connection) {
connection.query("SELECT * FROM posts",
function(cursor) {
cursor.fetchAll(function(posts) {
response.write(posts.forEach(function(post) {
return post.title;
}));
});
});
});
});
36. server.listen(function(request, response) {
database.open(function(connection) {
connection.query("SELECT * FROM posts",
function(cursor) {
cursor.fetchAll(function(posts) {
response.write(posts.forEach(function(post) {
return post.title;
}));
});
});
});
});
37. luxe, calme et volupté
server.listen (request, response) ->
database.open (connection) ->
connection.query "SELECT * FROM posts", (cu
cursor.fetchAll (posts) ->
response.write posts.forEach (post) ->
post.title
38. objects
kids =
brother:
name: "Max"
age: 11
sister:
name: "Ida"
age: 9
7
39. objects
kids = {
brother: {
name: "Max",
age: 11
},
sister: {
name: "Ida",
};
}
age: 9
7
40. for x in [...]
eat food for food in ['toast',
'cheese', 'wine']
8
41. list comprehensions
var food, _i, _len, _ref;
_ref = ['toast', 'cheese', 'wine'];
for (_i = 0, _len = _ref.length; _i < _len; _i
food = _ref[_i];
eat(food);
}
8
44. Expression
yearsOld = max: 10, ida: 9, tim: 11
ages = for child, age of yearsOld
"#{child} is #{age}"
[“max is 10”,”ida is 9”,”tim is 11”]
45. Expression
grade = (student) ->
if student.excellentWork
"A+"
else if student.okayStuff
if student.triedHard then "B"
else "B-"
else
"C"
46. Expression
var grade;
grade = function(student) {
if (student.excellentWork) {
return "A+";
} else if (student.okayStuff) {
if (student.triedHard) {
return "B";
} else {
return "B-";
}
} else {
return "C";
}
47. 10 WTF ?
@css = color:red
$.get this.url, (data)->
@el.css @css
48. 10 WTF ?
this.css = {
color: red
};
$.get(this.url, function(data) {
return this.el.css(this.css);
});
54. this </3 ... bind !
this.css = {
color: red
};
$.get(this.url, (function(data)
{
return this.el.css(this.css);
}).bind(this));
70. et bien d’autres joyeusetés
• Class
•alert(lesPompiers) if yaLeFeu()
• destructuring assignments
• people[1..4]
• les autres opérateurs
• ?, in, of
71. par contre ...
• () optionnelles sur les appels de fonctions
• @compute 1,2 -> this.compute(1,2)
• @compute -> this.compute
74. • Screencasts sur Office, Twitter, AppStore,
AdWords...
• Beta privée
• pour vos proches pas informaticiens !
• ya de l’invite si vous voulez :)
• contact@kareea.com
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n