Backbonification - Migrating NewsBlur From DOM Spaghetti to Backbone.js

This talk explores patterns, techniques, and common pitfalls in migrating from vanilla JavaScript to Backbone.js. It covers moving routers, models, and views, and the process used to migrate a living app.

Transcript

1. Backbonification Migrating NewsBlur from DOM spaghetti to Backbone.js Samuel Clay November 2012 Backbone.js patterns and pitfalls — covering —
2. Background • Started NewsBlur as a side-project in 2009 • Open-source since the beginning • DocumentCloud alum
5. Folder Feed Unread count Feed list header Feed list Unread count Reading pane Feed (story view) Story title Original/Feed view Intelligence Level
8. Project Account Project List Organizer Visual Search Facet Facet input Workspace Toolbar Document List Document
9. Task at hand • Small handful of JavaScript files • 8,500 lines in biggest file • One file for templates, drawing, delegation, element caches, state, view modes
10. Performance • Only necessary calculations were made • Tree traversal time was eliminated 0 100 200 300 JavaScript Backbone.js feed page load (milliseconds) 0 325 650 975 1,300 JavaScript Backbone.js folder draw (milliseconds)
11. Pre-requisites • Underscore.js
12. Pre-requisites • Backbone.js Router Collection Model Model Model View View View Model
13. Moving routers • You have routers • Even multiple routers • If it touches a URL, use a router
14. Moving routers • It’s where you can stick those out-of- band ajax calls • Anything having to do with the url
15. Moving models
16. Moving models • The schema coming from the server • May cause versioning • Server should be sending lists of dictionaries
17. Moving models • Passing ?v=2 now gives arrays: • Data used to be given in this format:
18. Moving models • Transparently append the API version as a parameter by overriding your collection’s fetch method.
19. Moving models • Straight JavaScript object literals • Benefits: defaults and explicit behavior
20. Moving models • Pass a Backbone model's model.attributes to old JavaScript methods • When done migrating, clean up by looking for .attributes
21. Moving models • Populating a collection that has side-effects • Rendering child views before the parent view means they will be attached to the wrong parent view • Pass {silent: true} to the initial reset, then manually trigger the reset event with Collection.change() • Another option is to use _.defer()
22. Moving models • Listening for events on a collection's models • For convenience, model events also show as collection events
23. Moving models • Bind to the change event but only update on specific attributes using model.hasChanged() and model.previousAttributes()
24. Moving models • Listening to the change event instead of change:attribute because change is fired last
25. Moving models • Intermediary models can be used as pointers to selected models
26. Moving views
27. Moving views • Writing templates
28. Moving views • Template option #1: Inline strings
29. Moving views • Template option #2: Inline templates
30. Moving views • Template option #3: JavaScript Templates (JSTs)
31. Moving views • Most common change is from event binding to event delegation
32. Moving views • Splitting up views for the same element
33. Moving views • Changing the top-level element of a view • But don’t forget about the element on page if you’re re-rendering the view
34. Folder view Folder view Folder view
39. Moving views • View collections
41. Moving views • Traversing a view by keeping track of the active view in the collection
42. Moving views • Action hierarchy • Delegate responsibility up the chain
43. Moving views • No need for a model to back a view
44. Common pitfalls
45. Common pitfalls • TypeError: 'undefined' is not an object (evaluating 'func.bind') • Comes from trying to bind to a method that doesn't exist
46. Common pitfalls • Firing a change event while still setting up models and views • Add {silent: true} to a model.set() call if you're not ready to handle the change events • When views are all setup, blast out a .change()
47. Common pitfalls • Re-rendering the view just to get a class toggled on or off • Selectively re-render/toggle classes based on specific change events
48. Common pitfalls • Cleanup of ghost views • The model still has bindings to the destroyed view
49. Common pitfalls • The disappearing view
50. Resources that I liked • Developing Backbone.js Applications by Addy Osmani addyosmani.github.com/backbone-fundamentals • Backbone Patterns by Rico Sta. Cruz ricostacruz.com/backbone-patterns
51. Thank you for listening • Go ask @samuelclay more questions • Get yourself on www.newsblur.com