Backbone.js

Backbone = a simple library of objects that can be organized into complex but meaningful relationships

...unless they aren’t

Stateless Server-sent HTML Apps (not Backbone) Stateful Single-Page JS App (Backbone)

Object Basics ● Events (prototype object) ● Model ● Collection ● View ● Special Stuff: Router, History, App ● POJO

● 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

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

● 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)

● 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)

● 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

● 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

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()

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'

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()

Backbone = not rocket science, not even that strange Template/DOM View