JavaScript is an awesome language but not without its faults. CoffeeScript aims to solve those and make JavaScript quicker and more efficient. Here's an introduction to it!

1. COFFEESCRIPT:
JAVASCRIPT, BUT
BETTER

2. WHO AM I?
www.jackfranklin.co.uk
@Jack_Franklin

3. COFFEESCRIPT:
JAVASCRIPT, BUT
BETTER

4. GOLDEN RULE OF COFFEESCRIPT
“it’s just javascript”

5. IN BRIEF, COFFEESCRIPT:
1. COMPILES INTO REGULAR JAVASCRIPT
2. SOLVES A LOT OF COMMON ISSUES & GRIPES
3. MAKES JAVASCRIPT QUICKER & EASIER TO
WRITE
4. IS JUST JAVASCRIPT

6. JAVASCRIPT:
$(“a”).click(function() {
alert(“hi”);
});

7. COFFEESCRIPT:
$(“a”).click ->
alert “hi”

8. DIFFERENCES:
1. INDENTATION MATTERS (NO { } NEEDED)
2. SEMI-COLONS NOT REQUIRED
3. NO PARENTHESIS AROUND ARGUMENTS
4. function() BECOMES ->

9. THREE EASY STEPS:
1. WRITE CODE IN .COFFEE FILE
2. COMPILE TO .JS (AND FIX ERRORS)
3. INCLUDE .JS FILE IN WEBSITE

10. COMPILING
1. INSTALL NODE.JS
2. INSTALL NPM (NODE PACKAGE MANAGER)
3. npm install -g coffee-script
4. coffee --watch --compile
example.coffee

11. IF TERMINAL SCARES YOU
1. WINDOWS:
https://github.com/alisey/CoffeeScript-
Compiler-for-Windows
2. MAC OS X: http://livereload.com/

12. COFFEESCRIPT
FEATURES

13. NO VAR:
a=2
#compiles to:
var a;
a = 2;

14. CODE IS PRIVATE:
(function() {
/*your code goes here*/
}).call(this);

15. GETS RID OF == & ===
CONFUSION
“true” == true //true
“true” === true //false
( WTF? )

16. GETS RID OF == & ===
CONFUSION
“true” is true //false
“true” is “true” //true

17. launch() if ignition is on
volume = 10 if band isnt SpinalTap
letTheWildRumpusBegin() unless answer is no
if car.speed < limit then accelerate()
winner = yes if pick in [47, 92, 13]

18. is <=> ===
isnt <=> !==
not <=> !
and <=> &&
or <=> ||
true, yes, on <=> true
false, no, off <=> false
@, this <=> this
of <=> in
in <=> //no JS equiv
#in tests for array presence
#of tests for object-key presence
(

19. in tests for array presence
of tests for object-key presence

20. BASIC FUNCTION SYNTAX
function heyBarcamp(m) {
alert(“Hey Barcamp! “ + m);
});

21. BASIC FUNCTION SYNTAX
heyBarcamp = (m) ->
alert “Hey BarCamp! “ + m

22. COMMENTING
#this is a comment
###
block comment!
OMG!
###

23. PLAYS NICE WITH LIBRARIES
(it’s just JavaScript, remember)
$(function() {
$(“body”).html(“HEY BARCAMP”);
});

24. PLAYS NICE WITH LIBRARIES
(it’s just JavaScript, remember)
$ ->
$(“body”).html “HEY BARCAMPERS”

25. LOVELY ITERATION
for attendee in barcampers when attendee.age
< 16
console.log “CHILD! “ + attendee.name

26. LOVELY ITERATION
tweets.push(
tweet.text.toLowerCase()
) for tweet in data

27. CLASSES
class Presentation
constructor (room) ->
@room = room
startPresentation ->
@loadSlideShow()
loadSlideShow ->
quiz = new Presentation “Pan’s Labyrinth”

28. CONDITIONALS
someFunc() if y > 20
x = 2 unless y > 10
currentUrl ?= window.location

29. SPLIT ASSIGNMENT
//regular JavaScript:
var myName = [“Jack”, “Franklin”];
var firstName = myName[0],
surName = myName[1];
//CoffeeScript:
myName = [“Jack”, “Franklin”]
[firstName, surName] = myName

30. VARIABLES IN STRINGS
heyBarcamp = (message) ->
alert “Hello BarCampers! I’ve got a message
for you #{message}”

31. VARIABLES IN STRINGS
heyBarcamp = (message) ->
alert “Hello BarCampers! I’ve got a message
for you #{message.toUpperCase()}”

32. DEFAULT FUNCTION VALUES
addNumbers = (a, b = 2) ->
alert a+b

33. WE’VE ONLY SCRATCHED THE
SURFACE!
1. DOCS & ONLINE SHELL ON GITHUB:
http://jashkenas.github.com/coffee-script/
2. FUN FACT: COFFEESCRIPT COMPILER WAS
WRITTEN IN COFFEESCRIPT

34. THANKS FOR LISTENING...ANY
(EASY) QUESTIONS?
@JACK_FRANKLIN