COFFEESCRIPT!          A OPINIONATED INTRODUCTIONby: joe fleming | twitter: @w33ble | github: w33ble
If Im wrong, call me on itIf you have a question, ask
WHAT IS    COFFEESCRIPT?"A little language that compiles into javascript"         Takes the pain out of javascript
BASIC RULESWhitespace mattersFunctions have a different syntaxEverything is an expressionScope is handled automatically
RESOURCESCoffeescript.org  Great docs with table of contents  Interactive live shellCoffeescript meet Backbone  Easy way t...
WELL FORMATTED JAVASCRIPTvrpro ={ a esn   nm:o feig,   ae je lmn   gtu:3be,   ihb w3l   itrss [ofecit,ulm tx oej]   neet: ...
SLIGHTLY MODIFIED JAVASCRIPTFunctions become closures assigned to variablesvrpro ={ a esn   nm:o feig,   ae je lmn   gtu:3...
CONVERT TO COFFEESCRIPT          Step 1: Remove v r                          apro ={ esn   nm:o feig,   ae je lmn   titr 3...
CONVERT TO COFFEESCRIPTStep 2: change f n t o syntax & remove brackets                ucinpro ={ esn   nm:o feig,   ae je ...
CONVERT TO COFFEESCRIPTRemove some ugly bits; brackets and semi-colonspro = esn   nm:o feig,   ae je lmn   titr 3be,   wte...
CONVERT TO COFFEESCRIPT    Remove parens, commas and returnspro = esn   nm:o feig   ae je lmn   titr 3be   wte: w3l   gtu:...
WHYS IT GREAT?
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...
EASY TO UNDERSTAND us    SHORTCUTSnm =[.1]    1.0aet"yfvrt nme i #nm[]" lr M aoie ubr s {us3}casPro ls esn  cntutr (nm)-  ...
CLEAN SYNTAX  Well formatted code    Easier to read    Easier to maintain  Less typing, less errors  Fun to write
MY FAVORITE SUGARBLOCK STRINGS & INTERPOLATION
MY FAVORITE SUGARFUNCTION BINDING AKA "FAT ARROW"
MY FAVORITE SUGAR  THE EXISTENTIAL OPERATOR
MY FAVORITE SUGAR     CLASS SYNTAX
ECMASCRIPT 6WITHOUT THE WAIT   Still generates ES5 code      Works like an ES6 shim
MANY "WEIRD" PARTS  ARE OPTIONAL  Omitting r t r            eun  Using i , i n to , a detc         s s o, r n,  Removing c...
LETS SEE SOME  EXAMPLES
EXPRESS (NODE.JS)
BACKBONE
CLASS INHERITANCE  Coffeescript.org    ES6 style class inheritance    Makes s p rvery easy to use             ue  Simpler ...
COFFEESCRIPT IS    GREAT  NO DOWNSIDES TO USING IT
ANOTHER SYNTAX TO     LEARN   Not pure JS   Could complicate hiring/consulting   Pretty easy if you know JS   Maybe you sh...
REQUIRES COMPILING            (MOST OF THE TIME)Adds another step to development and deploymentBuild process: c f e , grun...
DEBUGGINGCompiled into javascriptRuntime errors reference js codeEditor plugins ease this
DONT STOP WITH  JAVASCRIPT
HTMLHaml pretty much started itSlim made it cleanerJade brought it to JSCoffeekup coffeescript as markup
JADEFull template library   Variables, conditionals, inheritance, etcClient-side or server-side
CSSSass /SCSS/Sassy CSS started thisLess made it universalStylus brought it to JS
STYLUSVariables, mixins, calculations, conditionalsEverything is optional (except the whitespace)  Mix and match freely
THANKS!           joe flemingtwitter: @w33ble | github: w33ble
Coffeescript: An Opinionated Introduction
Upcoming SlideShare
Loading in...5
×

Coffeescript: An Opinionated Introduction

1,809

Published on

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,809
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Coffeescript: An Opinionated Introduction

  1. 1. COFFEESCRIPT! A OPINIONATED INTRODUCTIONby: joe fleming | twitter: @w33ble | github: w33ble
  2. 2. If Im wrong, call me on itIf you have a question, ask
  3. 3. WHAT IS COFFEESCRIPT?"A little language that compiles into javascript" Takes the pain out of javascript
  4. 4. BASIC RULESWhitespace mattersFunctions have a different syntaxEverything is an expressionScope is handled automatically
  5. 5. RESOURCESCoffeescript.org Great docs with table of contents Interactive live shellCoffeescript meet Backbone Easy way to see it in action
  6. 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. 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. 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. 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. 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. 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. 12. WHYS IT GREAT?
  13. 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. 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. 15. CLEAN SYNTAX Well formatted code Easier to read Easier to maintain Less typing, less errors Fun to write
  16. 16. MY FAVORITE SUGARBLOCK STRINGS & INTERPOLATION
  17. 17. MY FAVORITE SUGARFUNCTION BINDING AKA "FAT ARROW"
  18. 18. MY FAVORITE SUGAR THE EXISTENTIAL OPERATOR
  19. 19. MY FAVORITE SUGAR CLASS SYNTAX
  20. 20. ECMASCRIPT 6WITHOUT THE WAIT Still generates ES5 code Works like an ES6 shim
  21. 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. 22. LETS SEE SOME EXAMPLES
  23. 23. EXPRESS (NODE.JS)
  24. 24. BACKBONE
  25. 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. 26. COFFEESCRIPT IS GREAT NO DOWNSIDES TO USING IT
  27. 27. ANOTHER SYNTAX TO LEARN Not pure JS Could complicate hiring/consulting Pretty easy if you know JS Maybe you should hire better
  28. 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. 29. DEBUGGINGCompiled into javascriptRuntime errors reference js codeEditor plugins ease this
  30. 30. DONT STOP WITH JAVASCRIPT
  31. 31. HTMLHaml pretty much started itSlim made it cleanerJade brought it to JSCoffeekup coffeescript as markup
  32. 32. JADEFull template library Variables, conditionals, inheritance, etcClient-side or server-side
  33. 33. CSSSass /SCSS/Sassy CSS started thisLess made it universalStylus brought it to JS
  34. 34. STYLUSVariables, mixins, calculations, conditionalsEverything is optional (except the whitespace) Mix and match freely
  35. 35. THANKS! joe flemingtwitter: @w33ble | github: w33ble

×