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

WHAT I WILL DISCUSS1. What CoffeeScript Is2. Why It's a Great3. A few cons4. Things to Know in Advance5. The Basics

COFFEESCRIPT

WRITE ONELANGUAGE TO GET

ANOTHER?

SO WHAT ARE THEBENEFITS?

Forces consistencyGreat when working on teamsWrites great codeGreat way to sharpen your own skillsetForces namespacingGreat Resource for learning

SO EVERYTHING'S GREAT!NO!

SO WHAT ARE THECONS?

Not for beginnersRequires setup Gem/NPMLearning CurveCan breed lazy developersThat's all I can think of...

OVERALLYou can stop using CoffeeScript whenever you want

SO THERE'S NOTHING TO LOSE!

WHAT YOU SHOULDKNOW

WATCH YOUR SPACING

START BY USING JS2COFFEE.ORG

GET TEAM IN SYNC

DO NOT EDIT JAVASCRIPT

DO NOT START WITHTIGHT DEADLINE

DOES NOT TAKE PLACEOF BEST PRACTICES

INSTALLING COFFEESCRIPTNode Package Manager - NPM

Ruby Gem

NO MANUALINSTALLATION

YES

WHY USE A PACKAGEMANAGER

Handles dependenciesEasy to versionI don't want to manage them myself

DO NOT USE SUDOsudo chown -R $USER /usr/local

NPM

Remove -g if you don't want a global install

npm install -g coffee-script

GEMgem install coffee-script#Check to see if it's installedgem query local

CODE SNIPPETSSyntax to understand to help get you going

FUNCTIONSAre indicated by arrow

is equivalent to

example = -> x = 1 + 2

function example(){ var x = 1 + 2;}

PARAMETERS

is equivalent to

example = ( x, y ) ->

function example( x, y ){}

HOW TO CALL AFUNCTION

is equivalent to

example()

#When Passing params parenthesis are not neededexample x, y

example();example( x, y );

CREATING A VARIABLE

"var" is not allowed

x = 1

#The following is incorrectvar x = 1;

CONDITIONALSTATEMENTS

is equivalent to

example() if x and yalert() if x?

if ( x && y ) example();if (typeof x !== "undefined" && x !== null) { alert();}

INTERPOLATION

is equivalent to

alert "My name is #{@firstName} #{@lastName}"

alert("My name is " + this.firstName + " " + this.lastName);

COMPILING COFFEESCRIPT

watch makes the process seamless

coffee --compile --output js/ coffee/

#Use the watchcoffee --watch --compile --output js/ coffee/

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

THE ENDBY   

 

SURVEY

MAURICIA RAGLAND@SUMMANERD

ITSME@SUMMANERD.COM

http://goo.gl/k9FMW