Your SlideShare is downloading. ×
Introduction à CoffeeScript pour ParisRB
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction à CoffeeScript pour ParisRB

2,089
views

Published on

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,089
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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 !
    • 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. C’est juste du Javascript ! $(function() { $("body").html("Une merguez ?"); });
    • 13. C’est juste du Javascript ! $ ->   $("body").html "Une merguez ?"
    • 14. C’est juste du Javascript ! $(.articles).each(function(article) var items; items = $(article).children(); return $(items).show(); });
    • 15. C’est juste du Javascript ! $(.articles).each (article)-> items = $(article).children() $(items).show()
    • 16. 10Raisons
    • 17. ->items.each (item)-> item.click (event)-> item.hide() 1
    • 18. ->items.each(function(item) { return item.click(function(event) { return item.hide(); });}); 1
    • 19. sucre syntaxique @life = 42 this.life = 42; 2
    • 20. sucre syntaxiqueunless bigTroll ...if(!bigTroll) {...} 2
    • 21. sucre syntaxiquename = “bat”“We can´t stop here, this is#{name} country!” 2
    • 22. return implicitecompute = (articles, couponPercent) -> total = articles.map (article) -> article.price total * ( 1 - couponPercent ) 3
    • 23. return implicitevar compute;compute = function(articles, couponPercent) var total; total = articles.map(function(article) { return article.price; }); return total * (1 - couponPercent);}; 3
    • 24. Au revoir varlastClick = 0$(‘a’).click -> now = new Date().getTime() if now - lastClick > 100 $(‘#message’).show() 4 lastClick = now
    • 25. Au revoir varvar lastClick = 0$(‘a’).click -> var now = new Date().getTime() if now - lastClick > 100 $(‘#message’).show() 4 lastClick = now
    • 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. == ===Comparaisons 5
    • 28. == ===Comparaisons 5
    • 29. == === Pas de conversion de typeComparaisons
    • 30. whitespaces.if (url) { $.get(url, function(data) { return $("#result").html(data); });} else { $("#error").show();} 6
    • 31. whitespaces.if url  $.get url, (data) ->    $("#result").html dataelse  $("#error").show() 6
    • 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. 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. 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. 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. objectskids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 7
    • 37. objectskids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida",}; } age: 9 7
    • 38. for x in [...]eat food for food in [toast,cheese, wine] 8
    • 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. Tout est une Expression9
    • 41. Expressioncountdown = (num for num in [10..1])countdown = [10,9,8,7,6,5,4,3,2,1]
    • 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. Expressiongrade = (student) -> if student.excellentWork "A+" else if student.okayStuff if student.triedHard then "B" else "B-" else "C"
    • 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. 10 WTF ?@css = color:red$.get this.url, (data)-> @el.css @css
    • 46. 10 WTF ?this.css = { color: red};$.get(this.url, function(data) { return this.el.css(this.css);});
    • 47. Mais pourquoi this ça marchebizarre dans les functions ?
    • 48. ah bah oui, this ici c’est window
    • 49. ah bah oui, this ici c’est window
    • 50. ah bah oui, this ici c’est window Logique hein ?
    • 51. -
    • 52. this </3 ... bind !this.css = { color: red};$.get(this.url, (function(data){ return this.el.css(this.css);}).bind(this));
    • 53. =>@css = color:red$.get this.url, (data)=> @el.css @css
    • 54. Github Drama.
    • 55. Inclus par défaut dans le Gemfile
    • 56. C’est un toy language ! C’est pas un langage sérieux !
    • 57. It’s justjavascript !
    • 58. Pyjamas, GWT, Objective-J... Code infâme
    • 59. It’s justjavascript !
    • 60. Et mes librairies ? JQuery, Backbone, Zepto ...
    • 61. It’s justjavascript !
    • 62. Comment on l’installe ? Rails 3.1 gem ‘coffee-rails’
    • 63. et bien d’autres joyeusetés• Class•alert(lesPompiers) if yaLeFeu()• destructuring assignments• people[1..4]• les autres opérateurs • ?, in, of
    • 64. par contre ...• () optionnelles sur les appels de fonctions • @compute 1,2 -> this.compute(1,2) • @compute -> this.compute
    • 65. Questions ?
    • 66. Questions ?
    • 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