A presentation on CoffeeScript given at ChiPy's 2013 Ultimate Language Shootout on June 13, 2013. Video: http://pyvideo.org/video/1864/ultimate-language-shootout-iv-coffeescript

1. Ultimate Language
Shootout IV: CoffeeScript
ChiPy
June 13, 2013

2. What is CoffeeScript?
It’s basically syntax sugar for JavaScript.
Perhaps some analogies are in order...

3. If JavaScript is gluten-free
haggis pizza

4. Then CoffeeScript is an
enchanted thincrust
handcrafted by Gandalf

5. If JavaScript is a corrupt,
lecherous cop

6. Then CoffeeScript is
Synchronized Swimming
Detective

7. If JavaScript is Smaug, the
evil dragon

8. Then CoffeeScript is an
adorable frog-shaped lighter

9. If JavaScript is a terrifying
hell clown

10. Then CoffeeScript is Princess
Amidala

11. If JavaScript is a smelly
donkey with bad knees

12. Then CoffeeScript is a robot
unicorn

13. If JavaScript is a grumpy
blobfish

14. Then CoffeeScript is a muppet
fish quartet

15. If JavaScript is a poison
mushroom

16. Then CoffeeScript is the
hammer suit

17. If JavaScript is A Night at
the Roxbury

18. Then CoffeeScript is
Anchorman

19. If JavaScript is a poo-
flavored Tootsie Roll

20. Then CoffeeScript is a bacon
chocolate bar

21. If JavaScript is a lone
commando with a crappy gun

22. Then CoffeeScript is a giant
robot made of other robots

23. I guess I’m trying to say that
CoffeeScript might not be a
terrible idea.

24. CoffeeScript does borrow
from some of the best
languages.
The Python and Ruby
influences are glaringly obvious.

25. Let’s walk through a simple
CoffeeScript application.
https://github.com/feihong/coffeescript-talk

26. Multiline comments
###
Implement a shuffle() function that randomly
rearranges the elements in a given array.
Also demo its usage and effect.
###

27. Multiline comment
notes
• Multiline comments appear as-is in the
compiled .js file, using the /* */ comment
syntax.

28. Main function
main = ->
array = (c.toUpperCase() for c in 'abcdefg')
display array
$(document.body).append '<hr>'
for i in [1..6]
shuffle array
display array

29. Main function notes
• Whitespace delimits blocks
• Define function using -> operator
• Array expression uses parentheses
• Parentheses not required for function
invocation
• Ranges specified using [a..b]
• No colon at end of looping statement

30. Shuffle function
shuffle = (array) ->
i = array.length
j = null
if i == 0
return
while i -= 1
j = Math.floor(Math.random() * (i+1))
[array[i], array[j]] = [array[j], array[i]]

31. Shuffle function notes
• Parentheses somewhat advised when
complex expressions are passed into a
function
• No colon at end of conditional statement
• Destructuring assignment requires square
brackets

32. Display function
display = (array) ->
para = $('<p></p>')
$(document.body).append para
for char in array
val = 60 # simplified
style = """
background: rgb(#{val}, #{val}, #{val});
border: 1px solid black;
padding: 5px; margin: 5px;
"""
h = "<span style="#{style}">#{el}</span>"
para.append h

33. Display function notes
• Multiline string takes indentation into
account (resulting string doesn’t contain
extra spaces).
• String interpolation requires double-quoted
strings

34. CoffeeScript’s big
weakness
Debugging sucks! Errors in the console refer
to the generated .js file, not the
original .coffee file.

35. Chrome to the rescue!
• Open Developer Tools
• Click gear icon in lower-right corner
• Check “Enable source maps”
• Compile your .coffee files using the -m
option

36. Compiling CoffeeScript
Running “coffee -c -m main.coffee”
produces main.js and main.map.

37. So, in conclusion...

38. CoffeeScript might not
be terrible.

39. The end