All about Backbone.js

Transcript

1. Backbone.js
2. Backbone = a simple library of objects that can be organized into complex but meaningful relationships
3. ...unless they aren’t
4. Stateless Server-sent HTML Apps (not Backbone) Stateful Single-Page JS App (Backbone)
5. Object Basics • Events (prototype object) • Model • Collection • View • Special Stuff: Router, History, App • POJO
6. • 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
7. • Events • Model • Collection • View • Special Stuff • POJO • Stores attributes • Syncs with persisted objects on the server • Emit events when attributes are changed
8. • 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)
9. • 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)
10. • 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>
11. • 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
12. 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()
13. 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'
14. 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()
15. Backbone = not rocket science, not even that strange Template/DOM View