ultimate language shootout iv: coffeescript
DESCRIPTION
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-coffeescriptTRANSCRIPT
![Page 1: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/1.jpg)
Ultimate Language Shootout IV: CoffeeScript
ChiPyJune 13, 2013
![Page 2: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/2.jpg)
What is CoffeeScript?
It’s basically syntax sugar for JavaScript.
Perhaps some analogies are in order...
![Page 3: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/3.jpg)
If JavaScript is gluten-free haggis pizza
![Page 4: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/4.jpg)
Then CoffeeScript is an enchanted thincrust
handcrafted by Gandalf
![Page 5: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/5.jpg)
If JavaScript is a corrupt, lecherous cop
![Page 6: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/6.jpg)
Then CoffeeScript is Synchronized Swimming
Detective
![Page 7: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/7.jpg)
If JavaScript is Smaug, the evil dragon
![Page 8: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/8.jpg)
Then CoffeeScript is an adorable frog-shaped lighter
![Page 9: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/9.jpg)
If JavaScript is a terrifying hell clown
![Page 10: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/10.jpg)
Then CoffeeScript is Princess Amidala
![Page 11: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/11.jpg)
If JavaScript is a smelly donkey with bad knees
![Page 12: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/12.jpg)
Then CoffeeScript is a robot unicorn
![Page 13: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/13.jpg)
If JavaScript is a grumpy blobfish
![Page 14: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/14.jpg)
Then CoffeeScript is a muppet fish quartet
![Page 15: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/15.jpg)
If JavaScript is a poison mushroom
![Page 16: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/16.jpg)
Then CoffeeScript is the hammer suit
![Page 17: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/17.jpg)
If JavaScript is A Night at the Roxbury
![Page 18: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/18.jpg)
Then CoffeeScript is Anchorman
![Page 19: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/19.jpg)
If JavaScript is a poo-flavored Tootsie Roll
![Page 20: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/20.jpg)
Then CoffeeScript is a bacon chocolate bar
![Page 21: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/21.jpg)
If JavaScript is a lone commando with a crappy gun
![Page 22: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/22.jpg)
Then CoffeeScript is a giant robot made of other robots
![Page 23: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/23.jpg)
I guess I’m trying to say that CoffeeScript might not be a
terrible idea.
![Page 24: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/24.jpg)
CoffeeScript does borrow from some of the best
languages.
The Python and Ruby influences are glaringly obvious.
![Page 25: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/25.jpg)
Let’s walk through a simple CoffeeScript application.
https://github.com/feihong/coffeescript-talk
![Page 26: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/26.jpg)
Multiline comments
###
Implement a shuffle() function that randomly rearranges the elements in a given array. Also demo its usage and effect.
###
![Page 27: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/27.jpg)
Multiline comment notes
• Multiline comments appear as-is in the compiled .js file, using the /* */ comment syntax.
![Page 28: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/28.jpg)
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
![Page 29: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/29.jpg)
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
![Page 30: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/30.jpg)
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]]
![Page 31: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/31.jpg)
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
![Page 32: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/32.jpg)
Display functiondisplay = (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
![Page 33: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/33.jpg)
Display function notes
• Multiline string takes indentation into account (resulting string doesn’t contain extra spaces).
• String interpolation requires double-quoted strings
![Page 34: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/34.jpg)
CoffeeScript’s big weakness
Debugging sucks! Errors in the console refer to the generated .js file, not the original .coffee file.
![Page 35: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/35.jpg)
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
![Page 36: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/36.jpg)
Compiling CoffeeScript
Running “coffee -c -m main.coffee”
produces main.js and main.map.
![Page 37: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/37.jpg)
So, in conclusion...
![Page 38: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/38.jpg)
CoffeeScript might not be terrible.
![Page 39: Ultimate Language Shootout IV: CoffeeScript](https://reader033.vdocuments.us/reader033/viewer/2022052505/554f46b2b4c905524c8b4668/html5/thumbnails/39.jpg)
The end