Backbone.js slides
2 likes3,182 views
Backbone.js abstracts remote resources into models and collections that emit events on state changes. This allows views to bind and respond to those changes. It provides concepts like models, collections, views and controllers to deal with common problems in web development like organizing rendering of views, supporting navigation, and avoiding callback soup. By abstracting functionality, separating concerns, and decoupling code, Backbone follows best practices and theoretical definitions of frameworks.
Ad
More Related Content
What's hot (20)
Similar to Backbone.js slides (20)
![[2015/2016] Backbone JS](https://cdn.slidesharecdn.com/ss_thumbnails/07backbone-160513223420-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
Ad
Backbone.js slides
- 1. Backbone.js A Conceptual View Ambert Ho [email protected]
- 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
- 10. Suppose you want to make an interface
- 11. (this doesn’t include the event binding)
- 13. View • Events bound - $.delegate() • DOM structure specified
- 14. Case Study time
- 15. 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()
- 16. 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
- 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()
- 20. Readability
- 21. Resources
- 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
Editor's Notes
- #2: 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
- #3: 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
- #4: Let’s do a first pass at the highest level summary I could think of
- #5: 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
- #6: - (next slide) Now lets talk about some theory
- #12: I have some data, I want to pull it out and represent it.
- #13: 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)
- #14: 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.
- #16: If you define a validate method, it will be run any time the model gets persisted