A lighting talk on

1. CoffeeScript
Mike Silvis
Hungry Academy Class of 2012

2. CoffeeScript
Mike Silvis
Hungry Academy Class of 2012
@MIKESILVIS MIKESILVIS MIKE.SILVIS MIKE-SILVIS MIKE.SILVIS@

3. RAILS ASSET PIPELINE

4. var cubes, list, math, num, number,
opposite, race, square,
__slice = [].slice;
number = 42;
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

5. var cubes, list, math, num, number,
opposite, race, square,
__slice = [].slice;
number = 42;
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

6. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

7. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42;
}
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

8. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42;
}
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

9. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42; # Conditions:
} number = -42 if opposite
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

10. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42; # Conditions:
} number = -42 if opposite
square = function(x) {
return x * x;
};
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

11. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42; # Conditions:
} number = -42 if opposite
square = function(x) {
return x * x;
};
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

12. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42; # Conditions:
} number = -42 if opposite
square = function(x) {
return x * x; # Functions:
}; square = (x) -> x * x
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

13. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42; # Conditions:
} number = -42 if opposite
square = function(x) {
return x * x; # Functions:
}; square = (x) -> x * x
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

14. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42; # Conditions:
} number = -42 if opposite
square = function(x) {
return x * x; # Functions:
}; square = (x) -> x * x
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

15. var cubes, list, math, num, number, # Assignment:
opposite, race, square, number = 42
__slice = [].slice; opposite = true
number = 42;
if (opposite) {
number = -42; # Conditions:
} number = -42 if opposite
square = function(x) {
return x * x; # Functions:
}; square = (x) -> x * x
math = {
root: Math.sqrt,
# Objects:
square: square,
math =
cube: function(x) {
root: Math.sqrt
return x * square(x);
square: square
}
cube: (x) -> x * square x
};
JAVASCRIPT COFFEESCRIPT
COFFEESCRIPT IS A CLEAN JAVASCRIPT
IT TAKES JAVASCRIPT AND TURNS IT INTO MORE RUBY LIKE SYNTAX

16. alert "What about using jQuery?"

17. jQuery(function() {
return $("p").click(function() {
return $(this).slideUp();
});
});
JQUERY CLICK FUNCTION
JQUERY IS ALL THE SAME!!!
ONLY CLEANER!

18. jQuery(function() { jQuery ->
return $("p").click(function() { $("p").click ->
return $(this).slideUp(); $(this).slideUp()
});
});
JQUERY CLICK FUNCTION COFFEE CLICK
JQUERY IS ALL THE SAME!!!
ONLY CLEANER!

19. jQuery ->
coffee:
$(".points").click ->
alert Math.floor((Math.random()*100)+1) + " Points achieved!"
COFFEE IN YOUR VIEWS!
WITH SLIM

20. HTTP://JS2COFFEE.ORG/
USEFUL RESOURCES

21. HTTP://COFFEESCRIPT.ORG/
COFFEESCRIPT.ORG