• Like
Ultimate Language Shootout IV: CoffeeScript
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Ultimate Language Shootout IV: CoffeeScript


A presentation on CoffeeScript given at ChiPy's 2013 Ultimate Language Shootout on June 13, 2013. …

A presentation on CoffeeScript given at ChiPy's 2013 Ultimate Language Shootout on June 13, 2013.


Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Ultimate LanguageShootout IV: CoffeeScriptChiPyJune 13, 2013
  • 2. What is CoffeeScript?It’s basically syntax sugar for JavaScript.Perhaps some analogies are in order...
  • 3. If JavaScript is gluten-freehaggis pizza
  • 4. Then CoffeeScript is anenchanted thincrusthandcrafted by Gandalf
  • 5. If JavaScript is a corrupt,lecherous cop
  • 6. Then CoffeeScript isSynchronized SwimmingDetective
  • 7. If JavaScript is Smaug, theevil dragon
  • 8. Then CoffeeScript is anadorable frog-shaped lighter
  • 9. If JavaScript is a terrifyinghell clown
  • 10. Then CoffeeScript is PrincessAmidala
  • 11. If JavaScript is a smellydonkey with bad knees
  • 12. Then CoffeeScript is a robotunicorn
  • 13. If JavaScript is a grumpyblobfish
  • 14. Then CoffeeScript is a muppetfish quartet
  • 15. If JavaScript is a poisonmushroom
  • 16. Then CoffeeScript is thehammer suit
  • 17. If JavaScript is A Night atthe Roxbury
  • 18. Then CoffeeScript isAnchorman
  • 19. If JavaScript is a poo-flavored Tootsie Roll
  • 20. Then CoffeeScript is a baconchocolate bar
  • 21. If JavaScript is a lonecommando with a crappy gun
  • 22. Then CoffeeScript is a giantrobot made of other robots
  • 23. I guess I’m trying to say thatCoffeeScript might not be aterrible idea.
  • 24. CoffeeScript does borrowfrom some of the bestlanguages.The Python and Rubyinfluences are glaringly obvious.
  • 25. Let’s walk through a simpleCoffeeScript application.https://github.com/feihong/coffeescript-talk
  • 26. Multiline comments###Implement a shuffle() function that randomlyrearranges the elements in a given array.Also demo its usage and effect.###
  • 27. Multiline commentnotes• Multiline comments appear as-is in thecompiled .js file, using the /* */ commentsyntax.
  • 28. Main functionmain = ->array = (c.toUpperCase() for c in abcdefg)display array$(document.body).append <hr>for i in [1..6]shuffle arraydisplay array
  • 29. Main function notes• Whitespace delimits blocks• Define function using -> operator• Array expression uses parentheses• Parentheses not required for functioninvocation• Ranges specified using [a..b]• No colon at end of looping statement
  • 30. Shuffle functionshuffle = (array) ->i = array.lengthj = nullif i == 0returnwhile i -= 1j = Math.floor(Math.random() * (i+1))[array[i], array[j]] = [array[j], array[i]]
  • 31. Shuffle function notes• Parentheses somewhat advised whencomplex expressions are passed into afunction• No colon at end of conditional statement• Destructuring assignment requires squarebrackets
  • 32. Display functiondisplay = (array) ->para = $(<p></p>)$(document.body).append parafor char in arrayval = 60 # simplifiedstyle = """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 intoaccount (resulting string doesn’t containextra spaces).• String interpolation requires double-quotedstrings
  • 34. CoffeeScript’s bigweaknessDebugging sucks! Errors in the console referto the generated .js file, not theoriginal .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 -moption
  • 36. Compiling CoffeeScriptRunning “coffee -c -m main.coffee”produces main.js and main.map.
  • 37. So, in conclusion...
  • 38. CoffeeScript might notbe terrible.
  • 39. The end