Live data from Hacker News

Preventing memory leaks in Backbone.js

paydirtapp.com

11–20 of 36 posts

Re: Preventing memory leaks in Backbone.js

#11

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.

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

Re: Preventing memory leaks in Backbone.js

#12
post #10
post #7

Earlier quoted context omitted.

It's quite common to bind to events on objects like models or collections etc. which will not be unbound just because the dom element is.

Isn't that true only for older Internet Explorer versions because they had two garbage collectors, one for DOM stuff and one for JScript stuff?

That's not a problem just for IE. It's a problem that browser vendors could only solve by giving us WeakMaps (which could come in ES6 http://wiki.ecmascript.org/doku.php?id=harmony:weak_maps#wea... )...

The problem is, you have a bunch of subviews which are registering events on some collection models... when you rerender your parent view your subviews get recreated but your previously created subviews stay in memory because the backbone events system still stores references to the old views which aren't really needed anymore. The only solution is to explicitly remove the events when subviews a destroyed (or better use a solution like in the submitted article) or use a library like https://github.com/marionettejs/backbone.eventbinder

Re: Preventing memory leaks in Backbone.js

#14
post #11

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.

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…

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)?

Re: Preventing memory leaks in Backbone.js

#15
DOS worked just fine. You're trying to tell me it was unusable because it could crash. Computers had reset buttons.

SparrowOS identity-maps all memory all the time. It will fragment.

All of your concerns? It's bad in theory but good in practice just like DOS.

Do this -- only report problems that actually happen. I'm smarter than you, India Nigger.

Tell me? How does invalidaterectangle help a full-screen flight simulator? Doesn't. Renders everthing 60Hz.

master/Slave multicore. Most activity happens on core 0. It can request helpers on other cores. This is better than SMP because you don't want tasks shifting around. You're gonna argue, brainwashed Indianigger, monkey. I want to run one app twice as fast, not two.

Should we focus on two video games at once or one video game at once as a primary usage?

I'm not targeting mobile. Thermostat uses 90% of nontransportation energy.

Re: Preventing memory leaks in Backbone.js

#16
post #5

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 t…

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

Re: Preventing memory leaks in Backbone.js

#17
post #5

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 t…

@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.

Re: Preventing memory leaks in Backbone.js

#18
post #5

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 t…

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

Re: Preventing memory leaks in Backbone.js

#19
post #5

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 t…

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

Re: Preventing memory leaks in Backbone.js

#20

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?

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