Less is More with CoffeeScriptJo Cranford@jocranford
Understanding Code        
Writing Code                     Modifying Code                               Understanding Code                  
For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) {           var city = lis...
For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) {           var city = lis...
For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) {           var city = lis...
For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) {           var city = lis...
For “Own” Loopvar objectToString = function (obj) {         var key, val, _results;         _results = [];         for (ke...
For “Own” Loopvar objectToString = function (obj) {         var key, val, _results;         _results = [];         for (ke...
For “Own” Loopvar objectToString = function (obj) {         var key, val, _results;         _results = [];         for (ke...
For “Own” Loopvar objectToString = function (obj) {         var key, val, _results;         _results = [];         for (ke...
For “Own” Loopvar objectToString = function (obj) {         var key, val, _results;         _results = [];         for (ke...
Constructor - JavaScript var Region = function(states) {           this.states = states; }; Region.prototype.findStatesBeg...
Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) ->  state for state in ...
Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) ->  state for state in ...
Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) ->  state for state in ...
Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) ->  state for state in ...
Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) ->  state for state in ...
this and that var Clickable = function (baseElement) {         var that = this;         this.displayAlert = function() {  ...
this and that var Clickable = function (baseElement) {         var that = this;         this.displayAlert = function() {  ...
this and that var Clickable = function (baseElement) {            var that = this;            this.displayAlert = function...
this and that var Clickable = function (baseElement) {            var that = this;            this.displayAlert = function...
Average Lines Of Code                1.8X        JavaScript      CoffeeScript
Writing CodeUnderstanding Code                                        Modifying Code                             
Upcoming SlideShare
Loading in …5
×

Less ismorewithcoffeescript webdirectionsfeb2012

1,209
-1

Published on

Slides from my lightning talk at Web Directions in Sydney, 23 February 2012. I wanted to demonstrate some of the ways CoffeeScript makes my life easier as a developer, by making my JavaScript code much faster and easier to read.

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

  • Be the first to like this

No Downloads
Views
Total Views
1,209
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Less ismorewithcoffeescript webdirectionsfeb2012

  1. 1. Less is More with CoffeeScriptJo Cranford@jocranford
  2. 2. Understanding Code 
  3. 3. Writing Code  Modifying Code  Understanding Code 
  4. 4. For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) { var city = listOfCities[i]; weatherInCities.push(city.name + ":" + city.weather); }
  5. 5. For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) { var city = listOfCities[i]; weatherInCities.push(city.name + ":" + city.weather); }weatherInCities =(("#{city.name}: #{city.weather}") for city in listOfCities)
  6. 6. For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) { var city = listOfCities[i]; weatherInCities.push(city.name + ":" + city.weather); }weatherInCities =(("#{city.name}: #{city.weather}") for city in listOfCities)
  7. 7. For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) { var city = listOfCities[i]; weatherInCities.push(city.name + ":" + city.weather); }weatherInCities =(("#{city.name}: #{city.weather}") for city in listOfCities)
  8. 8. For “Own” Loopvar objectToString = function (obj) { var key, val, _results; _results = []; for (key in obj) { if (!obj.hasOwnProperty(key)) continue; val = obj[key]; if (val !== null) _results.push(key + ":" + val); } return _results.join(",");};
  9. 9. For “Own” Loopvar objectToString = function (obj) { var key, val, _results; _results = []; for (key in obj) { if (!obj.hasOwnProperty(key)) continue; val = obj[key]; if (val !== null) _results.push(key + ":" + val); } return _results.join(",");};objectToString = (obj) -> ("#{key}:#{val}" for own key, val of obj when val isnt null).join(“,")
  10. 10. For “Own” Loopvar objectToString = function (obj) { var key, val, _results; _results = []; for (key in obj) { if (!obj.hasOwnProperty(key)) continue; val = obj[key]; if (val !== null) _results.push(key + ":" + val); } return _results.join(",");};objectToString = (obj) -> ("#{key}:#{val}" for own key, val of obj when val isnt null).join(“,")
  11. 11. For “Own” Loopvar objectToString = function (obj) { var key, val, _results; _results = []; for (key in obj) { if (!obj.hasOwnProperty(key)) continue; val = obj[key]; if (val !== null) _results.push(key + ":" + val); } return _results.join(",");};objectToString = (obj) -> ("#{key}:#{val}" for own key, val of obj when val isnt null).join(“,")
  12. 12. For “Own” Loopvar objectToString = function (obj) { var key, val, _results; _results = []; for (key in obj) { if (!obj.hasOwnProperty(key)) continue; val = obj[key]; if (val !== null) _results.push(key + ":" + val); } return _results.join(",");};objectToString = (obj) -> ("#{key}:#{val}" for own key, val of obj when val isnt null).join(“,")
  13. 13. Constructor - JavaScript var Region = function(states) { this.states = states; }; Region.prototype.findStatesBeginningWith = function(letter) { var matchingStates = []; for (var i = 0;i < this.states.length; i++) { state = this.states[i]; if (state.substr(0,1) === letter) { matchingStates.push(state) } } return matchingStates; };
  14. 14. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  15. 15. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  16. 16. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  17. 17. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  18. 18. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  19. 19. this and that var Clickable = function (baseElement) { var that = this; this.displayAlert = function() { alert("You just clicked me!"); }; $(baseElement).click(that.displayAlert); };
  20. 20. this and that var Clickable = function (baseElement) { var that = this; this.displayAlert = function() { alert("You just clicked me!"); }; $(baseElement).click(that.displayAlert); };
  21. 21. this and that var Clickable = function (baseElement) { var that = this; this.displayAlert = function() { alert("You just clicked me!"); }; $(baseElement).click(that.displayAlert); }; class window.Clickable constructor: (@baseElement) -> $(@baseElement).click(@displayAlert) displayAlert: => window.alert("You just clicked me!")
  22. 22. this and that var Clickable = function (baseElement) { var that = this; this.displayAlert = function() { alert("You just clicked me!"); }; $(baseElement).click(that.displayAlert); }; class window.Clickable constructor: (@baseElement) -> $(@baseElement).click(@displayAlert) displayAlert: => window.alert("You just clicked me!")
  23. 23. Average Lines Of Code 1.8X JavaScript CoffeeScript
  24. 24. Writing CodeUnderstanding Code   Modifying Code 
  1. A particular slide catching your eye?

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

×