CoffeeScript: JavaScript, but Better!

COFFEESCRIPT:
JAVASCRIPT, BUT
BETTER

WHO AM I?
www.jackfranklin.co.uk

@Jack_Franklin

GOLDEN RULE OF COFFEESCRIPT
“it’s just javascript”

IN BRIEF, COFFEESCRIPT:
1. COMPILES INTO REGULAR JAVASCRIPT
2. SOLVES A LOT OF COMMON ISSUES & GRIPES
3. MAKES JAVASCRIPT QUICKER & EASIER TO
WRITE
4. IS JUST JAVASCRIPT

JAVASCRIPT:
$(“a”).click(function() {
alert(“hi”);
});

COFFEESCRIPT:
$(“a”).click ->
alert “hi”

DIFFERENCES:
1. INDENTATION MATTERS (NO { } NEEDED)
2. SEMI-COLONS NOT REQUIRED
3. NO PARENTHESIS AROUND ARGUMENTS
4. function() BECOMES ->

THREE EASY STEPS:
1. WRITE CODE IN .COFFEE FILE
2. COMPILE TO .JS (AND FIX ERRORS)
3. INCLUDE .JS FILE IN WEBSITE

COMPILING
1. INSTALL NODE.JS
2. INSTALL NPM (NODE PACKAGE MANAGER)
3. npm install -g coffee-script
4. coffee --watch --compile
example.coffee

IF TERMINAL SCARES YOU
1. WINDOWS:
https://github.com/alisey/CoffeeScript-
Compiler-for-Windows
2. MAC OS X: http://livereload.com/

NO VAR:
a=2
#compiles to:
var a;
a = 2;

CODE IS PRIVATE:
(function() {
/*your code goes here*/
}).call(this);

GETS RID OF == & ===
CONFUSION
“true” == true //true
“true” === true //false

( WTF? )

GETS RID OF == & ===
CONFUSION
“true” is true //false
“true” is “true” //true

launch() if ignition is on

volume = 10 if band isnt SpinalTap

letTheWildRumpusBegin() unless answer is no

if car.speed < limit then accelerate()

winner = yes if pick in [47, 92, 13]

is <=> ===
isnt <=> !==
not <=> !
and <=> &&
or <=> ||
true, yes, on <=> true
false, no, off <=> false
@, this <=> this
of <=> in
in <=> //no JS equiv
#in tests for array presence
#of tests for object-key presence

(

in tests for array presence

of tests for object-key presence

BASIC FUNCTION SYNTAX
function heyBarcamp(m) {
alert(“Hey Barcamp! “ + m);
});

BASIC FUNCTION SYNTAX
heyBarcamp = (m) ->
alert “Hey BarCamp! “ + m

COMMENTING
#this is a comment
###
block comment!
OMG!
###

PLAYS NICE WITH LIBRARIES
(it’s just JavaScript, remember)

$(function() {
$(“body”).html(“HEY BARCAMP”);
});

PLAYS NICE WITH LIBRARIES
(it’s just JavaScript, remember)

$ ->
$(“body”).html “HEY BARCAMPERS”

LOVELY ITERATION
for attendee in barcampers when attendee.age
< 16
console.log “CHILD! “ + attendee.name

LOVELY ITERATION
tweets.push(
tweet.text.toLowerCase()
) for tweet in data

CLASSES
class Presentation
constructor (room) ->
@room = room
startPresentation ->
@loadSlideShow()
loadSlideShow ->

quiz = new Presentation “Pan’s Labyrinth”

CONDITIONALS
someFunc() if y > 20
x = 2 unless y > 10
currentUrl ?= window.location

SPLIT ASSIGNMENT
//regular JavaScript:
var myName = [“Jack”, “Franklin”];
var ﬁrstName = myName[0],
surName = myName[1];
//CoffeeScript:
myName = [“Jack”, “Franklin”]
[ﬁrstName, surName] = myName

VARIABLES IN STRINGS
heyBarcamp = (message) ->
alert “Hello BarCampers! I’ve got a message
for you #{message}”

VARIABLES IN STRINGS
heyBarcamp = (message) ->
alert “Hello BarCampers! I’ve got a message
for you #{message.toUpperCase()}”

DEFAULT FUNCTION VALUES
addNumbers = (a, b = 2) ->
alert a+b

WE’VE ONLY SCRATCHED THE
SURFACE!
1. DOCS & ONLINE SHELL ON GITHUB:
http://jashkenas.github.com/coffee-script/
2. FUN FACT: COFFEESCRIPT COMPILER WAS
WRITTEN IN COFFEESCRIPT

THANKS FOR LISTENING...ANY
(EASY) QUESTIONS?

@JACK_FRANKLIN

CoffeeScript: JavaScript, but Better!

More Related Content

What's hot

Viewers also liked

Similar to CoffeeScript: JavaScript, but Better!

Recently uploaded

CoffeeScript: JavaScript, but Better!

Editor's Notes