Upgrade to Pro — share decks privately, control downloads, hide ads and more …

All about Backbone.js

Ben Sheldon
May 27, 2014
55

All about Backbone.js

Ben Sheldon

May 27, 2014
Tweet

Transcript

  1. Backbone = a simple library of objects that can be

    organized into complex but meaningful relationships
  2. Object Basics • Events (prototype object) • Model • Collection

    • View • Special Stuff: Router, History, App • POJO
  3. • Events • Model • Collection • View • Special

    Stuff • POJO • Prototype of all Backbone objects • Can emit events • Can listen to other objects for events to trigger callbacks Remember: state is maintained, all object instances are just hanging out in memory in your browser window
  4. • Events • Model • Collection • View • Special

    Stuff • POJO • Stores attributes • Syncs with persisted objects on the server • Emit events when attributes are changed
  5. • Events • Model • Collection • View • Special

    Stuff • POJO • A ‘collection’ of models • Sync with persisted server objects • Emit events when models change • Functional sugar (filter, sort, etc)
  6. • Events • Model • Collection • View • Special

    Stuff • POJO • Manages specific parts of DOM • Has attached models or collections • render() HTML to modify the DOM (with the help of a Template) • Listens for changes on attached models/collections • Can have childviews (it’s childviews all the way down)
  7. • Events • Model • Collection • View • Special

    Stuff • POJO • Router: defines callbacks based on URL (instantiate models/collections and inject into a new high-level view) • History: manages global state • Application: Tie it all together at the highest level to be exposed to the browser via <script>
  8. • Events • Model • Collection • View • Special

    Stuff • POJO Plain Old Javascript Objects • Helper methods and calculated attributes • Prototypical inheritance • Decorator Pattern • Composite/Strategy Pattern • Singleton Pattern require(‘path/to/file) fetch dependencies and instantiated objects out of memory
  9. Bootstrapping the app app = require 'application' User = require

    'models/user' UserView = require 'views/page_view' module.exports = class Router extends Backbone.Router routes: 'users/:userId': 'showUser' showUser: (userId) -> user = new User id: userId userView = new UserView el: '#page' model: user app.views.push userView user.fetch()
  10. module.exports = class UserView extends Backbone.View events: 'click .show-profile': 'showProfile'

    initialize:-> @listenTo @model, 'sync', @render @listenTo @model, 'change', @render render: -> # USE BACKBONE.LAYOUTMANAGER @$el.html UserTemplate firstName: @model.get('firstname') devSitesRemaining: @devSitesRemaining() devSitesRemaining: -> @model.get('maxdevsites') - @model.get('dev_sites_count') showProfile: -> profileView = new ProfileView model: @model.profile @childViews.push profileView @model.profile.fetch() UserTemplate = require 'views/user' ProfileView = require 'views/profileView'
  11. Good 1. Instantiate 2. Inject 3. Trigger Side Effects user

    = new User id: userId userView = new UserView el: '#page' model: user user.fetch() Bad 1. Initialize 2. Instantiate 3. Trigger Side Effects class UserView extends Backbone.View initialize: (userId) -> @model = new User id: userId @model.fetch()