Backbone.js slides
25
-
Upload
ambert-ho -
Category
Technology
-
view
4.603 -
download
0
description
Transcript of Backbone.js slides
Agenda • Problems in building web apps • From web development perspective • From software theory perspective
• Walk through how Backbone solves problems • Resources
Abstracts remote resources into models and collections of models,
In a nutshell, Backbone.js
that emit events on state change.
Allows us to bind view code to listen for those changes and respond
The web development perspective
• Need to deal with remote resources • Organize rendering of views • Support navigation
Challenges: Things get hairy when a single interaction affects multiple views, or changes lots of data
• Keep views up to date in response to interactions • “jQuery callback soup”
Backbone.js Concepts
• Model/Collection • Abstracts away network resources
Need to deal with remote resources
• View • Encapsulate presentation into neat buckets
• Controller Router • Support navigation by responding to hash changes
• Event binding • Model and collection emit events corresponding to state changes
Organize rendering of views
Support navigation
Avoid “jQuery callback soup”
Obligatory quote from famous computer scientist
“abstraction is the only way we can deal with complexity” - Djikstra
Maintainability and Scalability • Abstraction hide things to limit mental model
• OO (inheritance, encapsulation)
• Separation of concerns put things in boxes
• MVC (separate content from presentation)
• SOA
• More specifically, decouple logical entities decrease brittleness
• Message Queues (flow of info from processing of info)
• Events/notifications
In a nutshell, Backbone.js abstracts functionality,
separates concerns, and decouples frontend code.
*side effect: improved readability
If you think about it for a second, this is basically the definition of any ‘framework’ from a theoretical
perspective
The Abstractions
Suppose you want to make an interface
(this doesn’t include the event binding)
Separated concerns
Decoupling
• Events bound - $.delegate() • DOM structure specified
View
Case Study time
Model Events: • change:{field} • add/remove – to a collection
• destroy • error - if validate() defined
Features: • fetch (expects single JSON object from server)
• save/destroy • validations – manually defined validate()
Collection Events: • add/remove • refresh • reset
Features: • fetch (expects array response from server)
• pass in comparator for auto-sort • pluck(attr)
• Grab attribute for every member of the collection
Controller Router
• Path components get passed in as args • Calling Backbone.history.start() binds the router to url hash change events • Pass in {pushState: true} to utilize pushState in supported browsers
Misc… After you build a few apps, reflect on what’s the nature of code organization in a large JS app? How to structure interactions between objects?
Zakas on Yahoo’s JS architecture: Application core and modules, a sandbox sits in between to decouple the object layer (sounds a bit like dependency injection) http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
Event Aggregator: centralize application control using an Observer http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/
Alert: memory leaks • Google “jquery events memory leaks” • When the controller swaps a view out, • need to make sure to remove views from DOM, or they will still be bound
• use Backbone.View.remove()
• need to unbind events • use Backbone.View.unbind()
Readability
Resources
Thoughtbot’s writing a book in progress (thanks for heads up Harlow)
http://workshops.thoughtbot.com/backbone-js-on-rails
Alternatives • Sproutcore 2.0
• Modular, decoupled (previous versions monolithic) • Fragmented? (always a risk for the community, like Rails and Merb)
• PJAX • https://github.com/defunkt/jquery-pjax • Works on browsers with history.pushState • Still incur network latency and server rendering time
• Knockout.js • MVVM, declarative event bindings
• <input data-bind=“value: doSomething” /> • Separates view from logic
• good for shops that have designers do the html/css
Testing • Stub out server responses - http://sinonjs.org/docs/#useFakeXMLHttpRequest • Three part blog post http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html • Object factory - https://github.com/SupportBee/Backbone-Factory
http://blog.nodejitsu.com/single-page-apps-with-nodejs
Single Page Apps
Annotated Source
Community https://groups.google.com/group/backbonejs
http://documentcloud.github.com/backbone/docs/backbone.html
