a sip of coffee mauricia ragland
DESCRIPTION
TRANSCRIPT
![Page 1: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/1.jpg)
A SIP OFCOFFEESCRIPT
TO GET YOU STARTED
FRONT END DEVELOPERS OF MIAMI
March 27, 2013 Created by /
SURVEY
Mauricia Ragland @summnerd
http://goo.gl/k9FMW
![Page 2: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/2.jpg)
WHAT I WILL DISCUSS1. What CoffeeScript Is2. Why It's a Great3. A few cons4. Things to Know in Advance5. The Basics
![Page 3: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/3.jpg)
![Page 4: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/4.jpg)
COFFEESCRIPT
![Page 5: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/5.jpg)
WRITE ONELANGUAGE TO GET
ANOTHER?
![Page 6: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/6.jpg)
SO WHAT ARE THEBENEFITS?
Forces consistencyGreat when working on teamsWrites great codeGreat way to sharpen your own skillsetForces namespacingGreat Resource for learning
![Page 7: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/7.jpg)
SO EVERYTHING'S GREAT!NO!
![Page 8: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/8.jpg)
SO WHAT ARE THECONS?
Not for beginnersRequires setup Gem/NPMLearning CurveCan breed lazy developersThat's all I can think of...
![Page 9: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/9.jpg)
OVERALLYou can stop using CoffeeScript whenever you want
SO THERE'S NOTHING TO LOSE!
![Page 10: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/10.jpg)
WHAT YOU SHOULDKNOW
![Page 11: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/11.jpg)
WATCH YOUR SPACING
![Page 13: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/13.jpg)
GET TEAM IN SYNC
![Page 14: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/14.jpg)
DO NOT EDIT JAVASCRIPT
![Page 15: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/15.jpg)
DO NOT START WITHTIGHT DEADLINE
![Page 16: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/16.jpg)
DOES NOT TAKE PLACEOF BEST PRACTICES
![Page 17: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/17.jpg)
INSTALLING COFFEESCRIPTNode Package Manager - NPM
Ruby Gem
![Page 18: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/18.jpg)
NO MANUALINSTALLATION
YES
WHY USE A PACKAGEMANAGER
Handles dependenciesEasy to versionI don't want to manage them myself
![Page 19: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/19.jpg)
DO NOT USE SUDOsudo chown -R $USER /usr/local
![Page 20: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/20.jpg)
NPM
Remove -g if you don't want a global install
npm install -g coffee-script
![Page 21: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/21.jpg)
GEMgem install coffee-script#Check to see if it's installedgem query local
![Page 22: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/22.jpg)
CODE SNIPPETSSyntax to understand to help get you going
![Page 23: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/23.jpg)
FUNCTIONSAre indicated by arrow
is equivalent to
example = -> x = 1 + 2
function example(){ var x = 1 + 2;}
![Page 24: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/24.jpg)
PARAMETERS
is equivalent to
example = ( x, y ) ->
function example( x, y ){}
![Page 25: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/25.jpg)
HOW TO CALL AFUNCTION
is equivalent to
example()
#When Passing params parenthesis are not neededexample x, y
example();example( x, y );
![Page 26: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/26.jpg)
CREATING A VARIABLE
"var" is not allowed
x = 1
#The following is incorrectvar x = 1;
![Page 27: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/27.jpg)
CONDITIONALSTATEMENTS
is equivalent to
example() if x and yalert() if x?
if ( x && y ) example();if (typeof x !== "undefined" && x !== null) { alert();}
![Page 28: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/28.jpg)
INTERPOLATION
is equivalent to
alert "My name is #{@firstName} #{@lastName}"
alert("My name is " + this.firstName + " " + this.lastName);
![Page 29: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/29.jpg)
COMPILING COFFEESCRIPT
watch makes the process seamless
coffee --compile --output js/ coffee/
#Use the watchcoffee --watch --compile --output js/ coffee/
![Page 30: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/30.jpg)
RESOURCESCOFFEESCRIPT
NPM
RUBY GEM
Code sample used during talk:
Official SiteJS2Coffee
Intro to NPM10 Things you can do with NPM
Online Manual
https://github.com/summanerd/asipofcoffee
![Page 31: A sip of coffee mauricia ragland](https://reader033.vdocuments.mx/reader033/viewer/2022042813/54852533b4af9fbd5d8b48cd/html5/thumbnails/31.jpg)
THE ENDBY
SURVEY
MAURICIA RAGLAND@SUMMANERD
http://goo.gl/k9FMW