Your SlideShare is downloading. ×
0
The CoffeeScript Edge                          Presented by Trevor Burnham at Philly ETE 2012Wednesday, April 11, 12
Who Am I?Wednesday, April 11, 12
http://pragprog.com/book/tbcoffee/coffeescriptWednesday, April 11, 12
“This book helps                                          readers become better                                          J...
Preface             The Compleat History of JavaScriptWednesday, April 11, 12
1995 to 2003: Ancient JavaScriptWednesday, April 11, 12
Paul Graham on JavaScript:Wednesday, April 11, 12
Paul Graham on JavaScript:                                       “I would not even use                                    ...
2004-2008: Medieval JavaScriptWednesday, April 11, 12
Ajax!Wednesday, April 11, 12
Crockford!Wednesday, April 11, 12
Solid libraries!Wednesday, April 11, 12
Solid libraries!                          ...And probably others!Wednesday, April 11, 12
2009-: Modern JavaScriptWednesday, April 11, 12
JavaScript on the ServerWednesday, April 11, 12
JavaScript as an                          Embedded Scripting LanguageWednesday, April 11, 12
JavaScript is Now FAST!Wednesday, April 11, 12
The New First Language?                            http://www.codecademy.com/Wednesday, April 11, 12
Everyone Who Knows JavaScript                      Feels Like Superman!Wednesday, April 11, 12
Wednesday, April 11, 12
“A Little Language”Wednesday, April 11, 12
TimelineWednesday, April 11, 12
Timeline                          Christmas 2009: First announced on HNWednesday, April 11, 12
Timeline                          Christmas 2009: First announced on HN                          Christmas 2010: 1.0 Relea...
Timeline                          Christmas 2009: First announced on HN                          Christmas 2010: 1.0 Relea...
https://github.com/rails/rails/commit/9f09aeb8273177fc2d09ebdafcc76ee8eb56fe33Wednesday, April 11, 12
David Heinemeier HanssonWednesday, April 11, 12
Ward CunninghamWednesday, April 11, 12
Ward Cunningham                                 “CoffeeScript and the                                 environment will all...
Brendan Eich (!)Wednesday, April 11, 12
Brendan Eich (!)                                   CoffeeScript userWednesday, April 11, 12
Eich + Ashkenas at JsConf 2011Wednesday, April 11, 12
Who uses it?           https://github.com/jashkenas/coffee-script/wiki/In-The-WildWednesday, April 11, 12
Ponder This...                          https://github.com/languages/CoffeeScriptWednesday, April 11, 12
I                    CoffeeScript: A Bird’s-Eye ViewWednesday, April 11, 12
Things CoffeeScript Isn’t:Wednesday, April 11, 12
Things CoffeeScript Isn’t:                          Ruby/PythonWednesday, April 11, 12
Things CoffeeScript Isn’t:                          Ruby/Python                          jQueryWednesday, April 11, 12
Things CoffeeScript Isn’t:                          Ruby/Python                          jQuery                          G...
Things CoffeeScript Isn’t:                          Ruby/Python                          jQuery                          G...
Things CoffeeScript Isn’t:                          Ruby/Python                          jQuery                          G...
“It’s Just JavaScript”Wednesday, April 11, 12
“It’s Just JavaScript”                          a	  =	  b	  	  	  	  	  #	  var	  a	  =	  b;Wednesday, April 11, 12
“It’s Just JavaScript”                          a	  =	  b	  	  	  	  	  #	  var	  a	  =	  b;                          x	  ...
“It’s Just JavaScript”                          a	  =	  b	  	  	  	  	  #	  var	  a	  =	  b;                          x	  ...
“It’s Just JavaScript”                          a	  =	  b	  	  	  	  	  #	  var	  a	  =	  b;                          x	  ...
“It’s Just JavaScript”                          a	  =	  b	  	  	  	  	  #	  var	  a	  =	  b;                          x	  ...
Ruby-ismsWednesday, April 11, 12
Ruby-isms                          "That	  costs	  $#{price}"                          #	  "That	  costs	  $"	  +	  priceW...
Streamlined Literals (I)Wednesday, April 11, 12
Streamlined Literals (I)                          [                          	  	  "Commas?"                          	  	...
Streamlined Literals (II)Wednesday, April 11, 12
Streamlined Literals (II)                          outer:                          	  	  inner:                          	...
{key: key} Shorthand and                          Destructuring AssignmentWednesday, April 11, 12
{key: key} Shorthand and                             Destructuring Assignment                          obj	  =	  {x}	  	  ...
{key: key} Shorthand and                             Destructuring Assignment                          obj	  =	  {x}	  	  ...
{key: key} Shorthand and                             Destructuring Assignment                          obj	  =	  {x}	  	  ...
More Syntactic SugarWednesday, April 11, 12
More Syntactic Sugar                          f()	  if	  z	  	  #	  if	  (z)	  {	  f();	  }Wednesday, April 11, 12
More Syntactic Sugar                          f()	  if	  z	  	  #	  if	  (z)	  {	  f();	  }                          f?()	...
More Syntactic Sugar                          f()	  if	  z	  	  #	  if	  (z)	  {	  f();	  }                          f?()	...
More Syntactic Sugar                          f()	  if	  z	  	  #	  if	  (z)	  {	  f();	  }                          f?()	...
More Syntactic Sugar                          f()	  if	  z	  	  #	  if	  (z)	  {	  f();	  }                          f?()	...
The Beauty of Indentation                            source: https://github.com/TrevorBurnham/connect-assetsWednesday, Apr...
The Beauty of Indentation                                      source: https://github.com/TrevorBurnham/connect-assets    ...
The Curly-Braced EquivalentWednesday, April 11, 12
The Curly-Braced Equivalent                          var	  css,	  ext,	  mtime,	  sourcePath,	  stats,	  _i,	  _len,	  _re...
Wednesday, April 11, 12
II                          Language FeaturesWednesday, April 11, 12
The WrapperWednesday, April 11, 12
The Wrapper                          CoffeeScript in:                          console.log	  i	  for	  i	  in	  arr       ...
Why Use The Wrapper?                            source: http://stackoverflow.com/questions/5211638/Wednesday, April 11, 12
Wednesday, April 11, 12
Things That Don’t Create Scope                              in JavaScriptWednesday, April 11, 12
Things That Don’t Create Scope                              in JavaScript                          ConditionalsWednesday, ...
Things That Don’t Create Scope                              in JavaScript                          Conditionals           ...
Things That Don’t Create Scope                              in JavaScript                          Conditionals           ...
Things That Don’t Create Scope                              in JavaScript                          Conditionals           ...
Things That Don’t Create Scope                              in JavaScript                          Conditionals           ...
Wednesday, April 11, 12
Don’t Let This Happen to You!                          http://blog.meloncard.com/post/12175941935Wednesday, April 11, 12
CoffeeScripters Need No var!Wednesday, April 11, 12
CoffeeScripters Need No var!                          console.log	  i	  for	  i	  in	  arr                          (funct...
JS Best Practices,                          CoffeeScript Defaults!Wednesday, April 11, 12
JS Best Practices,                               CoffeeScript Defaults!                          Parappa the WrapperWednes...
JS Best Practices,                               CoffeeScript Defaults!                          Parappa the Wrapper      ...
JS Best Practices,                               CoffeeScript Defaults!                          Parappa the Wrapper      ...
JS Best Practices,                               CoffeeScript Defaults!                          Parappa the Wrapper      ...
Plain, Ordinary JavaScript ObjectsWednesday, April 11, 12
Plain, Ordinary JavaScript Objects                          lifeEtAl =                            answer: 42              ...
Plain, Ordinary JavaScript Objects                          lifeEtAl =                            answer: 42              ...
Plain, Ordinary JavaScript Objects                          lifeEtAl =                            answer: 42              ...
Wednesday, April 11, 12
Classes to the Rescue!Wednesday, April 11, 12
Classes to the Rescue!                          class LifeEtAl                            answer: 42                      ...
Classes to the Rescue!                          class LifeEtAl                            answer: 42                      ...
Classes to the Rescue!                          class LifeEtAl                            answer: 42                      ...
How About a Little Privacy?Wednesday, April 11, 12
How About a Little Privacy?                          class LifeEtAl                            answer = 42                ...
How About a Little Privacy?                          class LifeEtAl                            answer = 42                ...
How About a Little Privacy?                          class LifeEtAl                            answer = 42                ...
Using a ConstructorWednesday, April 11, 12
Using a Constructor                          class Circle                            twoPi = Math.PI * 2                  ...
Using a Constructor                          class Circle                            twoPi = Math.PI * 2                  ...
Let’s Try a Little InheritanceWednesday, April 11, 12
Let’s Try a Little Inheritance                          class	  Document	  extends	  Backbone.Model                       ...
Doing Inheritance via a                            JavaScript LibraryWednesday, April 11, 12
Doing Inheritance via a                                 JavaScript Library                          var	  Document	  =	  B...
Wednesday, April 11, 12
I. The Prototype ChainWednesday, April 11, 12
I. The Prototype Chain                          class	  Document	  extends	  Backbone.Model                          	  	 ...
I. The Prototype Chain                          class	  Document	  extends	  Backbone.Model                          	  	 ...
I. The Prototype Chain                          class	  Document	  extends	  Backbone.Model                          	  	 ...
I. The Prototype Chain                          class	  Document	  extends	  Backbone.Model                          	  	 ...
I. The Prototype Chain                          class	  Document	  extends	  Backbone.Model                          	  	 ...
I. The Prototype Chain                          class	  Document	  extends	  Backbone.Model                          	  	 ...
II. Superclass Methods Can Be                                Invoked With superWednesday, April 11, 12
II. Superclass Methods Can Be                                Invoked With super                          class	  AppleDevi...
II. Superclass Methods Can Be                                Invoked With super                          class	  AppleDevi...
III. Superclass Properties are CopiedWednesday, April 11, 12
III. Superclass Properties are Copied                          class	  Primate                          	  	  @thumbs	  =	...
III. Superclass Properties are Copied                          class	  Primate                          	  	  @thumbs	  =	...
III. Superclass Properties are Copied                          class	  Primate                          	  	  @thumbs	  =	...
Wednesday, April 11, 12
III                          Working with CoffeeScriptWednesday, April 11, 12
Installing coffeeWednesday, April 11, 12
Installing coffee                          Step 1: Install NodeWednesday, April 11, 12
Installing coffee                          Step 1: Install Node                          Step 2: npm	  install	  -­‐g	  co...
Installing coffee                          Step 1: Install Node                          Step 2: npm	  install	  -­‐g	  co...
Installing coffee                          Step 1: Install Node                          Step 2: npm	  install	  -­‐g	  co...
CompilingWednesday, April 11, 12
Compiling                          coffee	  -­‐wWednesday, April 11, 12
Compiling                          coffee	  -­‐w                          Rails / other web frameworksWednesday, April 11,...
Compiling                          coffee	  -­‐w                          Rails / other web frameworks                    ...
Compiling                          coffee	  -­‐w                          Rails / other web frameworks                    ...
Compiling                          coffee	  -­‐w                          Rails / other web frameworks                    ...
A Piece of Cake                          source: https://github.com/sstephenson/node-coffee-project/Wednesday, April 11, 12
A Piece of Cake                                    source: https://github.com/sstephenson/node-coffee-project/            ...
Wednesday, April 11, 12
Editing              https://github.com/jashkenas/coffee-script/wiki/Text-editor-pluginsWednesday, April 11, 12
Documenting                          source: http://coffeescript.org/documentation/docs/grammar.htmlWednesday, April 11, 12
TestingWednesday, April 11, 12
Testing                          MochaWednesday, April 11, 12
Testing                          Mocha                          MochaWednesday, April 11, 12
Testing                          Mocha                          Mocha                          MochaWednesday, April 11, 12
Testing                          Mocha                          Mocha                          Mocha                      ...
IV                          The Future of Web Apps...?Wednesday, April 11, 12
A New Area of Confusion...                             http://stackoverflow.com/questions/7996883/Wednesday, April 11, 12
Where is Your Code?                          http://stackoverflow.com/questions/7996883/Wednesday, April 11, 12
Where is Your Code?                          http://stackoverflow.com/questions/7996883/Wednesday, April 11, 12
Breaking the Client-Server                                 BoundariesWednesday, April 11, 12
Breaking the Client-Server                                   Boundaries                          Stitch (37signals)Wednesd...
Breaking the Client-Server                                   Boundaries                          Stitch (37signals)       ...
Breaking the Client-Server                                   Boundaries                          Stitch (37signals)       ...
Wednesday, April 11, 12
Wednesday, April 11, 12
Thanks! Questions?                          Follow me @trevorburnham and @coffeescript                             Check o...
Upcoming SlideShare
Loading in...5
×

The CoffeeScript Edge

2,096

Published on

CoffeeScript talk given at Philly Emerging Tech for the Enterprise conference (2012) by Trevor Burnham.

Published in: Technology

Transcript of "The CoffeeScript Edge"

  1. 1. The CoffeeScript Edge Presented by Trevor Burnham at Philly ETE 2012Wednesday, April 11, 12
  2. 2. Who Am I?Wednesday, April 11, 12
  3. 3. http://pragprog.com/book/tbcoffee/coffeescriptWednesday, April 11, 12
  4. 4. “This book helps readers become better JavaScripters in the process of learning CoffeeScript. What’s more, this book is a blast to read.” —Brendan Eich http://pragprog.com/book/tbcoffee/coffeescriptWednesday, April 11, 12
  5. 5. Preface The Compleat History of JavaScriptWednesday, April 11, 12
  6. 6. 1995 to 2003: Ancient JavaScriptWednesday, April 11, 12
  7. 7. Paul Graham on JavaScript:Wednesday, April 11, 12
  8. 8. Paul Graham on JavaScript: “I would not even use Javascript, if I were you... Most of the JavaScript I see on the Web isn’t necessary, and much of it breaks.” (“The Other Road Ahead,” 2001)Wednesday, April 11, 12
  9. 9. 2004-2008: Medieval JavaScriptWednesday, April 11, 12
  10. 10. Ajax!Wednesday, April 11, 12
  11. 11. Crockford!Wednesday, April 11, 12
  12. 12. Solid libraries!Wednesday, April 11, 12
  13. 13. Solid libraries! ...And probably others!Wednesday, April 11, 12
  14. 14. 2009-: Modern JavaScriptWednesday, April 11, 12
  15. 15. JavaScript on the ServerWednesday, April 11, 12
  16. 16. JavaScript as an Embedded Scripting LanguageWednesday, April 11, 12
  17. 17. JavaScript is Now FAST!Wednesday, April 11, 12
  18. 18. The New First Language? http://www.codecademy.com/Wednesday, April 11, 12
  19. 19. Everyone Who Knows JavaScript Feels Like Superman!Wednesday, April 11, 12
  20. 20. Wednesday, April 11, 12
  21. 21. “A Little Language”Wednesday, April 11, 12
  22. 22. TimelineWednesday, April 11, 12
  23. 23. Timeline Christmas 2009: First announced on HNWednesday, April 11, 12
  24. 24. Timeline Christmas 2009: First announced on HN Christmas 2010: 1.0 ReleasedWednesday, April 11, 12
  25. 25. Timeline Christmas 2009: First announced on HN Christmas 2010: 1.0 Released April 13, 2011: Added to Ruby on RailsWednesday, April 11, 12
  26. 26. https://github.com/rails/rails/commit/9f09aeb8273177fc2d09ebdafcc76ee8eb56fe33Wednesday, April 11, 12
  27. 27. David Heinemeier HanssonWednesday, April 11, 12
  28. 28. Ward CunninghamWednesday, April 11, 12
  29. 29. Ward Cunningham “CoffeeScript and the environment will all the powerful browsers is the closest I felt to the power I had twenty years ago in Smalltalk.” —Interview with InfoQ, November 2011Wednesday, April 11, 12
  30. 30. Brendan Eich (!)Wednesday, April 11, 12
  31. 31. Brendan Eich (!) CoffeeScript userWednesday, April 11, 12
  32. 32. Eich + Ashkenas at JsConf 2011Wednesday, April 11, 12
  33. 33. Who uses it? https://github.com/jashkenas/coffee-script/wiki/In-The-WildWednesday, April 11, 12
  34. 34. Ponder This... https://github.com/languages/CoffeeScriptWednesday, April 11, 12
  35. 35. I CoffeeScript: A Bird’s-Eye ViewWednesday, April 11, 12
  36. 36. Things CoffeeScript Isn’t:Wednesday, April 11, 12
  37. 37. Things CoffeeScript Isn’t: Ruby/PythonWednesday, April 11, 12
  38. 38. Things CoffeeScript Isn’t: Ruby/Python jQueryWednesday, April 11, 12
  39. 39. Things CoffeeScript Isn’t: Ruby/Python jQuery GWTWednesday, April 11, 12
  40. 40. Things CoffeeScript Isn’t: Ruby/Python jQuery GWT DartWednesday, April 11, 12
  41. 41. Things CoffeeScript Isn’t: Ruby/Python jQuery GWT Dart alert  Hello  World!    #  1  line!!!Wednesday, April 11, 12
  42. 42. “It’s Just JavaScript”Wednesday, April 11, 12
  43. 43. “It’s Just JavaScript” a  =  b          #  var  a  =  b;Wednesday, April 11, 12
  44. 44. “It’s Just JavaScript” a  =  b          #  var  a  =  b; x  is  y        #  x  ===  y;Wednesday, April 11, 12
  45. 45. “It’s Just JavaScript” a  =  b          #  var  a  =  b; x  is  y        #  x  ===  y; f  arg          #  f(arg);Wednesday, April 11, 12
  46. 46. “It’s Just JavaScript” a  =  b          #  var  a  =  b; x  is  y        #  x  ===  y; f  arg          #  f(arg); f  =  -­‐>  x #  var  f  =  function()  {return  x;};Wednesday, April 11, 12
  47. 47. “It’s Just JavaScript” a  =  b          #  var  a  =  b; x  is  y        #  x  ===  y; f  arg          #  f(arg); f  =  -­‐>  x #  var  f  =  function()  {return  x;}; No standard library. No additional types. Nothing but sweet, sweet syntax!Wednesday, April 11, 12
  48. 48. Ruby-ismsWednesday, April 11, 12
  49. 49. Ruby-isms "That  costs  $#{price}" #  "That  costs  $"  +  priceWednesday, April 11, 12
  50. 50. Streamlined Literals (I)Wednesday, April 11, 12
  51. 51. Streamlined Literals (I) [    "Commas?"    "We"    "dont"    "need"    "no"    "stinking"    "commmas!" ]Wednesday, April 11, 12
  52. 52. Streamlined Literals (II)Wednesday, April 11, 12
  53. 53. Streamlined Literals (II) outer:    inner:        "You  got  YAML  in  my  JSON!" {outer:    {inner:        "You  got  YAML  in  my  JSON!"    } }Wednesday, April 11, 12
  54. 54. {key: key} Shorthand and Destructuring AssignmentWednesday, April 11, 12
  55. 55. {key: key} Shorthand and Destructuring Assignment obj  =  {x}    #  obj  =  {x:  x};Wednesday, April 11, 12
  56. 56. {key: key} Shorthand and Destructuring Assignment obj  =  {x}    #  obj  =  {x:  x}; {x}  =  obj    #  x  =  obj.x;Wednesday, April 11, 12
  57. 57. {key: key} Shorthand and Destructuring Assignment obj  =  {x}    #  obj  =  {x:  x}; {x}  =  obj    #  x  =  obj.x; func  =  ({x})  -­‐> func  =  function(o)  {    var  x  =  o.x; }Wednesday, April 11, 12
  58. 58. More Syntactic SugarWednesday, April 11, 12
  59. 59. More Syntactic Sugar f()  if  z    #  if  (z)  {  f();  }Wednesday, April 11, 12
  60. 60. More Syntactic Sugar f()  if  z    #  if  (z)  {  f();  } f?()            #  if  (...)  {  f();  }Wednesday, April 11, 12
  61. 61. More Syntactic Sugar f()  if  z    #  if  (z)  {  f();  } f?()            #  if  (...)  {  f();  } obj?            #  obj  !=  null;Wednesday, April 11, 12
  62. 62. More Syntactic Sugar f()  if  z    #  if  (z)  {  f();  } f?()            #  if  (...)  {  f();  } obj?            #  obj  !=  null; x  ?  y          #  x  !=  null  ?  x  :  y;Wednesday, April 11, 12
  63. 63. More Syntactic Sugar f()  if  z    #  if  (z)  {  f();  } f?()            #  if  (...)  {  f();  } obj?            #  obj  !=  null; x  ?  y          #  x  !=  null  ?  x  :  y; Plus, significant whitespace...Wednesday, April 11, 12
  64. 64. The Beauty of Indentation source: https://github.com/TrevorBurnham/connect-assetsWednesday, April 11, 12
  65. 65. The Beauty of Indentation source: https://github.com/TrevorBurnham/connect-assets for  ext  in  exts    sourcePath  =  stripExt(route)  +  ".#{ext}"    try        stats  =  fs.statSync  @absPath(sourcePath)        if  ext  is  css            {mtime}  =  stats            if  timeEq  mtime,  @cache.map[route]?.mtime                css  =  @cache.map[route].data            else                css  =  fs.readFileSync  @absPath(sourcePath)Wednesday, April 11, 12
  66. 66. The Curly-Braced EquivalentWednesday, April 11, 12
  67. 67. The Curly-Braced Equivalent var  css,  ext,  mtime,  sourcePath,  stats,  _i,  _len,  _ref; for  (_i  =  0,  _len  =  exts.length;  _i  <  _len;  _i++)  {    ext  =  exts[_i];    sourcePath  =  stripExt(route)  +  ("."  +  ext);    try  {        stats  =  fs.statSync(this.absPath(sourcePath));        if  (ext  ===  css)  {            mtime  =  stats.mtime;            if  (timeEq(mtime,  (_ref  =  this.cache.map[route])  !=   null  ?  _ref.mtime  :  void  0))  {                css  =  this.cache.map[route].data;            }  else  {                css  =  fs.readFileSync(this.absPath(sourcePath));            }        }    }  catch  (_e)  {} }Wednesday, April 11, 12
  68. 68. Wednesday, April 11, 12
  69. 69. II Language FeaturesWednesday, April 11, 12
  70. 70. The WrapperWednesday, April 11, 12
  71. 71. The Wrapper CoffeeScript in: console.log  i  for  i  in  arr JavaScript out: (function()  {    var  i,  _i,  _len;    for  (_i  =  0,  _len  =  arr.length;  _i  <  _len;  _i++)  {        i  =  arr[_i];        console.log(i);    } }).call(this);Wednesday, April 11, 12
  72. 72. Why Use The Wrapper? source: http://stackoverflow.com/questions/5211638/Wednesday, April 11, 12
  73. 73. Wednesday, April 11, 12
  74. 74. Things That Don’t Create Scope in JavaScriptWednesday, April 11, 12
  75. 75. Things That Don’t Create Scope in JavaScript ConditionalsWednesday, April 11, 12
  76. 76. Things That Don’t Create Scope in JavaScript Conditionals ParenthesesWednesday, April 11, 12
  77. 77. Things That Don’t Create Scope in JavaScript Conditionals Parentheses ObjectsWednesday, April 11, 12
  78. 78. Things That Don’t Create Scope in JavaScript Conditionals Parentheses Objects LoopsWednesday, April 11, 12
  79. 79. Things That Don’t Create Scope in JavaScript Conditionals Parentheses Objects Loops Files (!)Wednesday, April 11, 12
  80. 80. Wednesday, April 11, 12
  81. 81. Don’t Let This Happen to You! http://blog.meloncard.com/post/12175941935Wednesday, April 11, 12
  82. 82. CoffeeScripters Need No var!Wednesday, April 11, 12
  83. 83. CoffeeScripters Need No var! console.log  i  for  i  in  arr (function()  {    var  i,  _i,  _len;    for  (_i  =  0,  _len  =  arr.length;  _i  <  _len;  _i++)  {        i  =  arr[_i];        console.log(i);    } }).call(this);Wednesday, April 11, 12
  84. 84. JS Best Practices, CoffeeScript Defaults!Wednesday, April 11, 12
  85. 85. JS Best Practices, CoffeeScript Defaults! Parappa the WrapperWednesday, April 11, 12
  86. 86. JS Best Practices, CoffeeScript Defaults! Parappa the Wrapper Proper IndentationWednesday, April 11, 12
  87. 87. JS Best Practices, CoffeeScript Defaults! Parappa the Wrapper Proper Indentation Avoiding ==Wednesday, April 11, 12
  88. 88. JS Best Practices, CoffeeScript Defaults! Parappa the Wrapper Proper Indentation Avoiding == Packaging extensible objects as “classes”Wednesday, April 11, 12
  89. 89. Plain, Ordinary JavaScript ObjectsWednesday, April 11, 12
  90. 90. Plain, Ordinary JavaScript Objects lifeEtAl = answer: 42 showAnswer: -> console.log @answer #  @  ==  thisWednesday, April 11, 12
  91. 91. Plain, Ordinary JavaScript Objects lifeEtAl = answer: 42 showAnswer: -> console.log @answer #  @  ==  this lifeEtAl.showAnswer()Wednesday, April 11, 12
  92. 92. Plain, Ordinary JavaScript Objects lifeEtAl = answer: 42 showAnswer: -> console.log @answer #  @  ==  this lifeEtAl.showAnswer() setTimeout  lifeEtAl.showAnswer,  10Wednesday, April 11, 12
  93. 93. Wednesday, April 11, 12
  94. 94. Classes to the Rescue!Wednesday, April 11, 12
  95. 95. Classes to the Rescue! class LifeEtAl answer: 42 showAnswer: => # fat -> console.log @answerWednesday, April 11, 12
  96. 96. Classes to the Rescue! class LifeEtAl answer: 42 showAnswer: => # fat -> console.log @answer myLife = new LifeEtAlWednesday, April 11, 12
  97. 97. Classes to the Rescue! class LifeEtAl answer: 42 showAnswer: => # fat -> console.log @answer myLife = new LifeEtAl setTimeout myLife.showAnswer, 10Wednesday, April 11, 12
  98. 98. How About a Little Privacy?Wednesday, April 11, 12
  99. 99. How About a Little Privacy? class LifeEtAl answer = 42 showAnswer: -> console.log answerWednesday, April 11, 12
  100. 100. How About a Little Privacy? class LifeEtAl answer = 42 showAnswer: -> console.log answer myLife = new LifeEtAlWednesday, April 11, 12
  101. 101. How About a Little Privacy? class LifeEtAl answer = 42 showAnswer: -> console.log answer myLife = new LifeEtAl setTimeout myLife.showAnswer, 10Wednesday, April 11, 12
  102. 102. Using a ConstructorWednesday, April 11, 12
  103. 103. Using a Constructor class Circle twoPi = Math.PI * 2 constructor: (@radius) -> @radiusSqr = Math.pow @radius, 2 diameter: => twoPi * @radius area: => Math.PI * @radiusSqrWednesday, April 11, 12
  104. 104. Using a Constructor class Circle twoPi = Math.PI * 2 constructor: (@radius) -> @radiusSqr = Math.pow @radius, 2 diameter: => twoPi * @radius area: => Math.PI * @radiusSqr c = new Circle(5) console.log c.diameter() # 31.4159 console.log c.area() # 78.5398Wednesday, April 11, 12
  105. 105. Let’s Try a Little InheritanceWednesday, April 11, 12
  106. 106. Let’s Try a Little Inheritance class  Document  extends  Backbone.Model    defaults:        title:  UntitledWednesday, April 11, 12
  107. 107. Doing Inheritance via a JavaScript LibraryWednesday, April 11, 12
  108. 108. Doing Inheritance via a JavaScript Library var  Document  =  Backbone.Model.extend({    defaults:  {        title:  Untitled    } });Wednesday, April 11, 12
  109. 109. Wednesday, April 11, 12
  110. 110. I. The Prototype ChainWednesday, April 11, 12
  111. 111. I. The Prototype Chain class  Document  extends  Backbone.Model    defaults:        title:  UntitledWednesday, April 11, 12
  112. 112. I. The Prototype Chain class  Document  extends  Backbone.Model    defaults:        title:  Untitled doc  =  new  DocumentWednesday, April 11, 12
  113. 113. I. The Prototype Chain class  Document  extends  Backbone.Model    defaults:        title:  Untitled doc  =  new  Document Document::  is  Document.prototypeWednesday, April 11, 12
  114. 114. I. The Prototype Chain class  Document  extends  Backbone.Model    defaults:        title:  Untitled doc  =  new  Document Document::  is  Document.prototype doc.defaults  is  Document::defaultsWednesday, April 11, 12
  115. 115. I. The Prototype Chain class  Document  extends  Backbone.Model    defaults:        title:  Untitled doc  =  new  Document Document::  is  Document.prototype doc.defaults  is  Document::defaults doc.validate  is  Backbone.Model::validateWednesday, April 11, 12
  116. 116. I. The Prototype Chain class  Document  extends  Backbone.Model    defaults:        title:  Untitled doc  =  new  Document Document::  is  Document.prototype doc.defaults  is  Document::defaults doc.validate  is  Backbone.Model::validate doc.hasOwnProperty  is  Object::hasOwnPropertyWednesday, April 11, 12
  117. 117. II. Superclass Methods Can Be Invoked With superWednesday, April 11, 12
  118. 118. II. Superclass Methods Can Be Invoked With super class  AppleDevice    constructor:  (cost)  -­‐>        bankAccount.deduct  cost        bankAccount.deduct  cost  /  4  #  AppleCareWednesday, April 11, 12
  119. 119. II. Superclass Methods Can Be Invoked With super class  AppleDevice    constructor:  (cost)  -­‐>        bankAccount.deduct  cost        bankAccount.deduct  cost  /  4  #  AppleCare class  iPhone  extends  AppleDevice    constructor:  (cost)  -­‐>        super    #  equivalent  to  super(cost)        setInterval  (-­‐>            bankAccount.deduct  cost  /  4        ),  ONE_MONTHWednesday, April 11, 12
  120. 120. III. Superclass Properties are CopiedWednesday, April 11, 12
  121. 121. III. Superclass Properties are Copied class  Primate    @thumbs  =  opposableWednesday, April 11, 12
  122. 122. III. Superclass Properties are Copied class  Primate    @thumbs  =  opposable class  Human  extends  PrimateWednesday, April 11, 12
  123. 123. III. Superclass Properties are Copied class  Primate    @thumbs  =  opposable class  Human  extends  Primate Human.thumbs  is  Primate.thumbs  is  opposableWednesday, April 11, 12
  124. 124. Wednesday, April 11, 12
  125. 125. III Working with CoffeeScriptWednesday, April 11, 12
  126. 126. Installing coffeeWednesday, April 11, 12
  127. 127. Installing coffee Step 1: Install NodeWednesday, April 11, 12
  128. 128. Installing coffee Step 1: Install Node Step 2: npm  install  -­‐g  coffee-­‐scriptWednesday, April 11, 12
  129. 129. Installing coffee Step 1: Install Node Step 2: npm  install  -­‐g  coffee-­‐script Want a different version? npm  install  -­‐g  coffee-­‐script@1.2.0Wednesday, April 11, 12
  130. 130. Installing coffee Step 1: Install Node Step 2: npm  install  -­‐g  coffee-­‐script Want a different version? npm  install  -­‐g  coffee-­‐script@1.2.0Wednesday, April 11, 12
  131. 131. CompilingWednesday, April 11, 12
  132. 132. Compiling coffee  -­‐wWednesday, April 11, 12
  133. 133. Compiling coffee  -­‐w Rails / other web frameworksWednesday, April 11, 12
  134. 134. Compiling coffee  -­‐w Rails / other web frameworks Middleman / other static web frameworksWednesday, April 11, 12
  135. 135. Compiling coffee  -­‐w Rails / other web frameworks Middleman / other static web frameworks LiveReload (Mac)Wednesday, April 11, 12
  136. 136. Compiling coffee  -­‐w Rails / other web frameworks Middleman / other static web frameworks LiveReload (Mac) Write a CakefileWednesday, April 11, 12
  137. 137. A Piece of Cake source: https://github.com/sstephenson/node-coffee-project/Wednesday, April 11, 12
  138. 138. A Piece of Cake source: https://github.com/sstephenson/node-coffee-project/ build = (watch, callback) ->   if typeof watch is function     callback = watch     watch = false   options = [-c, -o, lib, src]   options.unshift -w if watch   coffee = spawn coffee, options   coffee.stdout.on data, (data) -> print data.toString()   coffee.stderr.on data, (data) -> print data.toString()   coffee.on exit, (status) -> callback?() if status is 0 task build, Compile CoffeeScript source files, ->   build() task test, Run the test suite, ->   build ->     require.paths.unshift __dirname + "/lib"     {reporters} = require nodeunit     process.chdir __dirname     reporters.default.run [test]Wednesday, April 11, 12
  139. 139. Wednesday, April 11, 12
  140. 140. Editing https://github.com/jashkenas/coffee-script/wiki/Text-editor-pluginsWednesday, April 11, 12
  141. 141. Documenting source: http://coffeescript.org/documentation/docs/grammar.htmlWednesday, April 11, 12
  142. 142. TestingWednesday, April 11, 12
  143. 143. Testing MochaWednesday, April 11, 12
  144. 144. Testing Mocha MochaWednesday, April 11, 12
  145. 145. Testing Mocha Mocha MochaWednesday, April 11, 12
  146. 146. Testing Mocha Mocha Mocha http://visionmedia.github.com/mocha/Wednesday, April 11, 12
  147. 147. IV The Future of Web Apps...?Wednesday, April 11, 12
  148. 148. A New Area of Confusion... http://stackoverflow.com/questions/7996883/Wednesday, April 11, 12
  149. 149. Where is Your Code? http://stackoverflow.com/questions/7996883/Wednesday, April 11, 12
  150. 150. Where is Your Code? http://stackoverflow.com/questions/7996883/Wednesday, April 11, 12
  151. 151. Breaking the Client-Server BoundariesWednesday, April 11, 12
  152. 152. Breaking the Client-Server Boundaries Stitch (37signals)Wednesday, April 11, 12
  153. 153. Breaking the Client-Server Boundaries Stitch (37signals) browserifyWednesday, April 11, 12
  154. 154. Breaking the Client-Server Boundaries Stitch (37signals) browserify jsdomWednesday, April 11, 12
  155. 155. Wednesday, April 11, 12
  156. 156. Wednesday, April 11, 12
  157. 157. Thanks! Questions? Follow me @trevorburnham and @coffeescript Check out my new book, Async JavaScript http://leanpub.com/asyncjsWednesday, April 11, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×