0
BackboneJS and friends@scottcowan
Backbone● A javascript MVC framework● Same stuff but on the client side● Lets you focus on presentation logic@scottcowan
Backbone● Model – View - Controller– M = Backbone.Model, Backbone.Collection– V = HTML Templates– C = Backbone.View@scottc...
Backbone● initialize: function(){} is the constructor● Doesnt give you the best debug messages● Great for testing (jasmine...
Backbone● Backbone.Router– Single Page Application magic maker– Change the url without a page load– Backwards compatible w...
Backbone● Backbone.history– Add urls to the browser history– A wrapper around browser history API@scottcowan
Backbone● Backbone.View– Something thats going to be an element– Allows for Nesting (ie: TableView, RowView)– Can handle e...
Backbone● Backbone.Model– A single item of data– Uses CREATE, PUT methods when saving– Fires events like change or field c...
Backbone● Backbone.Collection– A list of Models or objects– fetch will fire a reset event you can listen to@scottcowan
RequireJSDefine([underscore,backbone,text!../templates/movieItem.html],function (_,backbone,movieItemTemplate) {// do stuf...
RequireJS● Manage dependencies● Decouple libraries from hard references● Combine javascript for release@scottcowan
RequireJS● use require.config after loading require● use absolute links not relative– Your site might not work off the roo...
Aura● Adds– Widgets– Mediator for messaging– Can work without Backbone@scottcowan
Underscore● Power library for collections– contains, some, groupBy– each – loops over Backbone collections● And Arrays– _....
Underscore● Utility functions– bindAll – adds functions to the context– mixin – add global functions!● More info at http:/...
Extra credit● Jasmine/Sinon● Bootstraping data● Yeoman/Bower@scottcowan
Upcoming SlideShare
Loading in...5
×

BackboneJS and friends

450

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
450
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "BackboneJS and friends"

  1. 1. BackboneJS and friends@scottcowan
  2. 2. Backbone● A javascript MVC framework● Same stuff but on the client side● Lets you focus on presentation logic@scottcowan
  3. 3. Backbone● Model – View - Controller– M = Backbone.Model, Backbone.Collection– V = HTML Templates– C = Backbone.View@scottcowan
  4. 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. 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. 6. Backbone● Backbone.history– Add urls to the browser history– A wrapper around browser history API@scottcowan
  7. 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. 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. 9. Backbone● Backbone.Collection– A list of Models or objects– fetch will fire a reset event you can listen to@scottcowan
  10. 10. RequireJSDefine([underscore,backbone,text!../templates/movieItem.html],function (_,backbone,movieItemTemplate) {// do stuff}@scottcowan
  11. 11. RequireJS● Manage dependencies● Decouple libraries from hard references● Combine javascript for release@scottcowan
  12. 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. 13. Aura● Adds– Widgets– Mediator for messaging– Can work without Backbone@scottcowan
  14. 14. Underscore● Power library for collections– contains, some, groupBy– each – loops over Backbone collections● And Arrays– _.first, _.last, _.union@scottcowan
  15. 15. Underscore● Utility functions– bindAll – adds functions to the context– mixin – add global functions!● More info at http://underscorejs.org/@scottcowan
  16. 16. Extra credit● Jasmine/Sinon● Bootstraping data● Yeoman/Bower@scottcowan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×