0

I'm currently making some improvements for a client on a backbone.js app. The app is a web store and inventory management system. One thing that bothers me about this app (and other backbone.js apps I've encountered) is that it loads the entire collection of inventory items into memory from the server on every initial page load. After about a year and a half in production, this data set (not including image assets) is around 2.7 MB. So for every visitor to the web site, the javascript front-end pulls 2.7 MB data over the wire on initial page load. Of course this results in serious lag (around 8-12 seconds to load over most consumer-class broadband connections in my area). To me this load time is unacceptable. Of course once the data is loaded, the rest of the website is super snappy and responsive.

Is loading an entire collection really the best-practice way of developing backbone.js apps? I'm trying to figure it out because the books and tutorials I've come across seem to teach this. Is there another pattern to follow? Trying to keep it backbone.js specific --- but how does one manage large datasets in this framework?

2

Is loading an entire collection really the best-practice way of developing backbone.js apps?

Not necessarily, having worked in a backbone app with similarly large collections we wrote a base collection class that helped us paginate smaller sets of the data.

I'm trying to figure it out because the books and tutorials I've come across seem to teach this.

I'd say most tutorials I've read on backbone don't explore what to do with apps that have large sets of data, or a large number of UI elements, so our team always explored options for improvement.

Is there another pattern to follow? Trying to keep it backbone.js specific --- but how does one manage large datasets in this framework?

This is a pretty broad question, but like I mentioned before, create a base class that allows you to paginate a collection easily (use internal models to manage state where needed), and write the api support to allow it. In addition to pagination, add search query support, so users can search through data, having your collection fetch keywords on the fly. Always share collections across views and make the most of smaller sets of data.

1

I don't think there are any solution specific to Backbone, since it is quite a flexible framework that does not impose any special behaviour.

What I would do in your case, pretty much like @Satanicpuppy pointed out, is load the data in small chunks so you have immediately something to show from the beginning and keep loading the data in the background (you could implement some kind of infinite scrolling too). You can achieve this transparently by implementing your own sync or fetch method in your Collection. Look at the Annotated code to know where to look.

Another option you have is still to load the full collection but only limited properties (id & name?) and then fetch the full details of the single model when they are required to be shown (maybe on click?).

Also look at this SO question which highlights a similar problem: https://stackoverflow.com/questions/8953624/backbone-js-fetch-large-collection-causes-script-to-freeze

0

There isn't any real reason you need to load more stuff than you're going to display on the page. What's the extra data for? And 8-12 seconds is going to lose you customers. Our website monitoring throws errors if numbers climb into the hundreds of milliseconds.

There has to be a way to restrict the dataset you're loading...Are there no subsections to the inventory? And I'd try to frontload the most commonly requested items. That'll save your customers time and you bandwidth.

  • Thanks @Satanicpuppy --- and I agree with you completely. But I'm looking for a more backbone.js specific answer. All of the backbone docs I've come across teach loading the entire dataset into memory with a fetch() operation for responsiveness. I want to know how to have it pull data as needed from the api – b.b. Dec 10 '13 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.