Preventing memory leaks in Backbone.js

Ugh. Examples use Coffeescript instead of universally accessible Javascript. Looks very useful though; I've just started learning about Backbone, and the lack of a "right way of doing things" is disconcerting, coming from a lot of Rails usage lately. It takes me back to the days of doing a lot of stuff by hand.<p>Even without that uncertainty, it's definitely a bit tricky to move to thinking about everything being in the browser.

I agree on the whole coffeescript thing, really it detracts from what you are trying to show. But on to the real point of commenting; I am implementing a system using backbone because it is a requirement of the company I am contracting for. I am writing several..plugins..I suppose you would call them, to make backbone work more like angular.js. If you're having issues with backbone and have a choice, I strongly recommend checking out angular. it is quite amazing and very flexible. while it seems like it should be opinionated it is actually quite flexible on what you must do once you learn how it works. A great example is view compositioning, it has a very strong templating system using definitions to create your own element sections. I am having a really hard time liking backbone, if I have to write all this code, really I would much rather write my own library to handle this stuff. So just my point of view along with a suggestion on something that I believe can take you much further and reduce the time you spend on the b.s.

I've been using chaplinjs as a backbone architecture for my last couple side projects and I really like it.<p><a href="https://github.com/chaplinjs/chaplin" rel="nofollow">https://github.com/chaplinjs/chaplin</a><p>Simplified router, subviews, model binding techniques like described in the OP are all helpfully baked in.

Two things you can do together to help, but need Backbone edge version (master) for the second, at the moment:<p><pre><code> 1. myModel.on('change:title', this.render, this); // inside `myView` 2. myView.dispose(); // when you are done with `myView` </code></pre> This will automatically remove all the referenced binds onto `myView` and simply removing the root view as OP mentions is sufficient.

Great pointing out that Backbone is <i>deceptively</i> simple. No best practices to be found on backbonejs.org.<p>Always worth considering using a framework layer like Marionette to help you with architecture. Otherwise you <i>will</i> end up writing something similar to it yourself. Which sometimes is necessary, but not always.

Javascript memory leaks can be identified using Browser Profiler (e.g. <a href="https://developers.google.com/chrome-developer-tools/docs/heap-profiling" rel="nofollow">https://developers.google.com/chrome-developer-tools/docs/he...</a>). Are there any other better/recommended tools for the job?

Don't nested child views get garbage collected when the root view is removed?

I highly recommend onsi's Backbone.coccyx [1] for ensuring that views are torn down correctly.<p><a href="https://github.com/onsi/coccyx" rel="nofollow">https://github.com/onsi/coccyx</a>

Backbone.Marionette is pretty good at solving a lot of these issues but this is a great blog on how to do it yourself.

AFAIR, it's one of the issues Backbone.Marionette is trying to fix with its bindTo/close solution.