CoffeeScript: The Good Parts

It’s not a secret that the topic of CoffeeScript is controversial to say the least. Many reputable JavaScript and Node.js developers just hate CoffeeScript, but there are lessons we can all learn from its good parts! However, many developers just won’t go back to plain JavaScript after building something relatively serious with CoffeeScript.

My own story is going from making fun to loving it after a year developing an enterprise product. As with the famous JavaScript: The Good Parts book, we'll look at what's good in CoffeeScript (and it’s quirks too). This talk will share experiences from the trenches of using CoffeeScript in production.

Transcript

1. webapplog.com @azat_co CoffeeScript: The Good Parts The good and not so good parts of CoffeeScript in comparison to JavaScript 1
2. webapplog.com @azat_co About The Presenter • Worked in the US government, startups and corporations • Wrote six books on JavaScript and Node.js (the latest is Practical Node.js by Apress) • Certified yoga teacher and paleo lifestyle enthusiast Azat Mardan 2
3. webapplog.com @azat_co Fun story: “CoffeeScript is a solution without a problem” I used to make fun of CoffeeScript, before falling in love with it. 3
4. webapplog.com @azat_co Who likes /uses CoffeeScript already? 4
5. webapplog.com @azat_co Please be open-minded 5
6. webapplog.com @azat_co Blub Paradox 6 ! Blub paradox: devs are satisfied with whatever language they happen to use, because it dictates the way they think about programs. http://en.wikipedia.org/wiki/ Paul_Graham_(computer_programmer)#Blub
7. webapplog.com @azat_co CoffeeScript’s Bad Rep Most of the people who say bad things about CoffeeScript have never built with it anything relatively large-scale and production-ready. 7
8. webapplog.com @azat_co CoffeeScript at DocuSign DocuSign stack: CoffeeScript+Node.js+Backbone.js+Grunt Observation: front-end developers, after only a few weeks of CoffeeScript, didn’t want to go back to regular JavaScript! 8
9. webapplog.com @azat_co “CoffeeScript is a little language that compiles into JavaScript.” — coffeescript.org 9
10. webapplog.com @azat_co TOC for v1.7.1 Maybe CoffeeScript is not so small anymore? 10
11. webapplog.com @azat_co JavaScript 11
12. webapplog.com @azat_co Native JavaScript Issues • == vs === • Functional inheritance vs pseudo-classical • Global variable leakage (missing var) • Many others 12
13. webapplog.com @azat_co CoffeeScript: The Good Parts (some of them) • Syntax: curly braces, parentheses and semicolons • Function declaration: -> and => • Scoping: automatic var • Iterators / comprehensions: replacement of for loops • Class declaration: class operand 13
14. webapplog.com @azat_co Syntax • No semicolons, i.e., they are banned • Logical blocks can omit curly braces • Function calls can omit parentheses 14
15. webapplog.com @azat_co Why Semicolons are Bad? (*IMHO) • Extra time&work to put them • If missed, inconsistent but working code • Redundant/not-needed (expect in two cases) • Semicolon Insertion (ASI) 15
16. webapplog.com @azat_co Logical Blocks (optional curly braces) kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 16
17. webapplog.com @azat_co Function calls console.log object.class ! $('.account').attr class: ‘active’ ! $(‘button’).css color: red “font-size”: “16px” 17
18. webapplog.com @azat_co Function Declaration • Skinny arrow (->) saves time typing “function” over and over again • Fat arrow (=>), i.e., no need to use “var that = this” or “var self = this” 18
19. webapplog.com @azat_co Function Declaration Elegance a = (x,y) -> console.log x+y var a; ! a = function(x, y) { return console.log(x + y); }; ! a(10, -5); CoffeeScript: JavaScript: 19
20. webapplog.com @azat_co Function Declaration: Skinny Arrow console.log @ $('div').click ()-> console.log @ console.log(this); $('div').click(function() { return console.log(this); }); CoffeeScript: JavaScript: Prints “window” and DOM elements i.e., “this” changes and @ changes too 20
21. webapplog.com @azat_co Function Declaration: Fat Arrow console.log @ $('div').click ()=> console.log @ var _this = this; ! console.log(this); ! $('div').click(function() { return console.log(_this); }); CoffeeScript: JavaScript: Prints “window” both times (i.e., the outer scope) 21
22. webapplog.com @azat_co Scoping • Manual “var” is banned • Variables declared in the scope in which they are encountered first (i.e., the order in which variables used determines their scope). 22
23. webapplog.com @azat_co Why auto vars are good? Missed “var” Example. var a = function (c) { b = 10; return b + c; } console.log(a(0)); ! b is window.b — bad! var a = function(c) { var b = 10; return b + c; }; console.log(a(0)); ! b is a private attribute — what we wanted! CoffeeScript: JavaScript: 23
24. webapplog.com @azat_co Scoping: Example I b = 1 a = -> b = -1 ! a() console.log b var a, b; b = 1; a = function() { return b = -1; }; a(); console.log(b); CoffeeScript: JavaScript: 24
25. webapplog.com @azat_co Scoping: Example II a = -> b = -1 b = 1 a() console.log b var a, b; a = function() { var b; return b = -1; }; b = 1; a(); console.log(b); CoffeeScript: JavaScript: 25
26. webapplog.com @azat_co Iterators / Comprehensions (for loops) Awesome time savers! Good for arrays and objects: ! for item, index in arrayObject iterator(item) ! for key, value of object iterator(item) ! ! ! ! ! 26
27. webapplog.com @azat_co Iterating over an Array for item, index in arrayObject iterator(item) var index, item, _i, _len; ! for (index = _i = 0, _len = arrayObject.length; _i < _len; index = ++_i) { item = arrayObject[index]; iterator(item); } CoffeeScript: JavaScript: 27
28. webapplog.com @azat_co Iterating over an Object for key, value of object iterator(value) var key, value; ! for (key in object) { value = object[key]; iterator(value); } CoffeeScript: JavaScript: 28
29. webapplog.com @azat_co Iterators / Comprehensions (for loops) II Many options: ! iterator (item) for item in arrayObject ! iterator item for item in arrayObject ! iterator item for item in arrayObject when item > 0 ! ! ! ! ! ! 29
30. webapplog.com @azat_co Class Declaration • In JavaScript classes are absent at all! • CoffeeScript eloquently implements Pseudo-classical inheritance pattern: “new” and capitalized name (“new Animal”, “new Vehicle”, etc.) • Pseudo-classical is hard and cumbersome without CS • CoffeeScript “constructor” method and “super” call 30
31. webapplog.com @azat_co Class Example class Vehicle constructor: (@name) -> move: (meters) -> console.log @name + " moved #{meters} miles.” ! camry = new Vehicle "Camry" camry.move(50) CoffeeScript: Output: Camry moved 50 miles. 31
32. webapplog.com @azat_co Class Example var Vehicle, camry; ! Vehicle = (function() { function Vehicle(name) { this.name = name; } ! Vehicle.prototype.move = function(meters) { return console.log(this.name + (" moved " + meters + " miles.")); }; ! return Vehicle; ! })(); ! camry = new Vehicle("Camry"); ! camry.move(50); JavaScript: 2x: 6 vs 12 lines of code! 32
33. webapplog.com @azat_co Other CoffeeScript Goodies • Splats (e.g., “options…”) • Conditions (if, isnt, not, and, or, unless) • Arrays and their slicing (arr = [1..10], slicedArr = arr[2..4]) 33
34. webapplog.com @azat_co CoffeeScript: The Good Parts Summary • Syntax: curly braces, parentheses and semicolons • Function Declaration: -> and => • Scoping: automatic var • Iterators / Comprehensions: replacement of for loops • Class Declaration: class operand 34
35. webapplog.com @azat_co CoffeeScript: Not So Good Parts • Learning: 1-2 day, free online ebooks • Compilation: extra build step (use Grunt or similar) • Parentheses: optional and cause misinterpretation • Debugging: use source-maps 35
36. webapplog.com @azat_co https://github.com/michaelficarra/coffee-of-my- dreams CoffeeScript of My Dreams
37. webapplog.com @azat_co How to Get Started $ npm install -g coffee-script $ coffee >… 37
38. webapplog.com @azat_co Companies that use CoffeeScript 38 • GitHub • Dropbox • DocuSign • Airbnb (mobile) • HotelTonight • Basecamp (mobile)
39. webapplog.com @azat_co Further Reading CoffeeScript FUNdamentals: The Better JavaScript http://bit.ly/1nD4dE3 39
40. webapplog.com @azat_co CoffeeScript Ebooks • The Little Book on CoffeeScript (free onine) • CoffeeScript Cookbook (free online) • Smooth CoffeeScript (free online) • CoffeeScript Ristretto (free online) 40
41. webapplog.com @azat_co Future / Alternatives 41 • Dart (early stage) • TypeScript: MicroSoft project • ECMAScript 6: be careful with old browsers, use shims, fully available after June 2015 • Sweet.js: macros!
42. webapplog.com @azat_co Conclusions 42 • Good for enterprise and large team, because it’s easer to have common style, e.g., https://github.com/styleguide/ javascript • Good for developers new to JavaScript and those coming from OOP languages (Java, Ruby) • Cross-browser / old browser support • More productive and happier developers (after learning) • Tested, robust, and available now • Awesome with Backbone.js and Underscore.js
43. webapplog.com @azat_co Session Summary • Native JavaScript Issues • CoffeeScript: The Good Parts • How to Get Started • Future / Alternatives • Conclusions 43
44. webapplog.com @azat_co Discussion and Q&A Time Questions, thoughts and experiences? 44