CSX Application Backbone

dependency free modular application structure

Goals

  • Independent modular application structure
  • Easily require shared modules
  • Clear documentation

Core Backbone Extensions

  • Backbone.Composer
  • Backbone.Broker
  • Backbone.Unloader

Backbone.Composer

  • Minimize boilerplate code
  • Manage view lifecycle
  • Simplify subview management

backbone.Broker

  • Pub/Sub event aggregator based on channels
  • Application wide singleton

Channels

var broker = require('broker');
var channel = broker.channel('session');

broker.channel

  • Retrieves or creates a channel

Subscribe

var broker = require('broker');
broker.channel('session').subscribe('login', function(){
    ...
});

Subscribing to events on a channel

Publish

var broker = require('broker');
var view = new Backbone.View();

broker.channel('session').publish('show',view);

Publish an event to a channel

Dos and Don'ts

Do

  • Send events between independent modules

Don't

  • To replace existing model, collection and view events

Backbone.Unloader

  • Dynamically load and unload routes
  • Limit access to routes based on user rights
  • Can be triggered based on broker events

Route Setup

var router = Backbone.Router.extend({
    initialize: function(){
        broker.channel('session').subscribe('login', function(){

            this.loadRoutes({
                'home': 'showHome',
                'user/:id': 'showUser'
            });

        }.bind(this));
    }
});

Load routes on logon

Unloading

var router = Backbone.Router.extend({
    initialize: function(){
        broker.channel('session').subscribe('logoff', function(){

            this.unloadRoutes();

        }.bind(this));
    }
});

Make sure all routes are unloaded at logoff

More Information

  • Repo - https://github.com/connectsolutions/csx-frontend.git
  • Lib - app/common/backbone

Shameless Plug

  • Please STAR the project
  • Follow me on Github and @nancenick
Made with Slides.com