An Evening with CoffeeScript

Slides for http://evening.coffeescript.io/

Javascript has become one of the most popular languages on the web but it still suffers to date from poor and hasty design decisions made during it’s infancy.

CoffeeScript — a fairly new language inspired by Ruby, Python and Haskell — compiles into Javascript, aims to highlight Javascript’s good parts while hiding its “dark sides” and to make the whole Javascript experience just that much more enjoyable.

This (free) course will teach a basic understanding of the language as well as attempt to clear out some of the misunderstandings that seem to keep people from integrating CoffeeScript into their workflow.

In the first part, the attendees will learn the fundamental concepts behind CoffeeScript as well as discover some of the existing tools.

The second part — an interactive workshop — will show CoffeeScript in action. Attendees are invited to try their newly earned skills on a small application and to hopefully discover the ‘power of CoffeeScript’.

Transcript

1. An evening with CoffeeScript
2. The evening
3. The evening What is CoffeeScript How to use it Concepts CoffeeScript 101
4. The evening
5. The evening Hands–on Workshop
6. number = 42 var number = 42;
7. number = 42 var number = 42;
8. CoffeeScript
9. “The assembly language of the web.”
10. http://www.flickr.com/photos/nathansmith/4704268314/
11. Javascript: The Quirky Parts
12. typeof null
13. typeof null // "object"
14. 0, NaN, "", false, null, undefined
15. var numbers = ['10','10','10']; numbers.map(parseInt);
16. var numbers = ['10','10','10']; numbers.map(parseInt); // [10, NaN, 2]
17. array.map(callback[, thisArg]) callback(value[, index[, array]]) parseInt(string, radix);
18. array.map(callback[, thisArg]) callback(value[, index[, array]]) parseInt(string, radix);
19. array.map(callback[, thisArg]) callback(value[, index[, array]]) parseInt(string, radix);
20. var numbers = ['10','10','10']; parseInt('10', 0, numbers); // 10 (decimal) parseInt('10', 1, numbers); // NaN parseInt('10', 2, numbers); // 2 (binary)
21. “Exactly which radix is chosen [by default] is implementation- dependent.”
22. var numbers = ['10','10','10']; parseInt('10', 0, numbers); // 10 (decimal) parseInt('10', 1, numbers); // NaN parseInt('10', 2, numbers); // 2 (binary)
23. [1, 71, 4, 5609, 102].sort()
24. [1, 71, 4, 5609, 102].sort() # => [1, 102, 4, 5609, 71]
25. [1, 71, 4, 5609, 102].sort(function(a, b){ return a - b; });
26. ['a', 'b', 'c'].join()
27. ['a', 'b', 'c'].join() # => "a,b,c"
28. abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with
29. abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with
31. ;
32. http://davidwalsh.name/javascript-semicolons
33. a = b + c (d + e).print()
34. a = b + c(d + e).print();
35. function add() { var a = 1, b = 2 return a + b }
36. function add() { var a = 1, b = 2; return; a + b; }
38. “Expose the good parts of JavaScript in a simple way”
39. <>
40. .js <>
41. <>
42. <>
43. .js <>
44. .js .coffee
45. .js .coffee
46. .js .coffee
47. Compiler
48. .js .coffee .litcoffee
49. .js .coffee .litcoffee
50. Publish via rsync ----------------- Publishing is nice and rudimentary. We build out an entirely static version of the site and **rysnc** it up to the server. Journo.publish = -> do Journo.build rsync 'site/images/', path.join(shared.config.publish, 'images/'), -> rsync 'site/', shared.config.publish A helper function for **rsync**ing, with logging, and the ability to wait for the rsync to continue before proceeding. This is useful for ensuring that our any new photos have finished uploading (very slowly) before the update to the feed is syndicated out. https://github.com/jashkenas/journo/blob/master/journo.litcoffee
51. Usage
52. Installation (v1.6.3)
53. sudo npm install -g coffee-script Installation (v1.6.3)
54. Executable $ coffee --compile file.coffee $ coffee --watch --compile --output js cs/*.coffee $ coffee -wco js cs $ coffee --map $ coffee --bare
55. Interactive REPL $ coffee coffee> a = [1..3] a = [1..3] [ 1, 2, 3 ]
56. Script tags <script src="vendor/coffee-script.js"></script> <script type="text/coffeescript"> </script>
57. Build tools
58. Source maps
59. Concepts
60. It’s just JavaScript
61. Readability Natural language
62. Fast
63. Backward compatible
64. Sturdy
65. Overview
66. Whitespace sensitive user = name: "John" age: 23
67. ;
69. Whitespace sensitive user = name: "John", age: 23; tasks = []
70. var*
71. *
72. {}*
73. *
74. Whitespace sensitive user = name: "John" age: 23 try failwhale() catch e console.error e.message
75. ()*
76. *
77. Function invocation console.error e.message console.error JSON.stringify e console.error(e.message) console.error(JSON.stringify(e))
78. Everything is an expression
79. Work in every JavaScript runtime
80. h p://try.coffeescript.io/
81. Assignments
82. name = "John" age = 23
83. // Generated by CoffeeScript 1.3.3 (function() { var age, name; name = "John"; age = 23; }).call(this);
84. Lexical Scope & variable safety
85. function setA() { a = 1; } function setB() { var b = 2; } setA() console.log(a) # => 1 setB() console.log(b) # => ReferenceError: b is not defined
86. Destructuring assignment
87. [name, age] = ["John", 23]
88. var age, name, _ref; _ref = ["John", 23], name = _ref[0], age = _ref[1];
89. name = "John" user = {name} var name, user; name = "John"; user = { name: name };
90. response = name: "John", email: "john@foo.com", age: 23 {name, age} = response var age, name, response; response = { name: "John", email: "john@foo.com", age: 23 }; name = response.name, age = response.age;
91. try failwhale() catch {line, message} displayError "Error on line #{line}: #{message}" var line, message; try { failwhale(); } catch (_error) { line = _error.line, message = _error.message; displayError("Error on line " + line + ": " + message); }
92. Comments
93. # Somehow this causes problems: realAge = age / 0
94. ### Doomsday device Author: John Doe Last updated: 12.12.2012 ### /* Doomsday device Author: John Doe Last updated: 12.12.2012 */
95. Arrays
96. numbers = [14, 8, 15, 16, 23, 42]
97. pixels = [ 255, 0, 255, 255 # first pixel 0, 0, 0, 0 # second pixel 255, 255, 0, 255 # third pixel ]
98. users = [ name: "John" age: 23 , name: "Dirk" age: 45 ]
99. var users; users = [ { name: "John", age: 23 }, { name: "Dirk", age: 45 } ];
100. users = [{ name: "John" age: 23 }, { name: "Dirk" age: 45 }]
101. Ranges
102. numbers = [1..10] var numbers; numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
103. numbers = [1..100] var numbers, _i, _results; numbers = (function() { _results = []; for (_i = 1; _i <= 100; _i++){ _results.push(_i); } return _results; }).apply(this);
104. numbers = [1..10] numbers[3..6] # => [4, 5, 6, 7] var numbers; numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; numbers.slice(3, 7);
105. numbers = [1..10] numbers[7..] # => [8, 9, 10] var numbers; numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; numbers.slice(7);
106. numbers = [1..10] numbers[..] # => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] var numbers; numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(numbers.slice(0));
107. Objects
108. user = {name: "John", age: "John"}
109. user = name: "John", age: "John"
110. users = name: "John" age: 23
111. users = name: first: "John" last: "Doe" age: 23 hobbies: []
112. $('#logo').attr class: 'bigger' $('#logo').attr({ "class": 'bigger' });
113. console.log animal.class console.log(animal["class"]);
114. Strings
115. firstName = "John" lastName = 'Doe' var firstName, lastName; firstName = "John"; lastName = 'Doe';
116. Interpolation
117. greeting = "Welcome back, #{name}" var greeting; greeting = "Welcome back, " + name;
118. greeting = "#{30 - user.age} years until 30!" var greeting; greeting = "" + (30 - user.age) + " years until 30!";
119. age = 27 ageString = "#{age}" var age, ageString; age = 27; ageString = "" + age;
120. Multiline strings
121. story = "Some people go batshit crazy if your code exceeds 80 columns per line so yo better just don't do." var story; story = "Some people go batshit crazy if your code ↵ execeds 80 columns per line so yo better just don't ↵ do.";
122. Block strings
123. headerMarkup = """ <header> <h1>XML is like violence</h1> </header> """ var headerMarkup; headerMarkup = "<header>\n <h1>XML is like ↵ violence</h1>\n</header>";
124. Regular expressions
125. mastercard = /5[1-5][0-9]{14}/ var mastercard; mastercard = /^5[1-5][0-9]{14}$/;
126. mastercard = /// ^ 5[1-5] # starts with 51..55 [0-9]{14} # 14 more digits $ /// var mastercard; mastercard = /^5[1-5][0-9]{14}$/;
127. Functions
128. function fullName(user) { return user.firstName + ' ' + user.lastName; } var fullName = function(user) { return user.firstName + ' ' + user.lastName; }
129. fullName(user); function fullName(user) { return user.firstName + ' ' + user.lastName; } "John Doe"
130. fullName(user); var fullName = function(user) { return user.firstName + ' ' + user.lastName; } TypeError: undefined is not a function
131. functionName = -> functionBody functionName = -> functionBody
132. functionName = -> functionBody functionName = -> functionBody
133. var functionName; functionName = function() { return functionBody; };
134. Invocation
135. outer inner outer(inner) outer inner 'foo', 'bar' wrap outer inner core outer(inner); outer(inner); outer(inner('foo', 'bar')); wrap(outer(inner(core)));
136. Arguments
137. fullName = (firstName, lastName) -> "#{firstName} #{lastName}"
138. Default values
139. fullName = (firstName, lastName = "Doe") -> "#{firstName} #{lastName}"
140. var fullName; fullName = function(firstName, lastName) { if (lastName == null) { lastName = "Doe"; } return "" + firstName + " " + lastName; };
141. Splats
142. invited = (names...) -> "Invited: #{names.join(', ')}" invited "John", "Mary", "The boy"
143. var invited, __slice = [].slice; invited = function() { var names; names = 1 <= arguments.length ? ↵ __slice.call(arguments, 0) : []; return "Invited: " + (names.join(', ')); };
144. Closures
145. makeAdder = (x) -> (y) -> x + y add5 = makeAdder(5) add5(10) # => 15 var makeAdder; makeAdder = function(x) { return function(y) { return x + y; }; };
146. do -> do (argument) -> (function() {})(); (function(argument) {})(argument);
147. Conditionals
148. if name == 'John' console.log "It's John again." else if name == 'Marcy' console.log "It's Marcy this time." else console.log "It's not John." unless name == 'John' console.log "It's someone else"
149. if (name === 'John') { console.log("It's John again."); } else if (name === 'Marcy') { console.log("It's Marcy this time."); } else { console.log("It's not John."); } if (name !== 'John') { console.log("It's someone else"); }
150. if name == 'John' then console.log "It's John again."
151. Postfix
152. console.log "It's John again." if name == 'John' console.log "It's someone else" unless name == 'John'
153. Everything’s an expression
154. message = if name == 'John' "It's John again." else if name == 'Marcy' "It's Marcy this time." else "It's not John." console.log message
155. message = if name == 'John' then "It's John again." else if name == 'Marcy' then "It's Marcy this time." else "It's not John." console.log message
156. [lastName, age] = if name == 'John' then ['Doe', 23] else if name == 'Marcy' then ['Murcy', 29] else ['Unknown' ] console.log lastName, age
157. Ternary
158. var isJohn = name == 'John' ? 'yep' : 'nope';
159. isJohn = if name == 'John' then 'yep' else 'nope'
160. var isJohn; isJohn = name === 'John' ? 'yep' : 'nope';
161. (›°□°ʣ›ớ ᵲᴸᵲ
162. “I realize its slightly longer, but less cryptic, I hope.” — Jeremy Ashkenas
163. Operators and aliases
164. isJohn = if name is 'John' then 'yep' else 'nope'
165. is === isnt !== not ! and && or || true, yes, on true false, no, off false @, this this of in in
166. is === isnt !== not ! and && or || true, yes, on true false, no, off false @, this this of in in
167. is === isnt !== not ! and && or || true, yes, on true false, no, off false @, this this of in in
168. letIn() if name in ['John', 'Marcy']
169. letIn() if name in ['John', 'Marcy'] if (name === 'John' || name === 'Marcy') { letIn(); }
170. Existential operator
171. invite(user) if user?
172. if (typeof user !== "undefined" && user !== null) { invite(user); }
173. name = userName ? 'John' var name; name = typeof userName !== "undefined" && ↵ userName !== null ? userName : 'John';
174. name = 'John' name ?= 'Marcy' var name; name = 'John'; if (name == null) { name = 'Marcy'; }
175. name = 'Marcy Murcy' john = name.match(/John/)?[0] var john, name, _ref; name = 'Marcy Murcy'; john = (_ref = name.match(/John/)) != null ? ↵ _ref[0] : void 0;
176. console?.log? "foo" if (typeof console !== "undefined" && console !== null) { if (typeof console.log === "function") { console.log("foo"); } }
177. Loops and list comprehension
178. Lists
179. names = ['John', 'Marcy'] for name in names invite(name)
180. invite(name) for name in ['John', 'Marcy']
181. var name, _i, _len, _ref; _ref = ['John', 'Marcy']; for (_i = 0, _len = _ref.length; _i < _len; _i++) { name = _ref[_i]; invite(name); }
182. invite(name, index) for name, index in ['John', 'Marcy']
183. Conditional
184. invite(n) for n in ['John', 'Marcy'] when n is 'John'
185. Comprehension
186. johns = (n for n in ['John', 'Marcy'] when n is 'John')
187. var johns, n; johns = (function() { var _i, _len, _ref, _results; _ref = ['John', 'Marcy']; _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { n = _ref[_i]; if (n === 'John') { _results.push(n); } } return _results; })();
188. Steps
189. evenNumbers = (n for n in [0..10] by 2)
190. Objects
191. users = john: 23, marcy: 29 ageReport = for name, age of users "#{name} is #{age}"
192. var age, ageReport, name, users; users = { john: 23, marcy: 29 }; ageReport = (function() { var _results; _results = []; for (name in users) { age = users[name]; _results.push("" + name + " is " + age); } return _results; })();
193. users = john: 23, marcy: 29 ageReport = for own name, age of users "#{name} is #{age}"
194. var age, ageReport, name, users, __hasProp = {}.hasOwnProperty; users = { john: 23, marcy: 29 }; ageReport = (function() { var _results; _results = []; for (name in users) { if (!__hasProp.call(users, name)) continue; age = users[name]; _results.push("" + name + " is " + age); } return _results; })();
195. while and until
196. growUp(user) while user.age < 80 growUp(user) until user.age >= 80
197. loop -> poll() while (true) { (function() { return poll(); }); }
198. Classes and inheritance
199. class User
200. var User; User = (function() { function User() {} return User; })();
201. Constructor
202. class User constructor: (name) -> @name = name
203. var User; User = (function() { function User(name) { this.name = name; } return User; })();
204. class User constructor: (@name) ->
205. class User constructor: (@name = 'Undefined') ->
206. Instance methods
207. class User constructor: (@firstName, @lastName) -> fullName: -> "#{@firstName} #{@lastName}" john = new User('John', 'Doe') john.fullName() # => "John Doe"
208. var User, john; User = (function() { function User(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } User.prototype.fullName = function() { return "" + this.firstName + " " + this.lastName; }; return User; })();
209. Binding of this
210. class View constructor: (@name)-> $('a').on 'click', displayName displayName: => $('h1').text @name
211. Instance variables
212. class User constructor: -> @invited = false
213. Class methods (and variables)
214. class User @_users: [] @getUsers: -> User._users
215. var User; User = (function() { function User() {} User._users = []; User.getUsers = function() { return User._users; }; return User; })();
216. Inheritance
217. class User class Invitee extends User
218. var Invitee, User, _ref, __hasProp = {}.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; }; User = (function() { function User() {} return User; })(); Invitee = (function(_super) { __extends(Invitee, _super); function Invitee() { _ref = Invitee.__super__.constructor.apply(this, arguments); return _ref; } return Invitee; })(User);
219. var Invitee, User, _ref, __hasProp = {}.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; }; User = (function() { function User() {} return User; })(); Invitee = (function(_super) { __extends(Invitee, _super); function Invitee() { _ref = Invitee.__super__.constructor.apply(this, arguments); return _ref; } return Invitee; })(User);
220. var Invitee, User, _ref, __hasProp = {}.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; };
221. User = (function() { function User() {} return User; })();
222. Invitee = (function(_super) { __extends(Invitee, _super); function Invitee() { _ref = Invitee.__super__.constructor.apply(this, ↵ arguments); return _ref; } return Invitee; })(User);
223. Super
224. class User constructor: (@name) -> message: -> "Hello #{@name}!" class Invitee extends User message: -> "#{super()} You are invited" invitee = new Invitee 'John' invitee.message() # => "Hello John! You are invited"
225. Invitee.prototype.message = function() { return "" + (Invitee.__super__.message.call(this)) ↵ + " You are invited"; };
226. Direct prototype access
227. String::dasherize = -> this.replace /_/g, "-" String.prototype.dasherize = function() { return this.replace(/_/g, "-"); };
228. Summary
229. CoffeeScript makes Javascript fun again
230. Common complaints
231. Teamwork
232. Debugging
233. WORKSHOP!