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?
Best Answer
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'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.
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.