Preventing memory leaks in Backbone.js

https://paydirtapp.com/blog/backbone-in-practice-memory-management-and-event-bindings/

by doctororange • 14 years ago

79 34 14 years ago

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

jpk• 14 years ago

If the parent is the only place where there's a reference to the child view, then yes. However like the article says, you often have things like event listeners that, if the child view doesn't clean up, will prevent the child view from getting collected. (And often, the listeners still do stuff causing buggy behavior.)

This is fixed by ensuring there's an off()/unbind() for every on()/bind(). I do this by following a pattern like the one in this article: http://lostechies.com/derickbailey/2011/09/15/zombies-run-ma...

andrewvc• 14 years ago

Yes, but if they are bound to the child's element and that is removed shouldn't that be sufficient unless the view is binding to other elements or window events?

davidw4• 14 years ago

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.

Even without that uncertainty, it's definitely a bit tricky to move to thinking about everything being in the browser.

oelmekki• 14 years ago

Genuine question : not knowing coffeescript (if that's indeed the problem), do you find it hard to understand what it represents in pure js ?

davidw4• 14 years ago

I find it's a bit of a distraction. I think I know what's going on, but I'm not 100% sure.

ehutch79• 14 years ago

It's hard to make the cognitive leap from coffeescript to javascript, while also trying to grok the actual subject at hand.

It doesn't make much sense for tutorials to be written in coffeescript unless they are specifically coffeescript tutorials

devmach• 14 years ago

It's not that hard but instead of thinking what code does, i have to think first what that code mean in javascript.

Writing a tutorial / informative blog post in coffeescript is like : Giving an English lesson in Chinese while teacher and students are native speakers of English.

throwa4• 14 years ago

@davidw, Just use emberjs and focus on your app instead of boilerplate code. If you are coming from rails, emberjs is opinionated and should fit your style of thinking.

Emberjs makes building non-trivial easy while backbone makes building non-trivial apps hard but makes building small simple app easy.

People like talking about the size of emberjs but after you finishing stitching together numerous boilerplate code, you might end up with a bigger code base than emberjs and you are worst off as you have to maintain your boilerplate yourself rather than use a community curated codebase.

Two good getting started tutorial: http://trek.github.com/ http://emberjs.com/guides/router_primer/

Please i don't dislike backbonejs but we should use the right tool for the right job, backbone is not the right tool for non trivial app except you like boilerplate code. I also respect Jeremy Ashkenas. So my comments are not hate induced.

crescentfresh• 14 years ago

> use the right tool for the right job

"Backbone is the wrong tool for anything non-trivial" is just hyperbole.

atomical• 14 years ago

Getting started with Ember is a lot harder than your comment admits. I tried Ember recently and there was still a lot of stuff that was broken including the data model. That would make building a non-trivial app hard.

camus• 14 years ago

Does Ember have a persistance layer ? like backbone sync ? anyway ,Ember is far from perfect too. The best javascript framework , though not free , is Ext JS.

bricestacey• 14 years ago

You can find pretty much the same behavior in thoughtbot's backbone-support. I highly recommend it and it's written in javascript.

https://github.com/thoughtbot/backbone-support

It has a CompositeView and a SwappingRouter that you should use in place of Backbone.View and Backbone.Router

andrew_wc_brown• 14 years ago

I'm glad it's written in coffeescript, it's less verbose and easier to read.

mikeknoop• 14 years ago

Two things you can do together to help, but need Backbone edge version (master) for the second, at the moment:

  1. myModel.on('change:title', this.render, this); // inside `myView`
  2. myView.dispose(); // when you are done with `myView`

This will automatically remove all the referenced binds onto `myView` and simply removing the root view as OP mentions is sufficient.

chrizel2• 14 years ago

But you have to keep in mind, according to the code (https://github.com/documentcloud/backbone/blob/master/backbo... ) this will only get rid of the events on this.model and this.collection. If you are using another field or model (like in your example myModel, if it is not the same as this.model) -- then you will still get memory leaks.

Backbone is a real pitfall here in larger projects and you have to keep memory leaks in mind when using Backbone events. (sadly JavaScript has no WeakMaps yet, which would solve the problem for us) That's why projects like Backbone Marionette or EventBinder exists which are handling the Backbone events leaking problem better than bare bones Backbone alone. See http://lostechies.com/derickbailey/2011/09/15/zombies-run-ma...

In a very large application I'm writing at the moment I've introduced a common View parent class which extends Backbone views with proper subview handling and correct event disposal. So in my views I can write something like this (works very similar to the Backbone view's DOM "event" mapping field, but instead of DOM events we are talking about Backbone events here) [Edit: well, looking at the submission article, that's very similar to the solution described in the article]

    objectEvents: {
      'model change': 'reload',
      'collection reset': 'render'
    }

Then my View class handles the rest: it connects the events in the constructor and disconnects them correctly on remove(). The only thing you have to keep in mind is that you have to remove all old subviews explicitly when they get recreated. That's when my subview handling kicks in, because I have some helper methods like addSubView and removeAllSubViews which get called when re-rendering the parent view.

Backbone subview handling can be a real pain and memory management has to be kept in mind. Every time you are using the "on"-method you should ask yourself when this event gets destroyed and if it could lead to a memory leak. Or you should use something like EventBinder. https://github.com/marionettejs/backbone.eventbinder

moe• 14 years ago

Backbone subview handling can be a real pain and memory management has to be kept in mind.

Which is one of the main reasons why EmberJS was created.

Sometimes I wonder why backbone is still getting so much love when saner alternatives (Ember, Angular etc.) have been around for so long.

Is it only inertia or is there perhaps a need for a framework in the middleground between backbone and ember (in terms of abstraction)?

odiroot• 14 years ago

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

EzGraphs• 14 years ago

Javascript memory leaks can be identified using Browser Profiler (e.g. https://developers.google.com/chrome-developer-tools/docs/he...). Are there any other better/recommended tools for the job?

chrisa• 14 years ago

For IE specific memory leak testing, I've found sIEve to be very helpful: http://home.wanadoo.nl/jsrosman/

Jacob4u2• 14 years ago

I've been using chaplinjs as a backbone architecture for my last couple side projects and I really like it.

https://github.com/chaplinjs/chaplin

Simplified router, subviews, model binding techniques like described in the OP are all helpfully baked in.

bjhoops1• 14 years ago

Great pointing out that Backbone is deceptively simple. No best practices to be found on backbonejs.org.

Always worth considering using a framework layer like Marionette to help you with architecture. Otherwise you will end up writing something similar to it yourself. Which sometimes is necessary, but not always.

sontek• 14 years ago

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

politician• 14 years ago

I highly recommend onsi's Backbone.coccyx [1] for ensuring that views are torn down correctly.

https://github.com/onsi/coccyx

ldehaan• 14 years ago

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.

Preventing memory leaks in Backbone.js

Related Stories