"Coffee Script" in Brief
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

"Coffee Script" in Brief

on

  • 1,066 views

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

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

Statistics

Views

Total Views
1,066
Views on SlideShare
1,065
Embed Views
1

Actions

Likes
0
Downloads
8
Comments
1

1 Embed 1

http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Original Presentation 'Much Ado About CoffeeScript - LSRC V' By Mattt Thompson => http://www.slideshare.net/matttthompson/much-ado-about-coffeescript-lsrc-v
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

"Coffee Script" in Brief Presentation Transcript

  • 1. Much Ado About CoffeeScriptMattt Thompson (@mattt)Lone Star Ruby Conf V
  • 2. SassCoffeeScript
  • 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. 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. CoffeeScript
  • 6. “It’s just Javascript”
  • 7. • Less Syntactic Cruft• JavaScript Design Patterns are Features of CoffeeScript
  • 8. Syntax
  • 9. jQuery(function() { $("#title").show();});
  • 10. jQuery function() $("#title").show()
  • 11. jQuery -> $("#title").show()
  • 12. Store.prototype.add = function(item) { this.items.push(item);}
  • 13. Store.prototype.add = function(item) this.items.push(item)
  • 14. Store.prototype.add = function(item) @items.push(item)
  • 15. add: function(item) @items.push(item)
  • 16. add: -> (item) @items.push(item)
  • 17. add: (item) -> @items.push(item)
  • 18. • Redundant Punctuation Omitted• function becomes ->• this. becomes @• {} becomes ⇥
  • 19. Features
  • 20. 1Class Pattern
  • 21. class Animal constructor: (name) -> @name = name
  • 22. var Animal;Animal = (function() { function Animal(name) { this.name = name; } return Animal;})();
  • 23. 2Lexical Scoping(No Global Variables)
  • 24. window.Animal = class Animal constructor: (name) -> @name = name
  • 25. 3Default Arguments
  • 26. window.Animal = class Animal constructor: (name = "Unknown") -> @name = name
  • 27. 4String Interpolation
  • 28. class Bear extends Animal constructor: (name) -> @name = "#{name}, the Bear"
  • 29. 5Conditional Suffixes
  • 30. @price = amount if amount > 0.00
  • 31. 6Operator Aliases
  • 32. @lovesTacos = false unless @name is "Mattt"
  • 33. CoffeeScript JavaScript is === isnt !== not ! and && or ||true, yes, on true @, this this of in in N/A
  • 34. 7Deconstructing Assignment
  • 35. [dollars, cents] = input.match /(d+)/g
  • 36. 8Existential Operator
  • 37. ?
  • 38. [dollars, cents] = (input.match /(d+)/g) ? [0, 0]
  • 39. 9Splats
  • 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. 10List Comprehensions
  • 42. eat food for food in [toast, cheese, wine]
  • 43. eat food for food in [toast, cheese, wine] ↩ when food is "toast"
  • 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