Your SlideShare is downloading. ×
0
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
BackboneJS and friends
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

BackboneJS and friends

435

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
435
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×