6 ms·

Preventing memory leaks in Backbone.js

79 points by doctororange 14y ago

SeppoErviala 14y ago
Don't nested child views get garbage collected when the root view is removed?
- jpk 14y 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-managing-page-transitions-in-backbone-apps/ http://lostechies.com/derickbailey/2011/09/15/zombies-run-ma...
  - andrewvc 14y 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?
    - sim0n 14y ago
      Backbone Views often bind to model/collection events.
    - m64253 14y ago
      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.
      - Flow 14y ago
        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?
        chrizel 14y ago
        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#weakmap 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 https://github.com/marionettejs/backbone.eventbinder
davidw 14y 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 14y 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 ?
  - davidw 14y 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 14y 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 14y 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.
- throwa 14y 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://trek.github.com/ http://emberjs.com/guides/router_primer/ 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.
mikeknoop 14y 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.
- chrizel 14y ago
  But you have to keep in mind, according to the code (https://github.com/documentcloud/backbone/blob/master/backbone.js#L1234 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-managing-page-transitions-in-backbone-apps/ 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 https://github.com/marionettejs/backbone.eventbinder
odiroot 14y ago
AFAIR, it's one of the issues Backbone.Marionette is trying to fix with its bindTo/close solution.
EzGraphs 14y ago
Javascript memory leaks can be identified using Browser Profiler (e.g. https://developers.google.com/chrome-developer-tools/docs/heap-profiling https://developers.google.com/chrome-developer-tools/docs/he...). Are there any other better/recommended tools for the job?
- chrisa 14y ago
  For IE specific memory leak testing, I've found sIEve to be very helpful: http://home.wanadoo.nl/jsrosman/ http://home.wanadoo.nl/jsrosman/
SparrowOS 14y ago
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.
Jacob4u2 14y 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 https://github.com/chaplinjs/chaplin Simplified router, subviews, model binding techniques like described in the OP are all helpfully baked in.
bjhoops1 14y 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 14y 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 14y ago
I highly recommend onsi's Backbone.coccyx [1] for ensuring that views are torn down correctly. https://github.com/onsi/coccyx https://github.com/onsi/coccyx
ldehaan 14y 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.

79 points by doctororange 14y ago

SeppoErviala 14y ago

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

jpk 14y 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-managing-page-transitions-in-backbone-apps/ http://lostechies.com/derickbailey/2011/09/15/zombies-run-ma...
- andrewvc 14y 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?
  - sim0n 14y ago
    Backbone Views often bind to model/collection events.
  - m64253 14y ago
    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.
    - Flow 14y ago
      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?
      - chrizel 14y ago
        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#weakmap 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 https://github.com/marionettejs/backbone.eventbinder

davidw 14y 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 14y 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 ?
- davidw 14y 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 14y 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 14y 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.
throwa 14y 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://trek.github.com/ http://emberjs.com/guides/router_primer/ 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.

mikeknoop 14y 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.

chrizel 14y ago
But you have to keep in mind, according to the code (https://github.com/documentcloud/backbone/blob/master/backbone.js#L1234 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-managing-page-transitions-in-backbone-apps/ 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 https://github.com/marionettejs/backbone.eventbinder

odiroot 14y ago

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

EzGraphs 14y ago

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

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

SparrowOS 14y ago

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.

Jacob4u2 14y 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 https://github.com/chaplinjs/chaplin Simplified router, subviews, model binding techniques like described in the OP are all helpfully baked in.

bjhoops1 14y 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 14y 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 14y ago

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

ldehaan 14y 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.