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 functi...
jQuery integration  Hooking into the document.ready event:    $(document).ready ->    $ ->  jQuery selectors need parenthe...
Strings and string interpolation  Double-quoted strings allow for interpolated values  Ruby-style interpolation syntax: #{...
Example 2Comprehensions
Comprehensions  Every loop in CoffeeScript returns a value, an array containing the  result of every loop iteration     (v...
Example 3Lexical Scoping
Lexical scoping of variables  No var keyword in CoffeeScript  CoffeeScript doesn’t allow global variables unless you expli...
Example 4Classes and Objects
Classes and inheritance  Classes are now first-class citizens  Use the class keyword  Generates to JavaScript’s prototype u...
Constructors  CoffeeScript constructors have explicit syntax:  class Account      constructor: ->  Setting instance variab...
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 whe...
Example 6Using Jasmine
Unit testing with Jasmine  Behavior-driven development (BDD) JavaScript testing framework  Why Jasmine?     Clean testing ...
Example 7Backbone.js and CoffeeScript              Jasmine testing               Sinon.js spying
Backbone.js  Popular JavaScript MVC framework  Components     Backbone.Model (model)     Backbone.View (view)     Backbone...
Where do I go from here?  http://jashkenas.github.com/coffee-script/  http://arcturo.github.com/library/coffeescript/index...
Tools and Frameworks  Jasmine: http://pivotal.github.com/jasmine/  Sinon.js: http://sinonjs.org/  Jasmine-jQuery: https://...
Contact Information  chris.bartling@gmail.com  Twitter: cbartling  Blog: http://bartling.blogspot.com  Presentation and ex...
Upcoming SlideShare
Loading in …5
×

CoffeeScript By Example

9,365 views

Published on

Introduction to CoffeeScript using live examples.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,365
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
71
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \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

    1. 1. CoffeeScript by Example Christopher Bartling
    2. 2. Example 1 FunctionsIntegration with jQuery String interpolation
    3. 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. 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. 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. 6. Example 2Comprehensions
    7. 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. 8. Example 3Lexical Scoping
    9. 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. 10. Example 4Classes and Objects
    11. 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. 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. 13. Object instances Reference an instance variable: @variableName Reference an instance method: @methodName()
    14. 14. Example 5 Function BindingFunction Context
    15. 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. 16. Example 6Using Jasmine
    17. 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. 18. Example 7Backbone.js and CoffeeScript Jasmine testing Sinon.js spying
    19. 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. 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. 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. 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

    ×