1. COFFEESCRIPT
Bye, Javascript.

2. Jean-Hadrien Chabran
@jhchabran
CTO / Kareea
Tutorys.com

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

5. CSS ...
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

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;
}

7. Légère surcouche
Adoption !
Facile à apprendre

8. Javascript
?

9. CoffeeScript

10. Mais c’est un apéro Ruby !

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 ?");
});

14. C’est juste du Javascript !
$ ->
$("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()

18. 10
Raisons

19. ->
items.each (item)->
item.click (event)->
item.hide()
1

20. ->
items.each(function(item) {
return item.click(function(event) {
return item.hide();
});
});
1

21. sucre syntaxique
@life = 42
this.life = 42;
2

22. sucre syntaxique
unless bigTroll
...
if(!bigTroll) {
...
}
2

23. sucre syntaxique
name = “bat”
“We can´t stop here, this is
#{name} country!”
2

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

33. whitespaces.
if url
$.get url, (data) ->
$("#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

42. Tout est
une
Expression
9

43. Expression
countdown = (num for num in [10..1])
countdown = [10,9,8,7,6,5,4,3,2,1]

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);
});

49. Mais pourquoi
this ça marche
bizarre dans les
functions ?

50. ah bah oui, this ici
c’est window

51. ah bah oui, this ici
c’est window

52. ah bah oui, this ici
c’est window
Logique hein ?

53. -

54. this </3 ... bind !
this.css = {
color: red
};
$.get(this.url, (function(data)
{
return this.el.css(this.css);
}).bind(this));

55. =>
@css = color:red
$.get this.url, (data)=>
@el.css @css

56. Github Drama.

57. Inclus par défaut dans le
Gemfile

61. C’est un toy language !
C’est pas un langage
sérieux !

62. It’s just
javascript !

63. Pyjamas, GWT, Objective-J...
Code infâme

64. It’s just
javascript !

65. Et mes librairies ?
JQuery, Backbone, Zepto ...

66. It’s just
javascript !

67. Comment on l’installe ?
Rails 3.1
gem ‘coffee-rails’

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

72. Questions ?

73. Questions ?

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