CoffeeScript By Example
Upcoming SlideShare
Loading in...5

CoffeeScript By Example



Introduction to CoffeeScript using live examples.

Introduction to CoffeeScript using live examples.



Total Views
Views on SlideShare
Embed Views



3 Embeds 6 3 2 1



Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

CoffeeScript By Example CoffeeScript By Example Presentation 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 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
  • 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
  • Example 2Comprehensions
  • 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
  • Example 3Lexical Scoping
  • 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
  • Example 4Classes and Objects
  • 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
  • Constructors CoffeeScript constructors have explicit syntax: class Account constructor: -> Setting instance variables constructor: (@width) -> Calling the superclass constructor, passing along all current arguments: super
  • Object instances Reference an instance variable: @variableName Reference an instance method: @methodName()
  • Example 5 Function BindingFunction 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 6Using Jasmine
  • 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
  • Example 7Backbone.js and CoffeeScript Jasmine testing Sinon.js spying
  • 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
  • Where do I go from here? sinon.html
  • Tools and Frameworks Jasmine: Sinon.js: Jasmine-jQuery: Jasmine-Sinon: Backbone.js: Underscore.js:
  • Contact Information Twitter: cbartling Blog: Presentation and example code can be found at cebartling/coffeescript-stuff