Much Ado About CoffeeScript

CoffeeScript will ship with Rails 3.1 to replace RJS as the preferred way to dynamically generate JavaScript. It's a new language that take the best parts of Ruby, Python, and others to ease the worst parts of JavaScript. More than being the new kid on the Rails block however, CoffeeScript is mind-expanding in ways that will make you remember the first time you ever gave Ruby a try. This presentation will take you through the basics of CoffeeScript, starting with a crash course in syntax, all the way to a working application.

Transcript

1. Agile Development With RJS For Ninja Rockstars
2. Much Ado About CoffeeScript Mattt Thompson (@mattt) Lone Star Ruby Conf V
3. 3.1
4. Sass CoffeeScript
5. Sass → CSS $blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue .content-navigation { border-color: #3bbfce; color: #2ca2af; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }
6. CoffeeScript → JavaScript Account = (customer, cart) -> @customer = customer @cart = cart $('.shopping_cart').bind ↩ 'click', (event) => @customer.purchase @cart var Account; var __bind = function(fn, me) { return function(){ return fn.apply(me, arguments); }; }; Account = function(customer, cart) { this.customer = customer; this.cart = cart; return $ ('.shopping_cart').bind('click', __bind(function(event) { return this.customer.purchase(this.cart); }, this)); };
7. • Installation • Integration With Rails • Syntax • Features Introducing CoffeeScript What We’ll Cover
8. Installation
9. CoffeeScript
10. “It’s just Javascript”
12. • Less Syntactic Cruft
13. • Less Syntactic Cruft • JavaScript Design Patterns are Features of CoffeeScript
16. $ homebrew install node
18. $ curl http://npmjs.org/install.sh | sh
19. $ npm install -g coffee-script
20. $ coffee
24. Integration With Rails
25. gem 'rails', '3.1.0rc5'
26. app/ assets/ javascripts/ store.js.coffee
27. Syntax
28. jQuery(function() { $("#title").show(); });
29. jQuery function() $("#title").show()
30. jQuery -> $("#title").show()
31. Store.prototype.add = function(item) { this.items.push(item); }
32. Store.prototype.add = function(item) this.items.push(item)
33. Store.prototype.add = function(item) @items.push(item)
34. add: function(item) @items.push(item)
35. add: -> (item) @items.push(item)
36. add: (item) -> @items.push(item)
38. • Redundant Punctuation Omitted
39. • Redundant Punctuation Omitted • function becomes ->
40. • Redundant Punctuation Omitted • function becomes -> • this. becomes @
41. • Redundant Punctuation Omitted • function becomes -> • this. becomes @ • {} becomes ⇥
42. Features
45. Class Pattern 1
46. class Animal constructor: (name) -> @name = name
47. var Animal; Animal = (function() { function Animal(name) { this.name = name; } return Animal; })();
48. 2 Lexical Scoping (No Global Variables)
49. window.Animal = class Animal constructor: (name) -> @name = name
50. Default Arguments 3
51. window.Animal = class Animal constructor: (name = "Unknown") -> @name = name
52. String Interpolation 4
53. class Bear extends Animal constructor: (name) -> @name = "#{name}, the Bear"
54. Conditional Suffixes 5
55. @price = amount if amount > 0.00
56. Operator Aliases 6
57. @lovesTacos = false unless @name is "Mattt"
58. CoffeeScript JavaScript is === isnt !== not ! and && or || true, yes, on true @, this this of in in N/A
59. 7 Deconstructing Assignment
60. [dollars, cents] = input.match /(\d+)/g
61. Existential Operator 8
62. ?
63. [dollars, cents] = (input.match /(\d+)/g) ? [0, 0]
64. Splats 9
65. gold, silver, bronze, rest = "" awardMedals = (first, second, third, others...) -> gold = first silver = second bronze = third rest = others pieEatingCompetitors = [ "Wynn Netherland", "Steve Klabnik", "Adam Keys", "Richard Schneeman", "Rob Mack", "Tim Tyrrell", "Steve Stedman", "Mando Escamilla", "Keith Gaddis" ] awardMedals pieEatingCompetitors...
66. List Comprehensions 10
67. eat food for food in ['toast', 'cheese', 'wine']
68. eat food for food in ['toast', 'cheese', 'wine'] ↩ when food is "toast"
69. languages = { "Javascript": 3, "CoffeeScript": 9, "Ruby": 9, "Python": 6, "Objective-C": 7, "Potion": 10 } favorites = language for language, awesomeness of ↩ languages when awesomeness >= 7
70. • Installation • Integration With Rails • Syntax • Features Introducing CoffeeScript What We’ve Covered So Far
74. “a little language”
75. Web 2.0: A History
76. 1995 Ruby Created by Matz JavaScript Created by Brendan Eich
77. 2005 Ruby Rails created by DHH JavaScript AJAX coined by Jesse James Garret
78. 2006 Ruby RJS shipped with Rails 1.2 JavaScript jQuery 1.0 is released by John Resig
79. page.insert_html :bottom, 'list', content_tag("li", "Fox") page.visual_effect :highlight, 'list', :duration => 3 page.replace_html 'header', 'RJS: Great Success!'
80. 2007 Ruby Era of competing Ruby implementations (MRI, YARV, Rubinius, JRuby) JavaScript Era of competing JavaScript frameworks (Prototype, jQuery, dojo, MooTools, YUI)
81. 2008 Ruby Cartoon Foxes JavaScript Unicorns
82. 2009 Ruby Ruby 1.9 released JavaScript Node.js created by Ryan Dahl
83. 2010 Ruby CoffeeScript JavaScript CoffeeScript
84. ♕ KEEP CALM AND CARRY ON
85. ⽂ WAKE UP AND SMELL THE COFFEE
86. FORGET THAT AND FREAK OUT ♕
87. ⚒ GET EXCITED AND MAKE THINGS
88. Much Ado About CoffeeScript Mattt Thompson (@mattt) Lone Star Ruby Conf V