Your SlideShare is downloading. ×
Ultimate Language Shootout IV: CoffeeScript
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ultimate Language Shootout IV: CoffeeScript


Published on

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

  • 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.
  • 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”produces main.js and
  • 37. So, in conclusion...
  • 38. CoffeeScript might notbe terrible.
  • 39. The end