BackboneJS and friends

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. BackboneJS and friends@scottcowan
  • 2. Backbone● A javascript MVC framework● Same stuff but on the client side● Lets you focus on presentation logic@scottcowan
  • 3. Backbone● Model – View - Controller– M = Backbone.Model, Backbone.Collection– V = HTML Templates– C = Backbone.View@scottcowan
  • 4. Backbone● initialize: function(){} is the constructor● Doesnt give you the best debug messages● Great for testing (jasmine, sinon)● Event based logic flow@scottcowan
  • 5. Backbone● Backbone.Router– Single Page Application magic maker– Change the url without a page load– Backwards compatible with #/path– Remember to setup routes on the server@scottcowan
  • 6. Backbone● Backbone.history– Add urls to the browser history– A wrapper around browser history API@scottcowan
  • 7. Backbone● Backbone.View– Something thats going to be an element– Allows for Nesting (ie: TableView, RowView)– Can handle events (ie: click, keydown)– Has special fields (ie: tagName, className)@scottcowan
  • 8. Backbone● Backbone.Model– A single item of data– Uses CREATE, PUT methods when saving– Fires events like change or field changes●
  • 9. Backbone● Backbone.Collection– A list of Models or objects– fetch will fire a reset event you can listen to@scottcowan
  • 10. RequireJSDefine([underscore,backbone,text!../templates/movieItem.html],function (_,backbone,movieItemTemplate) {// do stuff}@scottcowan
  • 11. RequireJS● Manage dependencies● Decouple libraries from hard references● Combine javascript for release@scottcowan
  • 12. RequireJS● use require.config after loading require● use absolute links not relative– Your site might not work off the root● Use a path shortcut– Ie: [path/file] for aura.js in the aura path@scottcowan
  • 13. Aura● Adds– Widgets– Mediator for messaging– Can work without Backbone@scottcowan
  • 14. Underscore● Power library for collections– contains, some, groupBy– each – loops over Backbone collections● And Arrays– _.first, _.last, _.union@scottcowan
  • 15. Underscore● Utility functions– bindAll – adds functions to the context– mixin – add global functions!● More info at
  • 16. Extra credit● Jasmine/Sinon● Bootstraping data● Yeoman/Bower@scottcowan