Coffeescript: No really, it's just Javascript

Video of this talk can be found here: http://youtu.be/RoPnnkYg9nI

I gave this talk February 20, 2014 at the Atlanta Javascript Meetup Group in Atlanta, GA.

Coffeescript has a reputation of being one of the most hated and loved languages in web development today. Why does this tool generate such a vigorous emotional response?

Brian Mann attempts to understand the communities' reactions to this little language called Coffeescript. He also gives a full review of it's most valuable features. In the end he hopes to dispel the myths and fear behind Coffeescript because afterall, it's just Javascript.

Transcript

1. @be_mann Brian Mann Atlanta, GA S Coffe Scrip No really, it’s just Javascript
2. • Exposes the good parts • Transpiles directly to JS • Removes / Adds new syntax • Enhances readability, and productivity • Clearly expresses intents What is CoffeeScript?
3. • An Emotional Assessment • Dive Into Features • Real World Experiences • Challenges / Critiques Agenda
4. I am Biased.
5. CoffeeScript BEAUTIFUL UGLY / LOVED HATED / EMBRACED FEARED / / / SYNTAX. TOOLS. LANGUAGES. is one of the most
6. Javascript Landscape.
7. Golden Age
8. Golden Age S Coffe Scrip
9. • CoffeeScript looks different • CoffeeScript acts different Why the hate?
11. FUD. Fear. Uncertainty. Doubt.
12. Crutch.
13. Absolutely NOT.
14. Nothing To Fear. S
15. Its just Javascript.
16. Okay thx. Code plz.
17. • No more semi-colons • No more commas • Optional parenthesis • Optional curly braces • White space sensitive Before we begin ; , {} ()
18. Vars. var is, no, more;
19. Vars are long gone count = 0 increment = -> count += 1 total = "The total is: " + count COFFEESCRIPT var count, increment; count = 0; increment = function() { var total; count += 1; return total = "The total is: " + count; }; JAVASCRIPT
20. Rule: 99 / 100
21. Object Literals.
22. Objects Simplified person = name: "Toby Ho" language: "javascript" likes: ["node", "testem", "jazz"] COFFEESCRIPT var person = { name: "Toby Ho", language: "javascript", likes: ["node", "testem", "jazz"] }; JAVASCRIPT
23. Functions.
24. Functions in JS function eat(){ console.log("eating"); }; DECLARATION var eat = function(){ console.log("eating"); }; EXPRESSION
25. Functions in CS eat = -> console.log "eating" COFFEESCRIPT var eat; eat = function() { return console.log("eating"); }; JAVASCRIPT
26. Function Arguments eat = (options = {}) -> COFFEESCRIPT var eat; eat = function(options) { if (options == null) { options = {}; } }; JAVASCRIPT
27. Function Context person = name: "Toby Ho" energy: 0 eat: -> @energy += 10 COFFEESCRIPT var person; person = { name: "Toby Ho", energy: 0, eat: function() { return this.energy += 10; } }; JAVASCRIPT > person.eat(); # 10
28. Function Binding var person; person = { name: "Toby Ho", energy: 0, work: function() { var _this = this; $("#stop").click(function() { return _this.energy -= 20; }); } }; JAVASCRIPT person = name: "Toby Ho" energy: 0 work: -> $("#stop").click => @energy -= 20 COFFEESCRIPT
29. Function Binding var person; person = { name: "Toby Ho", energy: 0, work: function() { var _this = this; $("#stop").click(function() { return _this.energy -= 20; }); } }; JAVASCRIPT person = name: "Toby Ho" energy: 0 work: -> $("#stop").click => @energy -= 20 COFFEESCRIPT var person; person = { name: "Toby Ho", energy: 0, work: function() { return $("#stop").click((function(_this) { return function() { return _this.energy -= 20; }; })(this)); } };
30. Function Splats var person; person = { name: "Toby Ho", dislikes: [], addDislikes: function() { var args = [].slice.call(arguments); return [].push.apply(this.dislikes, args); } }; JAVASCRIPT person = name: "Toby Ho" dislikes: [] addDislikes: (args...) -> @dislikes.push args... COFFEESCRIPT > person.addDislikes(“frameworks”, “long plane rides”);
31. Ranges / Slicing
32. Array + String Slicing nums = [1..10] COFFEESCRIPT JAVASCRIPT nums[0...5] nums[2..3] = [-3, -4] "Toby Ho"[0..3] [1,2,3,4,5] nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; "Toby Ho".slice(0, 4); [].splice.apply(nums, [2,2].concat([-3, -4]) ); nums.slice(0, 5); [1,2,-3,-4,5, 6,7,8,9,10] Toby
33. If, Else, Unless.
34. Flow Control var person; person = { name: "Toby Ho", tired: true, work: function() { if (this.tired) { return; } return this.program("javascript"); }, relax: function() { moment.hour() > 10 ? this.read() : this.tv(); }, sleep: function() { if (!this.tired) { return this.relax(); } } }; JAVASCRIPT person = name: "Toby Ho" tired: true work: -> return if @tired @program "javascript" relax: -> if moment.hour() > 10 then @read() else @tv() sleep: -> @relax() unless @tired COFFEESCRIPT
35. Operators.
36. Operator Comparison COFFEESCRIPT JAVASCRIPT yes true on true no false off false and && exercise() unless @tired and @sleepy or || happy() if @happy or @energy > 50 not ! relax() if not working() isnt !== @name isnt "randall" is === true is true
37. Existential Operator.
38. Do You Really Exist? person = name: "Toby Ho" energy: 0 address: city: "Alpharetta" state: "GA" zip: 30307 phone: null mail: -> "mailing..." > person.address?.city Alpharetta => > person.phone?.cell undefined => > person.call?( ) undefined => > person.call?( ) ? person.mail( ) mailing... => if (typeof person.call === "function") { person.call(); } var _ref; if ((_ref = person.address) != null) { _ref.city; }
39. String Interpolation.
40. No more awkward ‘+’ "Hey, " + person.name + " is " + person.age + " years young."; JAVASCRIPT "Hey, #{person.name} is #{person.age} years young." COFFEESCRIPT
41. Destructuring Assignment.
42. Easy var extraction person = name: "Toby Ho" energy: 0 address: city: "Alpharetta" state: "GA" zip: 30307 {name, energy, address} = person COFFEESCRIPT JAVASCRIPT var address, energy, name; name = person.name; energy = person.energy; address = person.address;
43. IIFE’s.
44. Module Pattern App = do -> privateVar = "can't get to me!" privateFn = -> "can't invoke me either" obj = data: [] props: {} publicFn: -> return obj COFFEESCRIPT JAVASCRIPT App = (function() { var privateVar = "can't get to me!"; var privateFn = function() { return "can't invoke me either"; }; var obj = { data: [], props: {}, publicFn: function() {} }; return obj; })();
45. Local Dependencies do ($ = jQuery, BB = Backbone) -> #reference jQuery as $ #reference Backbone as BB COFFEESCRIPT JAVASCRIPT (function($, BB) { //reference jQuery as $ //reference Backbone as BB })(jQuery, Backbone);
46. Switch / Case.
47. ...minus the case switch state when "GA" then "humid" when "WA" then "rainy" when "AZ", "UT", "NV" then "dry" else "moderate" COFFEESCRIPT JAVASCRIPT switch (state) { case "GA": "humid"; break; case "WA": "rainy"; break; case "AZ": case "UT": case "NV": "dry"; break; default: "moderate"; }
48. No Control Expression energyLevel = switch when @energy < 10 then "exhausted" when @energy < 20 then "okay" when @energy < 40 then "caffeinated" else "bouncing off walls" COFFEESCRIPT JAVASCRIPT var energyLevel; energyLevel = (function() { switch (false) { case !(this.energy < 10): return "exhausted"; case !(this.energy < 20): return "okay"; case !(this.energy < 40): return "caffeinated"; default: return "bouncing off walls"; } }).call(this);
49. Loops / Comprehensions.
50. For Loops person = name: "Toby Ho" language: "javascript" likes: ["node", "testem", "jazz"] COFFEESCRIPT for like, num in person.likes console.log "#{num + 1}. #{like}" 1. node 2. testem 3. jazz => var like, num, _i, _len, _ref; _ref = person.likes; for (num = _i = 0, _len = _ref.length; _i < _len; num = ++_i) { like = _ref[num]; console.log("" + (num + 1) + ". " + like); } JAVASCRIPT
51. Property Iteration heros = { john: "resig", ryan: "dahl" }; COFFEESCRIPT for first, last of heros console.log first, last john resig ryan dahl => var first, last; for (first in heros) { last = heros[first]; console.log(first, last); } JAVASCRIPT
52. Array ‘in’ checking COFFEESCRIPT if "coffeescript" in person.dislikes then "hater" else "friend :-)" var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; if (__indexOf.call(this.dislikes, "coffeescript") >= 0) { "hater"; } else { "friend :-)"; } JAVASCRIPT person = name: "Toby Ho" dislikes: ["frameworks", "long plane rides"]
53. Comprehensions var i, nums; nums = (function() { var _i, _results; _results = []; for (i = _i = 1; _i <= 100; i = ++_i) { _results.push({ num: i }); } return _results; })(); JAVASCRIPT COFFEESCRIPT nums = (num: i for i in [1..100]) {100 Objects} -------------------------- [{ num: 1 },{ num: 2 }] =>
54. • Block Strings • Block Regular Expressions • Some Operators • Chained Comparisons • Trailing Commas • Reserved Words • Literate Coffeescript • Classes, Inheritance, & Super What was missed?
55. Debugging.
56. Syntax Errors @PE.module "HeaderApp", +> SUBLIME TEXT
57. Source Maps
58. CoffeeConsole
59. Literal CoffeeScript
60. Criticisms.
61. Dispelling the Myths • Compiler Errors (WAT?) • Performance • Restrictions* • Harder to Debug • Less Readability • You can skip learning JS
62. Lies, Damned Lies, & Statistics.
63. Productivity Gains CHARS 1,198,518 2,704,135 2.25X 34,014 84,681 2.49X LINES OF CODE
64. The End @be_mann Brian Mann S Coffe Scrip