BackboneJS and friends
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

BackboneJS and friends

on

  • 563 views

 

Statistics

Views

Total Views
563
Views on SlideShare
563
Embed Views
0

Actions

Likes
0
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

BackboneJS and friends Presentation Transcript

  • 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● http://backbonejs.org/#Events-catalog@scottcowan
  • 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 http://underscorejs.org/@scottcowan
  • 16. Extra credit● Jasmine/Sinon● Bootstraping data● Yeoman/Bower@scottcowan