Your SlideShare is downloading. ×
Coffeescript: An Opinionated Introduction
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

Coffeescript: An Opinionated Introduction

1,753
views

Published on

Slides from my intro to coffeescript talk, given at Phoenix Javascript Meetup on Dec. 5th, 2012 at UAT …

Slides from my intro to coffeescript talk, given at Phoenix Javascript Meetup on Dec. 5th, 2012 at UAT

Video available at http://www.youtube.com/watch?v=pXZ7hGzDOF0


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. COFFEESCRIPT! A OPINIONATED INTRODUCTIONby: joe fleming | twitter: @w33ble | github: w33ble
  • 2. If Im wrong, call me on itIf you have a question, ask
  • 3. WHAT IS COFFEESCRIPT?"A little language that compiles into javascript" Takes the pain out of javascript
  • 4. BASIC RULESWhitespace mattersFunctions have a different syntaxEverything is an expressionScope is handled automatically
  • 5. RESOURCESCoffeescript.org Great docs with table of contents Interactive live shellCoffeescript meet Backbone Easy way to see it in action
  • 6. WELL FORMATTED JAVASCRIPTvrpro ={ a esn nm:o feig, ae je lmn gtu:3be, ihb w3l itrss [ofecit,ulm tx oej] neet: cfesrp sbie et, nd.s};fnto mkAeoe(b){ ucin aewsm oj ojaeoe=tu; b.wsm re};fnto gtae(b){ ucin eNm oj rtr ojnm; eun b.ae}mkAeoepro) aewsm(esn;cnoelggtaepro); osl.o(eNm(esn)
  • 7. SLIGHTLY MODIFIED JAVASCRIPTFunctions become closures assigned to variablesvrpro ={ a esn nm:o feig, ae je lmn gtu:3be, ihb w3l itrss [ofecit,ulm tx oej] neet: cfesrp sbie et, nd.s};vrmkAeoe=fnto (b){ a aewsm ucin oj ojaeoe=tu; b.wsm re};vrgtae=fnto(b){ a eNm ucinoj rtr ojnm; eun b.ae}mkAeoepro) aewsm(esn;cnoelggtaepro); osl.o(eNm(esn)
  • 8. CONVERT TO COFFEESCRIPT Step 1: Remove v r apro ={ esn nm:o feig, ae je lmn titr 3be, wte: w3l gtu:3be, ihb w3l itrss [ofecit,ulm tx oej] neet: cfesrp sbie et, nd.s};mkAeoe=fnto (b){ aewsm ucin oj ojaeoe=tu; b.wsm re}gtae=fnto (b){ eNm ucin oj rtr ojnm; eun b.ae}mkAeoepro) aewsm(esn;cnoelggtaepro); osl.o(eNm(esn)
  • 9. CONVERT TO COFFEESCRIPTStep 2: change f n t o syntax & remove brackets ucinpro ={ esn nm:o feig, ae je lmn titr 3be, wte: w3l gtu:3be, ihb w3l itrss [ofecit,ulm tx oej] neet: cfesrp sbie et, nd.s};mkAeoe=(b)-g; aewsm oj &t ojaeoe=tu; b.wsm regtae=(b)-g; eNm oj &t rtr ojnm; eun b.aemkAeoepro) aewsm(esn;cnoelggtaepro); osl.o(eNm(esn) This compiles! But why stop here?
  • 10. CONVERT TO COFFEESCRIPTRemove some ugly bits; brackets and semi-colonspro = esn nm:o feig, ae je lmn titr 3be, wte: w3l gtu:3be, ihb w3l itrss [ofecit,ulm tx oej] neet: cfesrp sbie et, nd.smkAeoe=(b)-g; aewsm oj &t ojaeoe=tu b.wsm regtae=(b)-g; eNm oj &t rtr ojnm eun b.aemkAeoepro) aewsm(esncnoelggtaepro) osl.o(eNm(esn)
  • 11. CONVERT TO COFFEESCRIPT Remove parens, commas and returnspro = esn nm:o feig ae je lmn titr 3be wte: w3l gtu:3be ihb w3l itrss [ofecit,ulm tx oej] neet: cfesrp sbie et, nd.smkAeoe=(b)-g; aewsm oj &t ojaeoe=tu b.wsm regtae=(b)-g; eNm oj &t ojnm b.aemkAeoepro aewsm esncnoelggtaepro osl.o eNm esn Aw yeah!
  • 12. WHYS IT GREAT?
  • 13. READS LIKE ENGLISHatetctd=tu uls acuti fle uhniae re nes con s asi nmi 1 f u s 3 aet"inr" lr wne!wne =tu i pc i [1,3,8 ] inr re f ik n 2 7 8
  • 14. EASY TO UNDERSTAND us SHORTCUTSnm =[.1] 1.0aet"yfvrt nme i #nm[]" lr M aoie ubr s {us3}casPro ls esn cntutr (nm)- osrco: @ae > gtae - eNm: > @ae nm
  • 15. CLEAN SYNTAX Well formatted code Easier to read Easier to maintain Less typing, less errors Fun to write
  • 16. MY FAVORITE SUGARBLOCK STRINGS & INTERPOLATION
  • 17. MY FAVORITE SUGARFUNCTION BINDING AKA "FAT ARROW"
  • 18. MY FAVORITE SUGAR THE EXISTENTIAL OPERATOR
  • 19. MY FAVORITE SUGAR CLASS SYNTAX
  • 20. ECMASCRIPT 6WITHOUT THE WAIT Still generates ES5 code Works like an ES6 shim
  • 21. MANY "WEIRD" PARTS ARE OPTIONAL Omitting r t r eun Using i , i n to , a detc s s o, r n, Removing commas in arrays Removing commas and brackets in objects Dropping parens on function calls
  • 22. LETS SEE SOME EXAMPLES
  • 23. EXPRESS (NODE.JS)
  • 24. BACKBONE
  • 25. CLASS INHERITANCE Coffeescript.org ES6 style class inheritance Makes s p rvery easy to use ue Simpler class Class like youre probably used to No b n or e t n required id xed Fair JS version Creates b n and e t n smethods id xed Still calls s p r ue Whole lotta mess
  • 26. COFFEESCRIPT IS GREAT NO DOWNSIDES TO USING IT
  • 27. ANOTHER SYNTAX TO LEARN Not pure JS Could complicate hiring/consulting Pretty easy if you know JS Maybe you should hire better
  • 28. REQUIRES COMPILING (MOST OF THE TIME)Adds another step to development and deploymentBuild process: c f e , grunt, make/jake, etc ofeAsset pipeline: connect-assetsRuntimes: n d - e oedvHosting: heroku, nodester, nodejitsu
  • 29. DEBUGGINGCompiled into javascriptRuntime errors reference js codeEditor plugins ease this
  • 30. DONT STOP WITH JAVASCRIPT
  • 31. HTMLHaml pretty much started itSlim made it cleanerJade brought it to JSCoffeekup coffeescript as markup
  • 32. JADEFull template library Variables, conditionals, inheritance, etcClient-side or server-side
  • 33. CSSSass /SCSS/Sassy CSS started thisLess made it universalStylus brought it to JS
  • 34. STYLUSVariables, mixins, calculations, conditionalsEverything is optional (except the whitespace) Mix and match freely
  • 35. THANKS! joe flemingtwitter: @w33ble | github: w33ble