• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Coffeescript: An Opinionated Introduction
 

Coffeescript: An Opinionated Introduction

on

  • 1,950 views

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

Statistics

Views

Total Views
1,950
Views on SlideShare
1,950
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Coffeescript: An Opinionated Introduction Coffeescript: An Opinionated Introduction Presentation Transcript

    • 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 to see it in action
    • 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)
    • 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)
    • 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)
    • 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?
    • 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)
    • 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!
    • 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,8 ] inr re f ik n 2 7 8
    • 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
    • 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 commas in arrays Removing commas and brackets in objects Dropping parens on function calls
    • 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 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
    • 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 should hire better
    • 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
    • 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