coffeescript by example
TRANSCRIPT
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 [email protected]
Twitter: cbartling
Blog: http://bartling.blogspot.com
Presentation and example code can be found at https://bitbucket.org/cebartling/coffeescript-stuff