CoffeeScript: A New Brew

Ruby developers will find CoffeeScript to be a great alternative to JavaScript, with a lot of familiar language features. This talk introduces CoffeeScript by starting with JavaScript, then ripping out the cruft and ceremony. (WindyCityRails 2011)

Transcript

1. CoffeeScript A New Brew David L Kinney WindyCityRails Chicago 2011
2. My History with JS
3. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
4. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
5. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
6. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
7. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
8. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
9. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
10. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
11. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
12. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
13. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
14. My History with JS 1995 JS released It’s not Applets! YAY! 1996–2003 DHTML fails Meh. 2004–2009 GMail, Google Maps, jQuery Ajax! YAY! Present MVC in the browser Meh.
15. My History with JS Today, I love JavaScript
16. My History with JS Today, I love JavaScript but we can do better
17. What’s Wrong with JS?
18. What’s Wrong with JS?
19. What’s Wrong with JS? 1100 pages
20. What’s Wrong with JS? 1100 pages 176 pages
21. What’s Wrong with JS?
22. What’s Wrong with JS? • function
23. What’s Wrong with JS? • function • return
24. What’s Wrong with JS? • function • return • var
25. What’s Wrong with JS? • function • return • var • ==
26. What’s Wrong with JS? • function • return • var • == • for
27. What’s Wrong with JS? • function • return • var • == • for • prototype-based OO
28. What’s Right with JS?
29. What’s Right with JS? • closures / blocks • namespaces • loosely typed variables • evented instead of threaded
30. Starting Over Today
31. Starting Over Today • Just give me the good parts
32. Starting Over Today • Just give me the good parts • …and improve the expressiveness of business logic
33. Starting Over Today • Just give me the good parts • …and improve the expressiveness of business logic • …but let me interoperate with all the existing great JS libraries
34. Whirlwind Tour
35. Whirlwind Tour intersection = -> { |ary1,ary2| ary1 & ary2 } Ruby
36. Whirlwind Tour var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; }
37. Whirlwind Tour var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; }
38. Whirlwind Tour var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; }
39. var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; } Whirlwind Tour
40. var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; } Whirlwind Tour
41. var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; } Whirlwind Tour X X X X X
42. var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; } Whirlwind Tour X X X X X X X
43. var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; } Whirlwind Tour X X X X X X X X X X X X X
44. var intersection = function(ary1, ary2) { if (ary1.length > ary2.length) { var tmp = ary1; ary1 = ary2; ary2 = tmp; } var out = []; for (var i=0; i<ary1.length; ++i) { var val = ary1[i]; if (ary2.indexOf(val) >= 0) out.push(val); } return out; } Whirlwind Tour X X X X X X X X X X X X X X X X X X
45. Whirlwind Tour intersection = (ary1, ary2) if (ary1.length > ary2.length) tmp = ary1; ary1 = ary2; ary2 = tmp out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out
46. Whirlwind Tour intersection = (ary1, ary2) if (ary1.length > ary2.length) tmp = ary1; ary1 = ary2; ary2 = tmp out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out ->
47. Whirlwind Tour intersection = (ary1, ary2) -> if (ary1.length > ary2.length) tmp = ary1; ary1 = ary2; ary2 = tmp out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out
48. Whirlwind Tour intersection = (ary1, ary2) -> if (ary1.length > ary2.length) tmp = ary1; ary1 = ary2; ary2 = tmp out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out
49. Whirlwind Tour intersection = (ary1, ary2) -> if (ary1.length > ary2.length) tmp = ary1; ary1 = ary2; ary2 = tmp out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out
50. Whirlwind Tour intersection = (ary1, ary2) -> if ary1.length > ary2.length tmp = ary1; ary1 = ary2; ary2 = tmp out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out
51. Whirlwind Tour intersection = (ary1, ary2) -> if ary1.length > ary2.length [ary2,ary1] = [ary1,ary2] out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out
52. Whirlwind Tour intersection = (ary1, ary2) -> out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out if ary1.length > ary2.length [ary2,ary1] = [ary1,ary2]
53. Whirlwind Tour intersection = (ary1, ary2) -> out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out if ary1.length > ary2.lengt [ary2,ary1] = [ary1,ary2]
54. Whirlwind Tour intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out
55. Whirlwind Tour intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l out = [] for (i=0; i<ary1.length; ++i) val = ary1[i] if (ary2.indexOf(val) >= 0) out.push(val) out
56. Whirlwind Tour intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l out = (x for x in ary1 when ary2.indexOf(x) >= 0) out
57. intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l out = (x for x in ary1 when ary2.indexOf(x) >= 0) out Whirlwind Tour ary1.
58. intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l out = (x for x in ary1 when ary2.indexOf(x) >= 0) out Whirlwind Tour select { |x| ary2.indexOf(x) >= 0 }. ary1.
59. intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l out = (x for x in ary1 when ary2.indexOf(x) >= 0) out Whirlwind Tour select { |x| ary2.indexOf(x) >= 0 }. ary1. map { |x| x }
60. Whirlwind Tour intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l out = (x for x in ary1 when ary2.indexOf(x) >= 0) out
61. Whirlwind Tour intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l out = (x for x in ary1 when ary2.indexOf(x) >= 0) out when x in ary2)
62. intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l Whirlwind Tour out = out (x for x in ary1 when x in ary2)
63. intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l Whirlwind Tour (x for x in ary1 when x in ary2)
64. intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l (x for x in ary1 when x in ary2) Whirlwind Tour
65. intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l (x for x in ary1 when x in ary2) Whirlwind Tour
66. intersection = (ary1, ary2) -> [ary2,ary1] = [ary1,ary2] if ary1.length > ary2.l (x for x in ary1 when x in ary2) Whirlwind Tour
67. Whirlwind var intersection; var __indexOf = Array.prototype.indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (this[i] === item) return i; } return -1; }; intersection = function(ary1, ary2) { var x, _i, _len, _ref, _results; if (ary1.length > ary2.l) { _ref = [ary1, ary2], ary2 = _ref[0], ary1 = _ref[1]; } _results = []; for (_i = 0, _len = ary1.length; _i < _len; _i++) { x = ary1[_i]; if (__indexOf.call(ary2, x) >= 0) { _results.push(x); } } return _results; }; JavaScript
68. Functions
69. Functions say_hello = -> "Hello, world" # same as say_hello = -> "Hello, world" # invoked with say_hello()
70. Functions say_hello = -> "Hello, world" # same as say_hello = -> "Hello, world" # invoked with say_hello() // compiles to: var say_hello; say_hello = function() { return "Hello, world"; }; say_hello();
71. Functions say_hello = (name) -> "Hello, #{name}" say_hello("David") say_hello "David"
72. Functions say_hello = (name) -> "Hello, #{name}" say_hello("David") say_hello "David" // compiles to: var say_hello; say_hello = function(name) { return "Hello, " + name; }; say_hello("David"); say_hello("David");
73. Functions Using jQuery show_person = (person) -> $('#firstname').text(person.first_name) $('#lastname').text(person.last_name) $('button').click -> $('#status').text('Clicked')
74. Classes
75. Classes class Person constructor: (first_name, last_name) -> this.first_name = first_name this.last_name = last_name full_name: -> "#{this.first_name} #{this.last_name}"
76. Classes class Person constructor: (first_name, last_name) -> @first_name = first_name @last_name = last_name full_name: -> "#{@first_name} #{@last_name}"
77. Classes class Person constructor: (first_name, last_name) -> @first_name = first_name @last_name = last_name full_name: -> "#{@first_name} #{@last_name}"
78. Classes class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}"
79. Classes class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" // compiles to: var Person; Person = (function() { function Person(first_name, last_name) { this.first_name = first_name; this.last_name = last_name; } Person.prototype.full_name = function() { return "" + this.first_name + " " + this.last_name; }; return Person; })();
80. class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" Classes: Inheritance
81. class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" class Employee extends Person constructor: (first, last, @title) -> super(first, last) full_name: -> "#{super}, #{@title}" Classes: Inheritance
82. class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" class Employee extends Person constructor: (first, last, @title) -> super(first, last) full_name: -> "#{super}, #{@title}" // "class Employee extends Person" compiles to: var Employee; var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; }; Employee = (function() { __extends(Employee, Person); function Employee() { Employee.__super__.constructor.apply(this, arguments); } return Employee; })(); Classes: Inheritance
83. class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" class Employee extends Person constructor: (first, last, @title) -> super(first, last) full_name: -> "#{super}, #{@title}" Classes: Inheritance
84. class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" class Employee extends Person constructor: (first, last, @title) -> super(first, last) full_name: -> "#{super}, #{@title}" employee = new Employee("Tim", "Cook", "CEO") console.log employee.full_name() # prints "Tim Cook, CEO" Classes: Inheritance
85. Classes: Fat Arrow class PersonController constructor: (@person) -> display_person: -> $('#person_name').text(@person.full_name)
86. Classes: Fat Arrow class PersonController constructor: (@person) -> display_person: -> $('#person_name').text(@person.full_name) person = # loaded from server
87. Classes: Fat Arrow class PersonController constructor: (@person) -> display_person: -> $('#person_name').text(@person.full_name) person = # loaded from server controller = new PersonController(person)
88. Classes: Fat Arrow class PersonController constructor: (@person) -> display_person: -> $('#person_name').text(@person.full_name) person = # loaded from server controller = new PersonController(person) $('button').click controller.display_person # FAIL!
89. Classes: Fat Arrow class PersonController constructor: (@person) -> display_person: -> $('#person_name').text(@person.full_name) => person = # loaded from server controller = new PersonController(person) $('button').click controller.display_person # FAIL!
90. Comparisons
91. 1 == '1' // true 1 == '1.0' // true 1 == true // true Comparisons JavaScript
92. 1 == '1' // true 1 == '1.0' // true 1 == true // true Comparisons JavaScript 1 === '1.0' // false 1 === '1' // false
93. 1 == '1' // true 1 == '1.0' // true 1 == true // true Comparisons JavaScript 1 === '1.0' // false 1 === '1' // false 1 is '1' # false 1 is '1.0' # false 1 is true # false 1 is 1 # true 1 is 1.0 # true CoffeeScript
94. is odd = num % 2 is 1 isnt apple_rejection = app_lang isnt "Objective-C" in toddler = age in [1,2,3] not even = not odd and never_true = even and odd or fun = ruby or coffee_script Comparisons
95. Existential Operator typeof person !== "undefined" && person !== null JavaScript
96. Existential Operator typeof person !== "undefined" && person !== null JavaScript person? CoffeeScript
97. Existential Operator $('#name').text(person.full_name) if person? person ?= new Person("David", "Kinney") beneficiary = spouse ? daughter zip = lottery.drawWinner?().address?.zipcode
98. More Features
99. Playing with Prototypes String::dasherize = -> this.replace /_/g, "-"
100. Switch switch day when "Mon" then go work when "Tue" then go relax when "Thu" then go iceFishing when "Fri", "Sat" if day is bingoDay go bingo go dancing when "Sun" then go church else go work
101. try-catch-finally try allHellBreaksLoose() catsAndDogsLivingTogether() catch error print error finally cleanUp()
102. Stuff with Objects yearsOld = alice: 10, bob: 9, charlie: 11 ages = for child, age of yearsOld "#{child} is #{age}"
103. Destructuring Objects futurists = sculptor: "Umberto Boccioni" painter: "Vladimir Burliuk" poet: name: "F.T. Marinetti" address: [ "Via Roma 42R" "Bellagio, Italy 22021" ] # extract name, street, and city {poet: {name, address: [street, city]}} = futurists
104. Rails 3.1
105. Rails 3.1
106. Rails 3.1
107. Rails 3.1
108. Rails 3.1 $ -> more_link = $('<span></span>') more_link.addClass 'more-link' more_link.text 'more' more_link.click -> $('#full-text').slideDown() $('#full-text').before(more_link).hide() app/assets/javascript/more_expander.js.coffee
109. Rails 3.1 class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" app/assets/javascript/person.js.coffee
110. Rails 3.1 class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" app/assets/javascript/person.js.coffee class Employee extends Person constructor: (first, last, @title) -> super(first, last) full_name: -> "#{super}, #{@title}" app/assets/javascript/employee.js.coffee
111. Rails 3.1 class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" app/assets/javascript/person.js.coffee class Employee extends Person constructor: (first, last, @title) -> super(first, last) full_name: -> "#{super}, #{@title}" app/assets/javascript/employee.js.coffee window.Person = Person unless window.Person?
112. Rails 3.1 class Person constructor: (@first_name, @last_name) -> full_name: -> "#{@first_name} #{@last_name}" app/assets/javascript/person.js.coffee class Employee extends Person constructor: (first, last, @title) -> super(first, last) full_name: -> "#{super}, #{@title}" app/assets/javascript/employee.js.coffee window.Person = Person unless window.Person? window.Employee = Employee unless window.Employee?
113. Next Steps Website coffeescript.org PeepCode Screencast peepcode.com/ products/coffeescript PragProg Book pragprog.com/book/ tbcoffee/coffeescript
114. Rich UIs Agile development Rails and mobile for enterprise