COFFEESCRIPT    Bye, Javascript.
Jean-Hadrien Chabran          @jhchabran         CTO / Kareea                       Tutorys.com
HTML ...<div id="profile">  <div class="left column">     <div id="date"><%= print_date %></div>     <div id="address"><%=...
HAML !#profile  .left.column    #date= print_date    #address=current_user.address  .right.column    #email=current_user.e...
CSS ....content-navigation {  border-color: #3bbfce;  color: #2b9eab;}.border {  padding: 8px;  margin: 8px;  border-color...
SCSS !$blue: #3bbfce;$margin: 16px;.content-navigation {  border-color: $blue;  color:    darken($blue, 9%);}.border {  pa...
Légère surcouche                     Adoption !Facile à apprendre
Javascript             ?
CoffeeScript
Mais c’est un apéro Ruby !
Yes, it’s true, Rails 3.1 is going toship with CoffeeScript and SCSS  in the box for use with the new     asset pipeline. ...
C’est juste du Javascript !  $(function() {    $("body").html("Une merguez ?");  });
C’est juste du Javascript !  $ ->    $("body").html "Une merguez ?"
C’est juste du Javascript !    $(.articles).each(function(article)      var items;      items = $(article).children();    ...
C’est juste du Javascript !    $(.articles).each (article)->      items = $(article).children()      $(items).show()
10Raisons
->items.each (item)->  item.click (event)->     item.hide()                         1
->items.each(function(item) {  return item.click(function(event) {    return item.hide();  });});                         ...
sucre syntaxique    @life = 42 this.life = 42;                   2
sucre syntaxiqueunless   bigTroll  ...if(!bigTroll) {...}                    2
sucre syntaxiquename = “bat”“We can´t stop here, this is#{name} country!”                          2
return implicitecompute = (articles, couponPercent) ->  total = articles.map (article) ->    article.price total * ( 1 - c...
return implicitevar compute;compute = function(articles, couponPercent)   var total;   total = articles.map(function(artic...
Au revoir varlastClick = 0$(‘a’).click -> now = new Date().getTime() if now - lastClick > 100   $(‘#message’).show()      ...
Au revoir varvar lastClick = 0$(‘a’).click -> var now = new Date().getTime() if now - lastClick > 100   $(‘#message’).show...
== 0           // false     0 ==              // true     0 == 0            // true     false == false    // false     fal...
==   ===Comparaisons   5
==   ===Comparaisons   5
==           ===     Pas de conversion de typeComparaisons
whitespaces.if (url) {  $.get(url, function(data) {    return $("#result").html(data);  });} else {  $("#error").show();} ...
whitespaces.if url  $.get url, (data) ->    $("#result").html dataelse  $("#error").show()                             6
server.listen(function(request, response) {  database.open(function(connection) {    connection.query("SELECT * FROM posts...
server.listen(function(request, response) {  database.open(function(connection) {    connection.query("SELECT * FROM posts...
server.listen(function(request, response) {  database.open(function(connection) {    connection.query("SELECT * FROM posts...
luxe, calme et voluptéserver.listen (request, response) ->  database.open (connection) ->    connection.query "SELECT * FR...
objectskids =  brother:    name: "Max"    age: 11  sister:    name: "Ida"    age: 9                  7
objectskids = {   brother: {      name: "Max",      age: 11   },   sister: {      name: "Ida",};   }      age: 9          ...
for x in [...]eat food for food in [toast,cheese, wine]                                 8
list comprehensionsvar food, _i, _len, _ref;_ref = [toast, cheese, wine];for (_i = 0, _len = _ref.length; _i < _len; _i  f...
Tout est          une    Expression9
Expressioncountdown = (num for num in [10..1])countdown = [10,9,8,7,6,5,4,3,2,1]
ExpressionyearsOld = max: 10, ida: 9, tim: 11ages = for child, age of yearsOld  "#{child} is #{age}"[“max is 10”,”ida is 9...
Expressiongrade = (student) ->  if student.excellentWork    "A+"  else if student.okayStuff    if student.triedHard then "...
Expressionvar grade;grade = function(student) {  if (student.excellentWork) {    return "A+";  } else if (student.okayStuf...
10     WTF ?@css = color:red$.get this.url, (data)->  @el.css @css
10        WTF ?this.css = {   color: red};$.get(this.url, function(data) {   return this.el.css(this.css);});
Mais pourquoi this ça marchebizarre dans les   functions ?
ah bah oui, this ici   c’est window
ah bah oui, this ici   c’est window
ah bah oui, this ici   c’est window Logique hein ?
-
this </3 ... bind !this.css = {   color: red};$.get(this.url, (function(data){   return this.el.css(this.css);}).bind(this...
=>@css = color:red$.get this.url, (data)=>  @el.css @css
Github Drama.
Inclus par défaut dans le         Gemfile
C’est un toy language ! C’est pas un langage       sérieux !
It’s justjavascript !
Pyjamas, GWT, Objective-J...        Code infâme
It’s justjavascript !
Et mes librairies ?      JQuery, Backbone, Zepto ...
It’s justjavascript !
Comment on l’installe ?        Rails 3.1    gem ‘coffee-rails’
et bien d’autres joyeusetés• Class•alert(lesPompiers)           if yaLeFeu()• destructuring assignments• people[1..4]• les...
par contre ...• () optionnelles sur les appels de fonctions • @compute 1,2 -> this.compute(1,2) • @compute -> this.compute
Questions ?
Questions ?
• Screencasts sur Office, Twitter, AppStore,  AdWords...• Beta privée• pour vos proches pas informaticiens !• ya de l’invit...
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
Introduction à CoffeeScript pour ParisRB
Upcoming SlideShare
Loading in …5
×

Introduction à CoffeeScript pour ParisRB

2,498 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,498
On SlideShare
0
From Embeds
0
Number of Embeds
623
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \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
  • Introduction à CoffeeScript pour ParisRB

    1. 1. COFFEESCRIPT Bye, Javascript.
    2. 2. Jean-Hadrien Chabran @jhchabran CTO / Kareea Tutorys.com
    3. 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. 4. HAML !#profile .left.column #date= print_date #address=current_user.address .right.column #email=current_user.email #bio= current_user.bio
    5. 5. CSS ....content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
    6. 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. 7. Légère surcouche Adoption !Facile à apprendre
    8. 8. Javascript ?
    9. 9. CoffeeScript
    10. 10. Mais c’est un apéro Ruby !
    11. 11. Yes, it’s true, Rails 3.1 is going toship with CoffeeScript and SCSS in the box for use with the new asset pipeline. It’s bad ass.
    12. 12. C’est juste du Javascript ! $(function() { $("body").html("Une merguez ?"); });
    13. 13. C’est juste du Javascript ! $ ->   $("body").html "Une merguez ?"
    14. 14. C’est juste du Javascript ! $(.articles).each(function(article) var items; items = $(article).children(); return $(items).show(); });
    15. 15. C’est juste du Javascript ! $(.articles).each (article)-> items = $(article).children() $(items).show()
    16. 16. 10Raisons
    17. 17. ->items.each (item)-> item.click (event)-> item.hide() 1
    18. 18. ->items.each(function(item) { return item.click(function(event) { return item.hide(); });}); 1
    19. 19. sucre syntaxique @life = 42 this.life = 42; 2
    20. 20. sucre syntaxiqueunless bigTroll ...if(!bigTroll) {...} 2
    21. 21. sucre syntaxiquename = “bat”“We can´t stop here, this is#{name} country!” 2
    22. 22. return implicitecompute = (articles, couponPercent) -> total = articles.map (article) -> article.price total * ( 1 - couponPercent ) 3
    23. 23. return implicitevar compute;compute = function(articles, couponPercent) var total; total = articles.map(function(article) { return article.price; }); return total * (1 - couponPercent);}; 3
    24. 24. Au revoir varlastClick = 0$(‘a’).click -> now = new Date().getTime() if now - lastClick > 100 $(‘#message’).show() 4 lastClick = now
    25. 25. Au revoir varvar lastClick = 0$(‘a’).click -> var now = new Date().getTime() if now - lastClick > 100 $(‘#message’).show() 4 lastClick = now
    26. 26. == 0           // false 0 ==             // true 0 == 0            // true false == false    // false false == 0        // true false == undefined  // false false == null       // false null == undefined   // true trn == 0     // trueComparaisons
    27. 27. == ===Comparaisons 5
    28. 28. == ===Comparaisons 5
    29. 29. == === Pas de conversion de typeComparaisons
    30. 30. whitespaces.if (url) { $.get(url, function(data) { return $("#result").html(data); });} else { $("#error").show();} 6
    31. 31. whitespaces.if url  $.get url, (data) ->    $("#result").html dataelse  $("#error").show() 6
    32. 32. 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 });});
    33. 33. 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; })); }); }); });});
    34. 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; })); }); }); });});
    35. 35. 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
    36. 36. objectskids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 7
    37. 37. objectskids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida",}; } age: 9 7
    38. 38. for x in [...]eat food for food in [toast,cheese, wine] 8
    39. 39. list comprehensionsvar food, _i, _len, _ref;_ref = [toast, cheese, wine];for (_i = 0, _len = _ref.length; _i < _len; _i food = _ref[_i]; eat(food);} 8
    40. 40. Tout est une Expression9
    41. 41. Expressioncountdown = (num for num in [10..1])countdown = [10,9,8,7,6,5,4,3,2,1]
    42. 42. ExpressionyearsOld = max: 10, ida: 9, tim: 11ages = for child, age of yearsOld "#{child} is #{age}"[“max is 10”,”ida is 9”,”tim is 11”]
    43. 43. Expressiongrade = (student) -> if student.excellentWork "A+" else if student.okayStuff if student.triedHard then "B" else "B-" else "C"
    44. 44. Expressionvar grade;grade = function(student) { if (student.excellentWork) { return "A+"; } else if (student.okayStuff) { if (student.triedHard) { return "B"; } else { return "B-"; } } else { return "C"; }
    45. 45. 10 WTF ?@css = color:red$.get this.url, (data)-> @el.css @css
    46. 46. 10 WTF ?this.css = { color: red};$.get(this.url, function(data) { return this.el.css(this.css);});
    47. 47. Mais pourquoi this ça marchebizarre dans les functions ?
    48. 48. ah bah oui, this ici c’est window
    49. 49. ah bah oui, this ici c’est window
    50. 50. ah bah oui, this ici c’est window Logique hein ?
    51. 51. -
    52. 52. this </3 ... bind !this.css = { color: red};$.get(this.url, (function(data){ return this.el.css(this.css);}).bind(this));
    53. 53. =>@css = color:red$.get this.url, (data)=> @el.css @css
    54. 54. Github Drama.
    55. 55. Inclus par défaut dans le Gemfile
    56. 56. C’est un toy language ! C’est pas un langage sérieux !
    57. 57. It’s justjavascript !
    58. 58. Pyjamas, GWT, Objective-J... Code infâme
    59. 59. It’s justjavascript !
    60. 60. Et mes librairies ? JQuery, Backbone, Zepto ...
    61. 61. It’s justjavascript !
    62. 62. Comment on l’installe ? Rails 3.1 gem ‘coffee-rails’
    63. 63. et bien d’autres joyeusetés• Class•alert(lesPompiers) if yaLeFeu()• destructuring assignments• people[1..4]• les autres opérateurs • ?, in, of
    64. 64. par contre ...• () optionnelles sur les appels de fonctions • @compute 1,2 -> this.compute(1,2) • @compute -> this.compute
    65. 65. Questions ?
    66. 66. Questions ?
    67. 67. • Screencasts sur Office, Twitter, AppStore, AdWords...• Beta privée• pour vos proches pas informaticiens !• ya de l’invite si vous voulez :)• contact@kareea.com

    ×