Backbone as simple as angular

Often people misunderstand javascript to be too inferior . And they fear the more code we write in js the more will be the maintenance nightmare. So my pursuit is to convince how much readable code are the new genre of javascript frameworks providing us. I shall be mainly dealing with Backbone which i came across when searching for a stable and well proven framework.

 

define([
  'underscore',
  'backbone',
], function(_, Backbone) {
    Profile = Backbone.Model.extend({
        idAttribute: "accountid",
        urlRoot : '/trip-2/tpp/account/',           
        initialize : function(model,options){
            this.bind("change",this.displaylog);
        },
        parse:function(response){
            return response.account;
        },
        displaylog:function(model){
            console.log(model.toJSON());
           }
    }); 
  return Profile;
});

Above code represent a typical Model object in BackBone. THe backbone of Backbone are three standard Objects defined by framework. And they are

• Model

• Router

• View

The view and model corresponds to the same as in MVC architecture. The model is the link b/w the server side service and the javascript. Somebody asked me is it synonymous to the Business Modl in server side? If you think you are doing critical business functionalities in client side then offcource you can encapsulate them in Model. But i think majority of javascript apps deals with displaying and doing trifle actions like checking,updating,creating,view related actions like drag,drop etc. Out of these the major things affecting our data  are update,save delete etc. Its these update delete create that are organised into model.

The profile model here is linked to service  '/trip-2/tpp/account/' .During fetch a GET action is fired to this url and when data is updated a PUT is fired and when a new profile is added a POST is fired.

This completes our backbone Model.

Now one of the major adavantage of using Backbone is its flexibility. Its optional we use a Router or a View. THese are useful if we are to bring in seprataion of concern in the javascript layer.Like we have a separate js dealing with DOM manipulation namely VIew. And another js for handling model and server communication namely Model. You may ask why separation of concern since it only seeks to increase the number of files associated.

• It improves code maintainability. WHich is an important factor when you are writing complex client side application.
• Mix and match of various technologies .
  

 hus this particular model object gets its data by calling the service at this link via a GET request.

And when to save the data of this model it call the same url but with a PUT.

And when to create a new model it update server side by calling POST to the same url. This is something knows as the REST based convention. Where this object corresponds to a Resource at the server side. And all operations are accessed cia a RESTful url with actions - GET,PUT,POST,DELETE etc. Backbone expects your application to be of RESTful nature by default. But this is not a mandatory. Once can change the urls/format/operations of the save update delete etc. By implementing the save,fetch,destroy methos in the model