CoffeeScript By Example
Download as KEY, PDF5 likes6,770 views
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.
More Related Content
What's hot (20)
Similar to CoffeeScript By Example (20)
![Jdbc[1]](https://cdn.slidesharecdn.com/ss_thumbnails/jdbc1-100429052525-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More from Christopher Bartling (12)
CoffeeScript By Example
- 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
- 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
- 9. Lexical scoping of variables No var keyword in CoffeeScript CoffeeScript doesnt allow global variables unless you explicitly export them Everything wrapped up in anonymous functions to maintain local context Variable assignments automatically pre鍖xed 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 鍖rst-class citizens Use the class keyword Generates to JavaScripts prototype usage Exporting a class to global scope class @ClassName Extension of another objects 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
- 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