Upcoming SlideShare
×

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 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total Views
1,209
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
4
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.