Less ismorewithcoffeescript webdirectionsfeb2012
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Less ismorewithcoffeescript webdirectionsfeb2012

on

  • 1,262 views

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 ...

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.

Statistics

Views

Total Views
1,262
Views on SlideShare
1,262
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Less ismorewithcoffeescript webdirectionsfeb2012 Presentation Transcript

  • 1. Less is More with CoffeeScriptJo Cranford@jocranford
  • 2. Understanding Code 
  • 3. Writing Code  Modifying Code  Understanding Code 
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  • 15. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  • 16. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  • 17. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  • 18. Constructor - CoffeeScriptclass Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letter
  • 19. this and that var Clickable = function (baseElement) { var that = this; this.displayAlert = function() { alert("You just clicked me!"); }; $(baseElement).click(that.displayAlert); };
  • 20. this and that var Clickable = function (baseElement) { var that = this; this.displayAlert = function() { alert("You just clicked me!"); }; $(baseElement).click(that.displayAlert); };
  • 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. 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. Average Lines Of Code 1.8X JavaScript CoffeeScript
  • 24. Writing CodeUnderstanding Code   Modifying Code 