base architecture for backbone.js / socket.io driven app

general-architecture-considerations.js

(function() {
  var Application, LocalStore, SocketManager, StateMachine, Viewport;
  /*
     There should be a viewport class
     which watches over the whole area
     of your single page app.  global events
     can be handled here.
  */

  Viewport = Backbone.View.extend({
    el: "#top-most-container"
  });

  StateMachine = Backbone.Model.extend({
    initialize: function(attributes) {
      this.attributes = attributes;
    }
  });
  
  // we have our main application 
  Application = (function() {
    function Application(options) {
      this.options = options;

    /* 
     incorporate backbone's event system
     into the application class so you can trigger
     and bind to events
    */

      _.extend(this, Backbone.Events);

    /*
      use backbone's model for storing
      state.  you could even synchronize
      state with the server this way, or
      use the LocalStore class documented later
    */

      this.state = new StateMachine;
      this.state.bind("change:whatever", this.onWhateverChange);
      this.socket = new SocketManager();
    }
    
    // store state attributes
    Application.prototype.set = function(attribute, value) {
      return this.state.set(attribute, value);
    };

    Application.prototype.get = function(attribute) {
      return this.state.get(attribute);
    };
    
    // in the app, you can bind to change events in the state # model, and act accordingly
    Application.prototype.onWhateverChange = function() {};

    return Application;

  })();
  
  // on document ready, create an instance of your app
  $(function() {
    return window.MyApp = new Application();
  });
  
  /*
   the socket.io server will be emitting 
   events over the socket.  a very clean way
   of handling these events is to just have
   the socket send an array with [event_name='', event_args={}] 
  */
  SocketManager = (function() {

    function SocketManager(options) {
      this.options = options;
      _.extend(this, Backbone.Events);
      _.bindAll(this, "relayer");
      this.bind_to_socket();
    }

    SocketManager.prototype.bind_to_socket = function() {
      return this.socket.on("relay", this.relayer);
    };
    /*
      any events which get relayed over the socket, will be emitted
      with its arguments by the socket manager instance
    */
    SocketManager.prototype.relayer = function(data) {
      var args, event, _ref;
      _ref = JSON.parse(data), event = _ref[0], args = _ref[1];
      return this.trigger(event, args);
    };

    return SocketManager;

  })();

  /*
    a local store is similar to a table in a normal database.
    it is a way of organizing, storing, retrieving, updating
    backbone models in localStorage. Models are stored against
    a GUID.  You can sync the models based on a shared GUID on 
    your server side data store
  */
  LocalStore = (function() {

    function LocalStore(name) {
      var store;
      this.name = name;
      store = localStorage.getItem(this.name);
      this.data = (store && JSON.parse(store)) || {};
    }

    LocalStore.prototype.guid = function() {
      var S4;
      S4 = function() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      };
      return S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4();
    };

    LocalStore.prototype.save = function() {
      return localStorage.setItem(this.name, JSON.stringify(this.data));
    };

    LocalStore.prototype.create = function(model) {
      if (!model.id) model.id = model.attribtues.id = this.guid();
      this.data[model.id] = model;
      this.save();
      return model;
    };

    LocalStore.prototype.update = function(model) {
      this.data[model.id] = model;
      this.save();
      return model;
    };

    LocalStore.prototype.find = function(model) {
      return this.data[model.id];
    };

    LocalStore.prototype.findAll = function() {
      return _.values(this.data);
    };

    LocalStore.prototype.destroy = function(model) {
      delete this.data[model.id];
      this.save();
      return model;
    };

    return LocalStore;

  })();

  /*
    All models, collections delegate to Backbone.Sync for their
    persistence layer.  We can store in localStorage instead.
  */
  Backbone.Sync = function(method, model, options) {
    var resp, store;
    store = model.localStorage || model.collection.localStorage;
    resp = (function() {
      switch (method) {
        case "read":
          if (model.id) {
            return store.find(model);
          } else {
            return store.findAll();
          }
        case "create":
          return store.create(model);
        case "update":
          return store.update(model);
        case "delete":
          return store.destroy(model);
      }
    })();
    if (resp) {
      return options.success(resp);
    } else {
      return options.error("Record not found");
    }
  };

}).call(this);