Successfully reported this slideshow.

"Coffee Script" in Brief

1,139 views

Published on

Original Presentation "Much Ado About CoffeeScript - LSRC V" By Mattt Thompson => http://www.slideshare.net/matttthompson/much-ado-about-coffeescript-lsrc-v

Published in: Technology, Business
  • Be the first to like this

"Coffee Script" in Brief

  1. 1. Much Ado About CoffeeScriptMattt Thompson (@mattt)Lone Star Ruby Conf V
  2. 2. SassCoffeeScript
  3. 3. Sass → CSS$blue: #3bbfce .content-navigation {$margin: 16px border-color: #3bbfce; color: #2ca2af; }.content-navigation border-color: $blue .border { color: darken($blue, 9%) padding: 8px; margin: 8px;.border border-color: #3bbfce; } padding: $margin / 2 margin: $margin / 2 border-color: $blue
  4. 4. CoffeeScript → JavaScript var Account;Account = (customer, cart) -> var __bind = function(fn, me) @customer = customer { return function(){ return @cart = cart fn.apply(me, arguments); }; }; Account = function(customer, cart) { $(.shopping_cart).bind ↩ this.customer = customer;click, (event) => this.cart = cart; return $ @customer.purchase @cart (.shopping_cart).bind(click, __bind(function(event) { return this.customer.purchase(this.cart); }, this)); };
  5. 5. CoffeeScript
  6. 6. “It’s just Javascript”
  7. 7. • Less Syntactic Cruft• JavaScript Design Patterns are Features of CoffeeScript
  8. 8. Syntax
  9. 9. jQuery(function() { $("#title").show();});
  10. 10. jQuery function() $("#title").show()
  11. 11. jQuery -> $("#title").show()
  12. 12. Store.prototype.add = function(item) { this.items.push(item);}
  13. 13. Store.prototype.add = function(item) this.items.push(item)
  14. 14. Store.prototype.add = function(item) @items.push(item)
  15. 15. add: function(item) @items.push(item)
  16. 16. add: -> (item) @items.push(item)
  17. 17. add: (item) -> @items.push(item)
  18. 18. • Redundant Punctuation Omitted• function becomes ->• this. becomes @• {} becomes ⇥
  19. 19. Features
  20. 20. 1Class Pattern
  21. 21. class Animal constructor: (name) -> @name = name
  22. 22. var Animal;Animal = (function() { function Animal(name) { this.name = name; } return Animal;})();
  23. 23. 2Lexical Scoping(No Global Variables)
  24. 24. window.Animal = class Animal constructor: (name) -> @name = name
  25. 25. 3Default Arguments
  26. 26. window.Animal = class Animal constructor: (name = "Unknown") -> @name = name
  27. 27. 4String Interpolation
  28. 28. class Bear extends Animal constructor: (name) -> @name = "#{name}, the Bear"
  29. 29. 5Conditional Suffixes
  30. 30. @price = amount if amount > 0.00
  31. 31. 6Operator Aliases
  32. 32. @lovesTacos = false unless @name is "Mattt"
  33. 33. CoffeeScript JavaScript is === isnt !== not ! and && or ||true, yes, on true @, this this of in in N/A
  34. 34. 7Deconstructing Assignment
  35. 35. [dollars, cents] = input.match /(d+)/g
  36. 36. 8Existential Operator
  37. 37. ?
  38. 38. [dollars, cents] = (input.match /(d+)/g) ? [0, 0]
  39. 39. 9Splats
  40. 40. gold, silver, bronze, rest = ""awardMedals = (first, second, third, others...) -> gold = first silver = second bronze = third rest = otherspieEatingCompetitors = [ "Wynn Netherland", "Steve Klabnik", "Adam Keys", "Richard Schneeman", "Rob Mack", "Tim Tyrrell", "Steve Stedman", "Mando Escamilla", "Keith Gaddis"]awardMedals pieEatingCompetitors...
  41. 41. 10List Comprehensions
  42. 42. eat food for food in [toast, cheese, wine]
  43. 43. eat food for food in [toast, cheese, wine] ↩ when food is "toast"
  44. 44. languages = { "Javascript": 3, "CoffeeScript": 9, "Ruby": 9, "Python": 6, "Objective-C": 7, "Potion": 10}favorites = language for language, awesomeness of ↩ languages when awesomeness >= 7

×