0
Backbone.jsA Conceptual View  Ambert Ho                     ambert@opzi.com
Agenda• Problems in building web apps	  • From web development perspective	  • From software theory perspective	• Walk thr...
In a nutshell, Backbone.js 	Abstracts remote resources into modelsand collections of models, 	 that emit events on state c...
The web development perspective Challenges: Things get hairy when a single interaction       affects multiple views, or ch...
Backbone.js Concepts	• Model/Collection 	                     Need to deal with remote resources	  • Abstracts away networ...
Obligatory quote from famous computer scientist  “abstraction is the only way we can deal  with complexity”	  	 	 	 	 	 	 ...
Maintainability and Scalability •  bstraction  A                  hide things to limit mental model    •  OO   (inheritanc...
In a nutshell, Backbone.js 	         abstracts functionality,	        separates concerns, and       decouples frontend cod...
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 (ex...
CollectionEvents:	• add/remove	• refresh	• reset	Features:	• fetch (expects array response from server)	• pass in comparat...
Controller Router • Path components get passed in as args	 • Calling Backbone.history.start() binds the router to url hash...
Misc… After you build a few apps, reflect on what’s the nature of code organization in a large JS app? How to structure int...
Alert: memory leaks • Google “jquery events memory leaks”	 • When the controller swaps a view out,	   • need to make sure ...
Readability
Resources
Thoughtbot’s writing a bookin progress (thanks for headsup Harlow)    http://workshops.thoughtbot.com/            backbone...
Alternatives•  Sproutcore      2.0  •  Modular,decoupled (previous versions monolithic)  •  Fragmented? (always a risk for...
Testing• Stub out server responses - http://sinonjs.org/docs/#useFakeXMLHttpRequest	• Three part blog post http://tinnedfr...
Slides http://www.slideshare.net/ambertchContact  ambert@opzi.comQuestions?
Upcoming SlideShare
Loading in...5
×

Backbone.js slides

4,907

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,907
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
118
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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
  • Transcript of "Backbone.js slides"

    1. 1. Backbone.jsA Conceptual View Ambert Ho ambert@opzi.com
    2. 2. Agenda• Problems in building web apps • From web development perspective • From software theory perspective • Walk through how Backbone solves problems • Resources
    3. 3. 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
    4. 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. 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. 6. Obligatory quote from famous computer scientist “abstraction is the only way we can deal with complexity” - Djikstra
    7. 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. 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
    9. 9. The Abstractions
    10. 10. Suppose you want to make an interface
    11. 11. (this doesn’t include the event binding)
    12. 12. Separated concernsDecoupling
    13. 13. View • Events bound - $.delegate() • DOM structure specified
    14. 14. Case Study time
    15. 15. 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()
    16. 16. 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
    17. 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. 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. 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()
    20. 20. Readability
    21. 21. Resources
    22. 22. Thoughtbot’s writing a bookin progress (thanks for headsup Harlow) http://workshops.thoughtbot.com/ backbone-js-on-rails
    23. 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. 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 Appshttp://blog.nodejitsu.com/single-page-apps-with-nodejs Annotated Sourcehttp://documentcloud.github.com/backbone/docs/backbone.html Communityhttps://groups.google.com/group/backbonejs
    25. 25. Slides http://www.slideshare.net/ambertchContact ambert@opzi.comQuestions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×