CoffeeScript by Example

Christopher Bartling

Example 1

FunctionsIntegration with jQuery

String interpolation

Functions (->)function(){} is replaced by the “thin arrow” syntax: ->

Method body determined by indentation

All functions can act as expressions

Optional parameters list precedes the thin arrow syntax

(name, age, birthDate) ->

Parameters can have default values

(age, gender = “female”) ->

jQuery integrationHooking into the document.ready event:

$(document).ready -> $ ->

jQuery selectors need parentheses

Function calls typically do not parentheses unless function call has no parameters

Strings and string interpolationDouble-quoted strings allow for interpolated values

Ruby-style interpolation syntax: #{}

“My name is #{person.fullName}”

Single-quoted strings are literal

Multi-line strings and heredocs are allowed, even using string interpolation

Example 2

Comprehensions

ComprehensionsEvery loop in CoffeeScript returns a value, an array containing the result of every loop iteration

(variable for variable in array)

Filter iteration results by using when clause:

(variable for variable in array when clause)

Common idiom to combine function invocation and comprehension

Example 3

Lexical Scoping

Lexical scoping of variablesNo var keyword in CoffeeScript

CoffeeScript doesn’t allow global variables unless you explicitly export them

Everything wrapped up in anonymous functions to maintain local context

Variable assignments automatically prefixed by var in generated JavaScript

Impossible to shadow a higher-level variable

Example 4

Classes and Objects

Classes and inheritanceClasses are now first-class citizens

Use the class keyword

Generates to JavaScript’s prototype usage

Exporting a class to global scope

class @ClassName

Extension of another object’s prototype

class SavingsAccount extends Account

ConstructorsCoffeeScript constructors have explicit syntax:

class Account constructor: ->

Setting instance variables

constructor: (@width) ->

Calling the superclass constructor, passing along all current arguments:

super

Object instancesReference an instance variable:

@variableName

Reference an instance method:

@methodName()

Example 5

Function Binding Function Context

Bound function operator (=>)aka Fat Arrow

Binds a function to the current context

Retains the context no matter where the function is invoked

Avoids the self = this game

Prevalent use with event callbacks

See this in later advanced examples

Example 6

Using Jasmine

Unit testing with JasmineBehavior-driven development (BDD) JavaScript testing framework

Why Jasmine?

Clean testing framework

Good matcher support

Integration with sinon.js and jQuery

CoffeeScript promotes separation of concerns

Makes testing components much easier

Example 7

Backbone.js and CoffeeScriptJasmine testing Sinon.js spying

Backbone.jsPopular JavaScript MVC framework

Components

Backbone.Model (model)

Backbone.View (view)

Backbone.Collection and Backbone.Router (controller)

CoffeeScript allows easy extension of these classes

Where do I go from here?http://jashkenas.github.com/coffee-script/

http://arcturo.github.com/library/coffeescript/index.html

http://coffeescriptcookbook.com/

http://peepcode.com/products/coffeescript

http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html

Tools and FrameworksJasmine: http://pivotal.github.com/jasmine/

Sinon.js: http://sinonjs.org/

Jasmine-jQuery: https://github.com/velesin/jasmine-jquery

Jasmine-Sinon: https://github.com/froots/jasmine-sinon

Backbone.js: http://documentcloud.github.com/backbone/

Underscore.js: http://documentcloud.github.com/underscore/

Contact Informationchris.bartling@gmail.com

Twitter: cbartling

Blog: http://bartling.blogspot.com

Presentation and example code can be found at https://bitbucket.org/cebartling/coffeescript-stuff