Your SlideShare is downloading. ×
0
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Coffeescript: No really, it's just Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Coffeescript: No really, it's just Javascript

403

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
403
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×