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

BackboneJS and friends

on

  • 500 views

 

Statistics

Views

Total Views
500
Views on SlideShare
500
Embed Views
0

Actions

Likes
0
Downloads
15
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 BackboneJS and friends Presentation Transcript

  • 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@scottcowan
  • Backbone● initialize: function(){} is the constructor● Doesnt give you the best debug messages● Great for testing (jasmine, sinon)● Event based logic flow@scottcowan
  • 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
  • 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 events (ie: click, keydown)– Has special fields (ie: tagName, className)@scottcowan
  • 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
  • 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 stuff}@scottcowan
  • 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 root● Use a path shortcut– Ie: [path/file] for aura.js in the aura path@scottcowan
  • 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– _.first, _.last, _.union@scottcowan
  • Underscore● Utility functions– bindAll – adds functions to the context– mixin – add global functions!● More info at http://underscorejs.org/@scottcowan
  • Extra credit● Jasmine/Sinon● Bootstraping data● Yeoman/Bower@scottcowan