CoffeeScript with Patrick Simpson

An introduction of the benefits of CoffeeScript. A breif explaination of how things used to be, the pain of debugging, and how CoffeeScript has helped. A walkthrough of the beautiful CoffeeScript syntax and examining the lint free JavaSript that it creates. Also, dispelling some of the preceived downsides of CoffeeScript.

Transcript

1. Patrick Simpson @SimpsonPatrick COFFEESCRIPT
4. Background
5. ~2007 Firebug!
6. Frameworks!
7. :-(
8. ,
12. So… what’s CoffeeScript?
13. it’s JavaScript?
14. CoffeeScript is JavaScript minus the Java
15. It’s a better way to write JavaScript.
17. You need to know JavaScript to write CoffeeScript
18. COFFEESCRIPT BASICS
19. https://github.com/patricksimpson/coffeescript
20. npm install -g coffee-script
21. Everything is an Expression
22. White Space
23. 1 // A single line comment.! 2 // You can have a few.! 3 ! 4 /*! 5 Wow! 6 A Multiline! 7 Comment! 8 Such Amaze! 9 */! Comments: JS
24. 1 # A single line comment.! 2 # You can have a few.! 3 ! 4 ###! 5 Wow! 6 A Multiline! 7 Comment! 8 Such Amaze! 9 ###! ! ! Comments: Coffee
25. 1 name = "Patrick"! 2 ! 3 bio = "From Dayton Ohio ! 4 Married with 3 children. ! 5 Loves Coffee, and drinks it too."! 6 ! 7 html = """! 8 <p>! 9 #{name} had a cup of coffee! 10 </p>! 11 """! Strings: Coffee
26. 1 // Generated by CoffeeScript 1.6.3! 2 (function() {! 3 var bio, html, name;! 4 ! 5 name = "Patrick";! 6 ! 7 bio = "From Dayton Ohio Married with 3 children. Loves Coffee, and drinks it too.";! 8 ! 9 html = "<p>\n " + name + " had a cup of coffee\n</p>";! 10 ! 11 }).call(this);! Strings: Coffee
27. Functions
28. function is ->
29. 1 function computeName() {! 2 me = "Patrick Simpson";! 3 //... Do stuff! 4 return me;! 5 }! Functions: JS
30. 1 computeName = ->! 2 me = "Patrick Simpson"! 3 # ... Do stuff! 4 me! Functions: Coffee
31. 1 computeName = ->! 2 me = "Patrick Simpson"! 3 # ... Do stuff! 4 me! Functions: Coffee
32. 2 (function() {! 3 var computeName;! 4 ! 5 computeName = function() {! 6 var me;! 7 me = "Patrick Simpson";! 8 return me;! 9 };! 10 ! 11 }).call(this);! Functions: Compiled
33. 1 computeName = ->! 2 me = "Patrick Simpson"! 3 # ... Do stuff! 4 me! White Space: Coffee
34. Variables
35. There is no var
36. 1 me = ""! 2 computeName = ->! 3 me = "Patrick Simpson"! 4 # ... Do stuff! 5 me! Variables
37. 2 (function() {! 3 var computeName, me;! 4 ! 5 me = "";! 6 ! 7 computeName = function() {! 8 me = "Patrick Simpson";! 9 return me;! 10 };! 11 ! 12 }).call(this);! Variables
38. Scoping
39. 1 me = ""! 2 computeName = ->! 3 me = "Patrick Simpson"! 4 # ... Do stuff! 5 me! Scoping: Coffee
40. 2 (function() {! 3 var computeName, me;! 4 ! 5 me = "";! 6 ! 7 computeName = function() {! 8 me = "Patrick Simpson";! 9 return me;! 10 };! 11 ! 12 }).call(this);! Scoping: Compiled
41. 2 (function() {! 3 var computeName, me;! 4 ! 5 me = "";! 6 ! 7 computeName = function() {! 8 me = "Patrick Simpson";! 9 return me;! 10 };! 11 ! 12 }).call(this);! Scoping
42. Arrays
43. 1 var names = ["Patrick",! 2 "Joe",! 3 "Smoe",! 4 "Barney",! 5 "Batman"];! Arrays: JS
44. 1 people = [! 2 "Patrick"! 3 "Joe"! 4 "Smoe"! 5 "Barney"! 6 "Batman"! 7 ]! Arrays: Coffee
45. 2 (function() {! 3 var people;! 4 ! 5 people = ["Patrick", "Joe", "Smoe", "Barney", "Batman"];! 6 ! 7 }).call(this);! Arrays: Compiled
46. Objects
47. 1 var patrick = {! 2 name: "Patrick Simpson",! 3 age: 28,! 4 awesome: true,! 5 skills: ["JavaScript", "CoffeeScript", "Bacon"]! 6 };! 7 ! 8 // patrick! 9 console.log(patrick.name);! Objects: JS
48. 1 patrick =! 2 name: "Patrick Simpson"! 3 age: 28! 4 awesome: true! 5 skills: [! 6 "JavaScript"! 7 "CoffeeScript"! 8 "Bacon"! 9 ]! 10 ! 11 # patrick! 12 console.log patrick.name! Objects: Coffee
49. 2 (function() {! 3 var patrick;! 4 ! 5 patrick = {! 6 name: "Patrick Simpson",! 7 age: 28,! 8 awesome: true,! 9 skills: ["JavaScript", "CoffeeScript", "Bacon"]! 10 };! 11 ! 12 console.log(patrick.name);! 13 ! 14 }).call(this);! Objects: Compiled
50. Operators
52. Loops
53. 1 var names = ["Patrick",! 2 "Joe",! 3 "Smoe",! 4 "Barney",! 5 "Batman"];! Looping: JS
54. ! 7 for(var i = 0; i < names.length; i++){! 8 printName(names[i]);! 9 }! Looping: JS
55. ! 8 prettyPrint(name) for name in names! ! Loops: Coffee
56. ! 8 prettyPrint name for name in names! ! Loops: Coffee
57. 7 for (_i = 0, _len = names.length; _i < _len; _i++) {! 8 name = names[_i];! 9 prettyPrint(name);! 10 }! Loops: Compiled
58. 1 names = [! 2 "Patrick"! 3 "Joe"! 4 "Smoe"! 5 "Barney"! 6 "Batman"! 7 ]! 8 printName(name) for name in names! 9 me = (name for name in names when name is "Patrick")! 10 doOtherThing(name) for name in names! Loops: Coffee
59. 1 // Generated by CoffeeScript 1.6.3! 2 (function() {! 3 var me, name, names, _i, _j, _len, _len1;! 4 ! 5 names = ["Patrick", "Joe", "Smoe", "Barney", "Batman"];! 6 ! 7 for (_i = 0, _len = names.length; _i < _len; _i++) {! 8 name = names[_i];! 9 prettyPrint(name);! 10 }! 11 ! 12 me = (function() {! 13 var _j, _len1, _results;! 14 _results = [];! 15 for (_j = 0, _len1 = names.length; _j < _len1; _j++) {! 16 name = names[_j];! 17 if (name === "Patrick") {! 18 _results.push(name);! 19 }! 20 }! 21 return _results;! 22 })();! 23 ! 24 for (_j = 0, _len1 = names.length; _j < _len1; _j++) {! 25 name = names[_j];! 26 doOtherThing(name);! 27 }! 28 ! 29 }).call(this);!
60. 1 names = [! 2 "Patrick"! 3 "Joe"! 4 "Smoe"! 5 "Barney"! 6 "Batman"! 7 ]! 8 ! 9 prettyPrint = (string) ->! 10 console.log "~~~ " + string + " ~~~"! 11 ! 12 modNames = names.map (name) ->! 13 # I can now do what I want with this current name...! 14 if name == "Patrick"! 15 prettyPrint name! 16 name = "Patrick Simpson"! 17 name! 18 ! 19 console.log names! 20 console.log modNames! Loop: Maps
61. 1 // Generated by CoffeeScript 1.6.3! 2 (function() {! 3 var modNames, names, prettyPrint;! 4 ! 5 names = ["Patrick", "Joe", "Smoe", "Barney", "Batman"];! 6 ! 7 prettyPrint = function(string) {! 8 return console.log("~~~ " + string + " ~~~");! 9 };! 10 ! 11 modNames = names.map(function(name) {! 12 if (name === "Patrick") {! 13 prettyPrint(name);! 14 name = "Patrick Simpson";! 15 }! 16 return name;! 17 });! 18 ! 19 console.log(names);! 20 ! 21 console.log(modNames);! 22 ! 23 }).call(this);!
62. Classes
63. 1 class Person! 2 constructor: (@name) ->! 3 ! 4 drink: (n) ->! 5 console.log @name + " drank #{n} cups"! 6 ! 7 class Employee extends Person! 8 drink: (n) ->! 9 super 10! 10 console.log " of coffee"! 11 ! 12 patrick = new Employee "Patrick Simpson"! Classes
64. 1 (function() {! 2 var Employee, Person, patrick, _ref,! 3 __hasProp = {}.hasOwnProperty,! 4 __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; };! 5 ! 6 Person = (function() {! 7 function Person(name) {! 8 this.name = name;! 9 }! 10 ! 11 Person.prototype.drink = function(n) {! 12 return console.log(this.name + (" drank " + n + " cups"));! 13 };! 14 ! 15 return Person;! 16 ! 17 })();! 18
65. ! 19 Employee = (function(_super) {! 20 __extends(Employee, _super);! 21 ! 22 function Employee() {! 23 _ref = Employee.__super__.constructor.apply(this, arguments);! 24 return _ref;! 25 }! 26 ! 27 Employee.prototype.drink = function(n) {! 28 Employee.__super__.drink.call(this, 10);! 29 return console.log(" of coffee");! 30 };! 31 ! 32 return Employee;! 33 ! 34 })(Person);! 35 ! 36 patrick = new Employee("Patrick Simpson");! 37 ! 38 patrick.drink();! 39 ! 40 }).call(this);!
66. COFFEESCRIPT CLI
67. -c, -- compile
68. -m, --map
69. -m, --map
70. -o, --output [DIR]
71. ! -w, --watch
72. coffee -cw basics ! ! ! !
73. COFFEESCRIPT DEBUGGING
74. Source Maps
75. Source Maps
76. Source Maps
77. Source Maps
78. Source Maps
79. Source Maps
80. THANKS! @SimpsonPatrick patrick@heysparkbox.com
81. http://coffeescriptcookbook.com/ ! http://arcturo.github.io/library/coffeescript/ ! http://coffeescript.org/ ! https://github.com/raganwald/homoiconic/blob/master/2012/09/lexical-scope-in- coffeescript.md ! https://github.com/raganwald/homoiconic/blob/master/2012/09/actually-YOU- dont-understand-lexical-scope.md ! http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ ! https://github.com/sparkbox/generator-mg ! https://github.com/mutewinter/tapas-with-ember !