Ultimate LanguageShootout IV: CoffeeScriptChiPyJune 13, 2013
What is CoffeeScript?It’s basically syntax sugar for JavaScript.Perhaps some analogies are in order...
If JavaScript is gluten-freehaggis pizza
Then CoffeeScript is anenchanted thincrusthandcrafted by Gandalf
If JavaScript is a corrupt,lecherous cop
Then CoffeeScript isSynchronized SwimmingDetective
If JavaScript is Smaug, theevil dragon
Then CoffeeScript is anadorable frog-shaped lighter
If JavaScript is a terrifyinghell clown
Then CoffeeScript is PrincessAmidala
If JavaScript is a smellydonkey with bad knees
Then CoffeeScript is a robotunicorn
If JavaScript is a grumpyblobfish
Then CoffeeScript is a muppetfish quartet
If JavaScript is a poisonmushroom
Then CoffeeScript is thehammer suit
If JavaScript is A Night atthe Roxbury
Then CoffeeScript isAnchorman
If JavaScript is a poo-flavored Tootsie Roll
Then CoffeeScript is a baconchocolate bar
If JavaScript is a lonecommando with a crappy gun
Then CoffeeScript is a giantrobot made of other robots
I guess I’m trying to say thatCoffeeScript might not be aterrible idea.
CoffeeScript does borrowfrom some of the bestlanguages.The Python and Rubyinfluences are glaringly obvious.
Let’s walk through a simpleCoffeeScript application.https://github.com/feihong/coffeescript-talk
Multiline comments###Implement a shuffle() function that randomlyrearranges the elements in a given array.Also demo its us...
Multiline commentnotes• Multiline comments appear as-is in thecompiled .js file, using the /* */ commentsyntax.
Main functionmain = ->array = (c.toUpperCase() for c in abcdefg)display array$(document.body).append <hr>for i in [1..6]sh...
Main function notes• Whitespace delimits blocks• Define function using -> operator• Array expression uses parentheses• Pare...
Shuffle functionshuffle = (array) ->i = array.lengthj = nullif i == 0returnwhile i -= 1j = Math.floor(Math.random() * (i+1)...
Shuffle function notes• Parentheses somewhat advised whencomplex expressions are passed into afunction• No colon at end of ...
Display functiondisplay = (array) ->para = $(<p></p>)$(document.body).append parafor char in arrayval = 60 # simplifiedsty...
Display function notes• Multiline string takes indentation intoaccount (resulting string doesn’t containextra spaces).• St...
CoffeeScript’s bigweaknessDebugging sucks! Errors in the console referto the generated .js file, not theoriginal .coffee file.
Chrome to the rescue!• Open Developer Tools• Click gear icon in lower-right corner• Check “Enable source maps”• Compile yo...
Compiling CoffeeScriptRunning “coffee -c -m main.coffee”produces main.js and main.map.
So, in conclusion...
CoffeeScript might notbe terrible.
The end
Upcoming SlideShare
Loading in...5
×

Ultimate Language Shootout IV: CoffeeScript

1,452

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,452
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ultimate Language Shootout IV: CoffeeScript

  1. 1. Ultimate LanguageShootout IV: CoffeeScriptChiPyJune 13, 2013
  2. 2. What is CoffeeScript?It’s basically syntax sugar for JavaScript.Perhaps some analogies are in order...
  3. 3. If JavaScript is gluten-freehaggis pizza
  4. 4. Then CoffeeScript is anenchanted thincrusthandcrafted by Gandalf
  5. 5. If JavaScript is a corrupt,lecherous cop
  6. 6. Then CoffeeScript isSynchronized SwimmingDetective
  7. 7. If JavaScript is Smaug, theevil dragon
  8. 8. Then CoffeeScript is anadorable frog-shaped lighter
  9. 9. If JavaScript is a terrifyinghell clown
  10. 10. Then CoffeeScript is PrincessAmidala
  11. 11. If JavaScript is a smellydonkey with bad knees
  12. 12. Then CoffeeScript is a robotunicorn
  13. 13. If JavaScript is a grumpyblobfish
  14. 14. Then CoffeeScript is a muppetfish quartet
  15. 15. If JavaScript is a poisonmushroom
  16. 16. Then CoffeeScript is thehammer suit
  17. 17. If JavaScript is A Night atthe Roxbury
  18. 18. Then CoffeeScript isAnchorman
  19. 19. If JavaScript is a poo-flavored Tootsie Roll
  20. 20. Then CoffeeScript is a baconchocolate bar
  21. 21. If JavaScript is a lonecommando with a crappy gun
  22. 22. Then CoffeeScript is a giantrobot made of other robots
  23. 23. I guess I’m trying to say thatCoffeeScript might not be aterrible idea.
  24. 24. CoffeeScript does borrowfrom some of the bestlanguages.The Python and Rubyinfluences are glaringly obvious.
  25. 25. Let’s walk through a simpleCoffeeScript application.https://github.com/feihong/coffeescript-talk
  26. 26. Multiline comments###Implement a shuffle() function that randomlyrearranges the elements in a given array.Also demo its usage and effect.###
  27. 27. Multiline commentnotes• Multiline comments appear as-is in thecompiled .js file, using the /* */ commentsyntax.
  28. 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. 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. 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. 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. 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. 33. Display function notes• Multiline string takes indentation intoaccount (resulting string doesn’t containextra spaces).• String interpolation requires double-quotedstrings
  34. 34. CoffeeScript’s bigweaknessDebugging sucks! Errors in the console referto the generated .js file, not theoriginal .coffee file.
  35. 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. 36. Compiling CoffeeScriptRunning “coffee -c -m main.coffee”produces main.js and main.map.
  37. 37. So, in conclusion...
  38. 38. CoffeeScript might notbe terrible.
  39. 39. The end
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×