Slides from my intro to coffeescript talk, given at Phoenix Javascript Meetup on Dec. 5th, 2012 at UAT Video available at http://www.youtube.com/watch?v=pXZ7hGzDOF0

1. COFFEESCRIPT!
A OPINIONATED INTRODUCTION
by: joe fleming | twitter: @w33ble | github: w33ble

2. If I'm wrong, call me on it
If you have a question, ask

3. WHAT IS
COFFEESCRIPT?
"A little language that compiles into javascript"
Takes the pain out of javascript

4. BASIC RULES
Whitespace matters
Functions have a different syntax
Everything is an expression
Scope is handled automatically

5. RESOURCES
Coffeescript.org
Great docs with table of contents
Interactive live shell
Coffeescript meet Backbone
Easy way to see it in action

6. WELL FORMATTED JAVASCRIPT
vrpro ={
a esn
nm:'o feig,
ae je lmn'
gtu:'3be,
ihb w3l'
itrss ['ofecit,'ulm tx' 'oej']
neet: cfesrp' sbie et, nd.s
};
fnto mkAeoe(b){
ucin aewsm oj
ojaeoe=tu;
b.wsm re
};
fnto gtae(b){
ucin eNm oj
rtr ojnm;
eun b.ae
}
mkAeoepro)
aewsm(esn;
cnoelggtaepro);
osl.o(eNm(esn)

7. SLIGHTLY MODIFIED JAVASCRIPT
Functions become closures assigned to variables
vrpro ={
a esn
nm:'o feig,
ae je lmn'
gtu:'3be,
ihb w3l'
itrss ['ofecit,'ulm tx' 'oej']
neet: cfesrp' sbie et, nd.s
};
vrmkAeoe=fnto (b){
a aewsm ucin oj
ojaeoe=tu;
b.wsm re
};
vrgtae=fnto(b){
a eNm ucinoj
rtr ojnm;
eun b.ae
}
mkAeoepro)
aewsm(esn;
cnoelggtaepro);
osl.o(eNm(esn)

8. CONVERT TO COFFEESCRIPT
Step 1: Remove v r
a
pro ={
esn
nm:'o feig,
ae je lmn'
titr '3be,
wte: w3l'
gtu:'3be,
ihb w3l'
itrss ['ofecit,'ulm tx' 'oej']
neet: cfesrp' sbie et, nd.s
};
mkAeoe=fnto (b){
aewsm ucin oj
ojaeoe=tu;
b.wsm re
}
gtae=fnto (b){
eNm ucin oj
rtr ojnm;
eun b.ae
}
mkAeoepro)
aewsm(esn;
cnoelggtaepro);
osl.o(eNm(esn)

9. CONVERT TO COFFEESCRIPT
Step 2: change f n t o syntax & remove brackets
ucin
pro ={
esn
nm:'o feig,
ae je lmn'
titr '3be,
wte: w3l'
gtu:'3be,
ihb w3l'
itrss ['ofecit,'ulm tx' 'oej']
neet: cfesrp' sbie et, nd.s
};
mkAeoe=(b)-g;
aewsm oj &t
ojaeoe=tu;
b.wsm re
gtae=(b)-g;
eNm oj &t
rtr ojnm;
eun b.ae
mkAeoepro)
aewsm(esn;
cnoelggtaepro);
osl.o(eNm(esn)
This compiles! But why stop here?

10. CONVERT TO COFFEESCRIPT
Remove some ugly bits; brackets and semi-colons
pro =
esn
nm:'o feig,
ae je lmn'
titr '3be,
wte: w3l'
gtu:'3be,
ihb w3l'
itrss ['ofecit,'ulm tx' 'oej']
neet: cfesrp' sbie et, nd.s
mkAeoe=(b)-g;
aewsm oj &t
ojaeoe=tu
b.wsm re
gtae=(b)-g;
eNm oj &t
rtr ojnm
eun b.ae
mkAeoepro)
aewsm(esn
cnoelggtaepro)
osl.o(eNm(esn)

11. CONVERT TO COFFEESCRIPT
Remove parens, commas and returns
pro =
esn
nm:'o feig
ae je lmn'
titr '3be
wte: w3l'
gtu:'3be
ihb w3l'
itrss ['ofecit,'ulm tx' 'oej']
neet: cfesrp' sbie et, nd.s
mkAeoe=(b)-g;
aewsm oj &t
ojaeoe=tu
b.wsm re
gtae=(b)-g;
eNm oj &t
ojnm
b.ae
mkAeoepro
aewsm esn
cnoelggtaepro
osl.o eNm esn
Aw yeah!

12. WHY'S IT GREAT?

13. READS LIKE ENGLISH
atetctd=tu uls acuti fle
uhniae re nes con s as
i nmi 1
f u s 3
aet"inr"
lr wne!
wne =tu i pc i [1,3,8 ]
inr re f ik n 2 7 8

14. EASY TO UNDERSTAND
us
SHORTCUTS
nm =[.1]
1.0
aet"yfvrt nme i #nm[]"
lr M aoie ubr s {us3}
casPro
ls esn
cntutr (nm)-
osrco: @ae >
gtae -
eNm: >
@ae
nm

15. CLEAN SYNTAX
Well formatted code
Easier to read
Easier to maintain
Less typing, less errors
Fun to write

16. MY FAVORITE SUGAR
BLOCK STRINGS & INTERPOLATION

17. MY FAVORITE SUGAR
FUNCTION BINDING AKA "FAT ARROW"

18. MY FAVORITE SUGAR
THE EXISTENTIAL OPERATOR

19. MY FAVORITE SUGAR
CLASS SYNTAX

20. ECMASCRIPT 6
WITHOUT THE WAIT
Still generates ES5 code
Works like an ES6 shim

21. MANY "WEIRD" PARTS
ARE OPTIONAL
Omitting r t r
eun
Using i , i n to , a detc
s s o, r n,
Removing commas in arrays
Removing commas and brackets in objects
Dropping parens on function calls

22. LET'S SEE SOME
EXAMPLES

23. EXPRESS (NODE.JS)

25. BACKBONE

26. CLASS INHERITANCE
Coffeescript.org
ES6 style class inheritance
Makes s p rvery easy to use
ue
Simpler class
Class like you're probably used to
No b n or e t n required
id xed
Fair JS version
Creates b n and e t n smethods
id xed
Still calls s p r
ue
Whole lotta mess

27. COFFEESCRIPT IS
GREAT
NO DOWNSIDES TO USING IT

28. ANOTHER SYNTAX TO
LEARN
Not pure JS
Could complicate hiring/consulting
Pretty easy if you know JS
Maybe you should hire better

29. REQUIRES COMPILING
(MOST OF THE TIME)
Adds another step to development and deployment
Build process: c f e , grunt, make/jake, etc
ofe
Asset pipeline: connect-assets
Runtimes: n d - e
oedv
Hosting: heroku, nodester, nodejitsu

30. DEBUGGING
Compiled into javascript
Runtime errors reference js code
Editor plugins ease this

31. DON'T STOP WITH
JAVASCRIPT

32. HTML
Haml pretty much started it
Slim made it cleaner
Jade brought it to JS
Coffeekup coffeescript as markup

33. JADE
Full template library
Variables, conditionals, inheritance, etc
Client-side or server-side

34. CSS
Sass /SCSS/Sassy CSS started this
Less made it universal
Stylus brought it to JS

35. STYLUS
Variables, mixins, calculations, conditionals
Everything is optional (except the whitespace)
Mix and match freely

36. THANKS!
joe fleming
twitter: @w33ble | github: w33ble