Backbone.js slides

Backbone.jsA Conceptual View Ambert Ho ambert@opzi.com

Agenda• Problems in building web apps • From web development perspective • From software theory perspective • Walk through how Backbone solves problems • Resources

In a nutshell, Backbone.js Abstracts remote resources into modelsand collections of models, that emit events on state change. Allows us to bind view code to listen for those changes and respond

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”

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

Obligatory quote from famous computer scientist “abstraction is the only way we can deal with complexity” - Djikstra

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

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 deﬁnition of any ‘framework’ from a theoretical perspective *side effect: improved readability

The Abstractions

Suppose you want to make an interface

(this doesn’t include the event binding)

Separated concernsDecoupling

View • Events bound - $.delegate() • DOM structure speciﬁed

Case Study time

ModelEvents: • 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()

CollectionEvents: • 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, reﬂect 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 bookin progress (thanks for headsup 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 Single Page Appshttp://blog.nodejitsu.com/single-page-apps-with-nodejs Annotated Sourcehttp://documentcloud.github.com/backbone/docs/backbone.html Communityhttps://groups.google.com/group/backbonejs

Slides http://www.slideshare.net/ambertchContact ambert@opzi.comQuestions?

Backbone.js slides

by Ambert Ho on Aug 03, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Backbone.js slides Presentation Transcript