Preventing memory leaks in Backbone.js(paydirtapp.com)

79 pointsby doctororange14 anni fa34 comments

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

11 comments

davidw14 anni fa

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.

throwa14 anni fa

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

crescentfresh14 anni fa

> use the right tool for the right job

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

atomical14 anni fa

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.

throwa14 anni fa

@atomical, the link to trek's article above puts it more succintly:

Ember applications start out with a complexity rating of 4/10 but never get much higher than 6/10, regardless of how sophisticated your application becomes. Backbone starts out at 1/10 but complexity grows linearly. This is a natural side effect of the types of applications the two frameworks were specifically created for.

davidw14 anni fa

What I'm investigating Backbone/Ember/whatever for is a semi-embedded device that will ship with a web interface, so some semblance of stability is a major plus.

throwa14 anni fa

As we speak it is used in production by many companies. Click this link to see them all:

https://github.com/emberjs/ember.js/wiki/Production-Deployme...

Shopitome is a very fresh deployment using emberjs based on this tweet sent today:

http://twitter.com/inkredabull/status/268017623428657153

http://www.shopittome.com/threads/signup

A few non trivial companies using emberjs in production are:

www.zendesk.com

http://www.squareup.com/

http://livingsocial.com/

http://www.groupon.com

http://www.desk.com/

http://basho.com/

http://travis-ci.org/

http://www.gooddata.com/

davidw14 anni fa

Web production != shipping on devices production. You can very easily ship updates to the former whereas the latter is tricky. It means we need to be careful with everything we choose.

camus14 anni fa

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.

throwa14 anni fa

Yes it does. I have added enough links that touch on that.

https://github.com/emberjs/data

http://emberjs.com/guides/ember-data-lifecycle/

https://speakerdeck.com/tomdale/30 slides for the video below

http://www.youtube.com/watch?v=djhAsWGOImk Tom Dale - Ember-data

https://speakerdeck.com/tchak/ember-data

oelmekki14 anni fa

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

devmach14 anni fa

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.

ehutch7914 anni fa

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

davidw14 anni fa

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

bricestacey14 anni fa

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_brown14 anni fa

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

ldehaan14 anni fa

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.

Jacob4u214 anni fa

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.

mikeknoop14 anni fa

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.

chrizel14 anni fa

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

moe14 anni fa

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

bjhoops114 anni fa

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.

EzGraphs14 anni fa

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?

chrisa14 anni fa

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

SeppoErviala14 anni fa

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

jpk14 anni fa

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

andrewvc14 anni fa

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?

m6425314 anni fa

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.

Flow14 anni fa

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?

chrizel14 anni fa

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

sim0n14 anni fa

Backbone Views often bind to model/collection events.

politician14 anni fa

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

https://github.com/onsi/coccyx

sontek14 anni fa

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

odiroot14 anni fa

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

SparrowOS14 anni fa