

The requirement is to detect whether a model has changed since the last client update. What type of data structure to use to send data back something that’s generic enough to cover all your collections and make adding new collections as painless as possible.How will those changes be streamed back to clients.How can we detect when models change (add, update, delete operations) so we can stream those back to other clients.On the server side you have to answer a few questions like: The server side is not a backbone.js problem per se, but it’s a critical part of the solution to implementing live updates on the client side and it just cannot be ignored.

The server side and the detection problem To give you an idea, I had collections for contacts, companies, sales opportunities, cases, files, tasks, notes, comments, persisted filters, custom fields, users, latest activity stream and a few others. I had to implement my own way of getting incremental updates and updating the backbone.js models and the solution had to be generic enough so it covers all the models and collections that I had. I think “reset fetch” is more suited for smaller collections that don’t change very often.Īt this point, I was on my own. In my case, implementing a CRM system, I had to deal with a lot of data, potentially thousands of models for each collection, so doing a “reset fetch” every time anything changes was out of the question. The “reset fetch” can get the job done but it’s slow and it’s not going to win you any beauty contests. In particular, if you send an existing model from the server, the “add fetch” will detect it as duplicate and ignore it. The “add” version, while doing an incremental update, as I wanted, it cannot cope with updates or deletes. The former is doing a “reset fetch”, while the latter is an “add fetch”. It has support for reloading the entire collection (a “reset fetch”) or appending new models to your collection (an “add fetch”). Collections have a fetch method which (re)loads the collection from the server.
Backbone js each update#
Handle collection deletes – existing models get deleted and therefore, removed from collectionsĪs a first step, I started by looking at the infrastructure provided by backbone.js to update collections, hoping I can reuse that.Handle collection updates – existing models get updated.Handle collection additions – a new model is added to the collection.Detect when collections and models change on the server side and be able to update all the clients.Translating that into technical requirements, that would be: Having many users updating the same information, you need to ensure that everyone sees the updates seamlessly, in real-time. It’s a problem that comes up a lot when you implement collaborative solutions. In this article, I’m going to cover the problem of live updates that I had to solve. This article is part of my effort to share some of the lessons learnt and get feedback on the solutions I have come up with, which, no doubt, can be improved. While it was a good learning experience, sometimes, wise people learn from other people’s experiences and that’s always preferred. In the end, I had to come up with my own solutions for a lot of problems, like paginating and filtering backbone.js views/collections and got bitten by subtle bugs. When I’ve started work on Clevertim CRM, which heavily uses backbone.js, I wanted to read about some of the real world problems and their solutions, in order to reuse as much as possible, rather than spend time re-inventing the wheel. It’s the simplicity of it that makes me want to learn how others are using it to solve real world problems. Var Classroom = don’t know about you, but backbone.js always left me crave for more. In the current example, Classroom is a collection of the model Student: A **Backbone Collection is a collection of models.


In the terminal below, the Backbone Model is a single entity that defines one single Student. For example, let’s define a classroom of students.Define the Jquery, underscore, and backbone sources that are used to define backbone objects and underscore methods.
