Coffeescript: An Opinionated Introduction

COFFEESCRIPT!A OPINIONATED INTRODUCTION

by: | twitter: | github: joe fleming @w33ble w33ble

If I'm wrong, call me on itIf you have a question, ask

WHAT ISCOFFEESCRIPT?

"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

RESOURCESGreat docs with table of contentsInteractive live shell

Easy way to see it in action

Coffeescript.org

Coffeescript meet Backbone

WELL FORMATTED JAVASCRIPTvar person = { name: 'joe fleming', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]};

function makeAwesome (obj) { obj.awesome = true;};

function getName (obj) { return obj.name;}

makeAwesome(person);

console.log(getName(person));

SLIGHTLY MODIFIED JAVASCRIPTFunctions become closures assigned to variablesvar person = { name: 'joe fleming', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]};

var makeAwesome = function (obj) { obj.awesome = true;};

var getName = function(obj) { return obj.name;}

makeAwesome(person);

console.log(getName(person));

CONVERT TO COFFEESCRIPTStep 1: Remove var

person = { name: 'joe fleming', twitter: 'w33ble', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]};

makeAwesome = function (obj) { obj.awesome = true;}

getName = function (obj) { return obj.name;}

makeAwesome(person);

console.log(getName(person));

CONVERT TO COFFEESCRIPTStep 2: change function syntax & remove brackets

This compiles! But why stop here?

person = { name: 'joe fleming', twitter: 'w33ble', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]};

makeAwesome = (obj) -> obj.awesome = true;

getName = (obj) -> return obj.name;

makeAwesome(person);

console.log(getName(person));

CONVERT TO COFFEESCRIPTRemove some ugly bits; brackets and semi-colonsperson = name: 'joe fleming', twitter: 'w33ble', github: 'w33ble', interests: [ 'coffeescript', 'sublime text', 'node.js' ]

makeAwesome = (obj) -> obj.awesome = true

getName = (obj) -> return obj.name

makeAwesome(person)

console.log(getName(person))

CONVERT TO COFFEESCRIPTRemove parens, commas and returns

Aw yeah!

person = name: 'joe fleming' twitter: 'w33ble' github: 'w33ble' interests: [ 'coffeescript', 'sublime text', 'node.js' ]

makeAwesome = (obj) -> obj.awesome = true

getName = (obj) -> obj.name

makeAwesome person

console.log getName person

WHY'S IT GREAT?

READS LIKE ENGLISHauthenticated = true unless account is false

if num is 13 alert "winner!"

winner = true if pick in [ 12, 37, 88 ]

EASY TO UNDERSTANDSHORTCUTS

nums = [1..10]

alert "My favorite number is #{nums[3]}"

class Person constructor: (@name) -> getName: -> @name

CLEAN SYNTAXWell formatted code

Easier to readEasier to maintain

Less typing, less errorsFun to write

MY FAVORITE SUGARBLOCK STRINGS & INTERPOLATION

MY FAVORITE SUGARFUNCTION BINDING AKA "FAT ARROW"

MY FAVORITE SUGARTHE EXISTENTIAL OPERATOR

MY FAVORITE SUGARCLASS SYNTAX

ECMASCRIPT 6WITHOUT THE WAIT

Still generates ES5 codeWorks like an ES6 shim

MANY "WEIRD" PARTSARE OPTIONAL

Omitting returnUsing is, is not, or, and, etcRemoving commas in arraysRemoving commas and brackets in objectsDropping parens on function calls

LET'S SEE SOMEEXAMPLES

EXPRESS (NODE.JS)

BACKBONE

CLASS INHERITANCEES6 style class inheritanceMakes super very easy to use

Class like you're probably used toNo bind or extend required

Creates bind and extends methodsStill calls superWhole lotta mess

Coffeescript.org

Simpler class

Fair JS version

COFFEESCRIPT ISGREAT

NO DOWNSIDES TO USING IT

ANOTHER SYNTAX TOLEARN

Not pure JSCould complicate hiring/consultingPretty easy if you know JSMaybe you should hire better

REQUIRES COMPILING(MOST OF THE TIME)

Adds another step to development and deploymentBuild process: coffee, grunt, make/jake, etcAsset pipeline: connect-assetsRuntimes: node-devHosting: heroku, nodester, nodejitsu

DEBUGGINGCompiled into javascriptRuntime errors reference js codeEditor plugins ease this

DON'T STOP WITHJAVASCRIPT

HTML pretty much started it

made it cleaner brought it to JS

coffeescript as markup

HamlSlimJadeCoffeekup

JADEFull template library

Variables, conditionals, inheritance, etcClient-side or server-side

CSS/SCSS/Sassy CSS started this made it universal

brought it to JS

SassLessStylus

STYLUSVariables, mixins, calculations, conditionalsEverything is optional (except the whitespace)

Mix and match freely

THANKS!

twitter: | github:

joe fleming

@w33ble w33ble