I'm currently building a huge backbone app (facebook clone).

Over the last couple of days, feeling pretty happy with how everything works in BB thanks to Rob Conery's excelent tutorial (essential viewing if your starting out with MVC 3 and BB )

Now I've e to the stage where I need to switch pages in my app, and I am starting to wire this up, but it feels like I'm doing a lot of this myself. This is fine, and I know I will be able to do what I want it to.

I've delt with the memory leaking issues, by making sure I unbind and remove my models/collections/views when switching page, Switching views in backbone for navigating between pages - whats the right way?

But aside from this stuff, there is a whole load of tasks that I want to do when I switch between pages. Essentially removing and adding parts of the page. This is slightly more plicated becuase rather than just removing everything, I'd like to only remove/destory the bits of the page that need to change, based on the transition I'd like to make.

As said, I'm getting it working myself at the moment, but I wondered if there was a pattern to handle this tear up / tear down process, and keep things clean (and not end up with a massively bloated router (controller bloat!!!)

I'm currently building a huge backbone app (facebook clone).

Over the last couple of days, feeling pretty happy with how everything works in BB thanks to Rob Conery's excelent tutorial (essential viewing if your starting out with MVC 3 and BB http://tekpub./productions/mvc3)

Now I've e to the stage where I need to switch pages in my app, and I am starting to wire this up, but it feels like I'm doing a lot of this myself. This is fine, and I know I will be able to do what I want it to.

I've delt with the memory leaking issues, by making sure I unbind and remove my models/collections/views when switching page, Switching views in backbone for navigating between pages - whats the right way?

But aside from this stuff, there is a whole load of tasks that I want to do when I switch between pages. Essentially removing and adding parts of the page. This is slightly more plicated becuase rather than just removing everything, I'd like to only remove/destory the bits of the page that need to change, based on the transition I'd like to make.

As said, I'm getting it working myself at the moment, but I wondered if there was a pattern to handle this tear up / tear down process, and keep things clean (and not end up with a massively bloated router (controller bloat!!!)

• javascript
• design-patterns
• backbone.js

• 1 Is this the best answer? github./derickbailey/backbone.marionette – Chris Barry Commented Apr 21, 2012 at 14:35
• Or this perhaps, lostechies./derickbailey/2012/03/22/… – Chris Barry Commented Apr 21, 2012 at 14:37
• Marionette is a nice framework. You may also want to checkout the backbone.layoutmanager github./tbranyen/backbone.layoutmanager#readme – Karthik Commented Apr 22, 2012 at 19:36
• What did you actually use in the end? – Brent Commented Apr 5, 2016 at 14:42
• This project stayed in backbone, and it was fine. But I probably wouldn't use backbone again, becuase of the way it forces you to wrap your data. Used angular a lot, but a lot of people don't like that, becuase it is too kitchen sink. I just tried out VueJS and I think it seems really good for a lot of reasons vuejs/guide/parison.html Also, I highly reend considering if you need a framework at all - muut./blog/technology/frameworkless-javascript.html – Chris Barry Commented Apr 7, 2016 at 16:36

2 Answers 2

Marionette is definitely the way to go. Specifically, Marionette.Layout is fantastic for swapping out specific regions without re-rendering the entire page. Check out some of Derick's Example Apps to get acquainted with the framework.

I'd remend staying away from the Router until after you've gotten your app working using plain old events. Then add the Router support after. Basically the Router should be wired up to reflect the state of your app, but you should not depend on it to be your controller.

As an aside, I'm using RequrieJS on a large multi-module Backbone project and it's been a godsend. It's controversial in the BB munity, but it's worth looking into if you'll have lots of inter-dependent ponents and you want to let another framework handle all the dependencies.

I had your same problem and wanted to share how I solved it, so I re-designed the ToDo App example from the Backbone.js docs using my page transition convention:

http://ahamlett./Backbone.localStorage/

I haven't tested it for memory leaks, but if there are some just call .unbind() before .remove() in the SetView method of the app's router.