Download as KEY, PPTX
Uploaded byChristopher Bartling
CoffeeScript By Example
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.
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 stringinterpolation 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.
- 7. Comprehensions Everyloop 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.
- 9. Lexical scoping ofvariables 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 andObjects
- 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 CoffeeScriptconstructors 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 FunctionBinding 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.
- 17. Unit testing withJasmine 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 andCoffeeScript Jasmine testing Sinon.js spying
- 19. Backbone.js PopularJavaScript 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 Igo 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