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.

1. Less is More with CoffeeScript
Jo Cranford
@jocranfor
d

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” Loop
var 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” Loop
var 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” Loop
var 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” Loop
var 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” Loop
var 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 - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter

15. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter

16. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter

17. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter

18. Constructor - CoffeeScript
class 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 Code
Understanding Code 

Modifying Code
