2. Agenda
• Problems in building web apps
• From web development perspective
• From software theory perspective
• Walk through how Backbone solves problems
• Resources
3. In a nutshell, Backbone.js
Abstracts remote resources into models
and collections of models,
that emit events on state
change.
Allows us to bind view
code to listen for those
changes and respond
4. The web development perspective
Challenges: Things get hairy when a single interaction
affects multiple views, or changes lots of data
• Need to deal with remote resources
• Organize rendering of views
• Support navigation
• eep views up to date in response to interactions
K
• “jQuery callback soup”
5. Backbone.js Concepts
• Model/Collection
Need to deal with remote resources
• Abstracts away network resources
• View
Organize rendering of views
• Encapsulate presentation into neat buckets
• ontroller Router
C Support navigation
• upport navigation by responding to hash
S
changes
• Event binding
Avoid “jQuery callback soup”
• Model and collection emit events
corresponding to state changes
6. Obligatory quote from
famous computer scientist
“abstraction is the only way we can deal
with complexity”
- Djikstra
7. Maintainability and Scalability
• bstraction
A hide things to limit mental model
• OO (inheritance, encapsulation)
• eparation
S of concerns put things in boxes
• MVC (separate content from presentation)
• SOA
• ore
M specifically, decouple logical entities
decrease brittleness
• Message Queues (flow of info from processing of info)
• Events/notifications
8. In a nutshell, Backbone.js
abstracts functionality,
separates concerns, and
decouples frontend code.
If you think about it for a second, this is basically the
definition of any ‘framework’ from a theoretical
perspective
*side effect: improved readability
17. 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
18. 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/
19. 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()
22. Thoughtbot’s writing a book
in progress (thanks for heads
up Harlow)
http://workshops.thoughtbot.com/
backbone-js-on-rails
23. 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
24. 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
Single Page Apps
http://blog.nodejitsu.com/single-page-apps-with-nodejs
Annotated Source
http://documentcloud.github.com/backbone/docs/backbone.html
Community
https://groups.google.com/group/backbonejs
Introduce Opzi – in addition to Backbone, we use Node, and mongoDB for the flexible schema Used Backbone on previous projects, discover better ways to use it, and realize more and more that the simplicity of this library
I think that demos and tutorials can be walked through any time, so this presentation will talk more about ideas. we’ll talk about motivations for why Backbone, both from a practical web dev, and a theoretical perspective then we’ll segway into explaining how Backbone fulfills those motivations Finally I’ll gloss over some resources and reading that the audience can go into from her, including comparisons to other web app frameworks
Let’s do a first pass at the highest level summary I could think of
First, let’s look at the issue from the web development side, the challenges of single page apps a web app isn’t like web site, more like traditional GUI programming backbone is for that
- (next slide) Now lets talk about some theory
I have some data, I want to pull it out and represent it.
Here we see a snippet of Backbone code to generate the same view. The rendering of the view has been abstracted away Also we have separated the concern of displaying the data (views) from storing the data (models)
One thing to note here is that Backbone views have an ‘el’ concept. The events that we bind are in that context. So it will not work if #delete-button, #save-button exist outside of the view’s element.
If you define a validate method, it will be run any time the model gets persisted
