CoffeeScript by Example is a document that provides 7 examples of using CoffeeScript. It summarizes CoffeeScript features like functions defined with ->, jQuery integration, string interpolation, comprehensions, lexical scoping, classes and objects, and function binding. It also discusses unit testing CoffeeScript code with Jasmine and spying with Sinon.js. Resources for learning more about CoffeeScript, related tools like Jasmine and Backbone.js, and the presenter's contact information are provided.

1. CoffeeScript by Example
Christopher Bartling

2. Example 1
Functions
Integration with jQuery
String interpolation

3. 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”) ->

4. jQuery integration
Hooking into the document.ready event:
$(document).ready ->
$ ->
jQuery selectors need parentheses
Function calls typically do not parentheses unless function call has no
parameters

5. Strings and string interpolation
Double-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

6. Example 2
Comprehensions

7. Comprehensions
Every 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

8. Example 3
Lexical Scoping

9. Lexical scoping of variables
No 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

10. Example 4
Classes and Objects

11. Classes and inheritance
Classes 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

12. Constructors
CoffeeScript constructors have explicit syntax:
class Account
constructor: ->
Setting instance variables
constructor: (@width) ->
Calling the superclass constructor, passing along all current arguments:
super

13. Object instances
Reference an instance variable:
@variableName
Reference an instance method:
@methodName()

14. Example 5
Function Binding
Function Context

15. 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

16. Example 6
Using Jasmine

17. Unit testing with Jasmine
Behavior-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

18. Example 7
Backbone.js and CoffeeScript
Jasmine testing
Sinon.js spying

19. Backbone.js
Popular JavaScript MVC framework
Components
Backbone.Model (model)
Backbone.View (view)
Backbone.Collection and Backbone.Router (controller)
CoffeeScript allows easy extension of these classes

20. 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

21. Tools and Frameworks
Jasmine: 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/

22. Contact Information
chris.bartling@gmail.com
Twitter: cbartling
Blog: http://bartling.blogspot.com
Presentation and example code can be found at https://bitbucket.org/
cebartling/coffeescript-stuff