Backbone.js slides
Upcoming SlideShare
Loading in...5
×
 

Backbone.js slides

on

  • 5,029 views

 

Statistics

Views

Total Views
5,029
Views on SlideShare
5,027
Embed Views
2

Actions

Likes
2
Downloads
101
Comments
0

1 Embed 2

http://www.schoox.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Backbone.js slides Backbone.js slides Presentation Transcript

  • 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 definition 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 specified
  • 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, 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 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?