Last Updated: February 25, 2016
· isochronous

Drop-In Sub-Application Architecture for Backbone.Marionette

In my latest project, I had to develop a pattern for a Backbone.Marionette application framework that would be easily extensible with "drop-in" sub-applications that should require minimal effort to add to the master application.

This is what I came up with. It requires one additional custom component - Marionette.SubAppRouter (also included in the gist) to provide relative routes for sub applications, but other than that requires no logic not already provided by Marionette.

I should note that we are using requireJS for dependency loading rather than Marionette's module system.

6 Responses
Add your response

Hi Jeremy!

Thank you for this awesome implementation! Helped me out with my own app!

Only one question about the vent.super.js ... when I try to add the bus messaging system to my app, always the following error is shown:

Uncaught TypeError: Cannot call method 'extend' of undefined vent.super.js:26

Seems that Marionette.EventAggregator.extend({ wont work ... has Marionette maybe been updated?

over 1 year ago ·

I've updated the gist. The only change I made was to the SuperVent.js file - immediately before trying to extend the Marionette.EventAggregator class, I just added the line

Marionette.EventAggregator.extend = Backbone.Model.extend;
over 1 year ago ·

Also I should mention that this code was written for Marionette while it was in a very early RC state, and I know things like EventBinder have been removed or replaced with Backbone's new event system, so it may require a little tweaking.

over 1 year ago ·


Should line 21 in Application.root.js be
rootApp.subApps = subApps;
instead of
rootApps.subApps = subApps;

It should be rootApp instead of rootApps?

over 1 year ago ·

Sure enough. Good catch; I've updated the gist.

over 1 year ago ·

If this has come in handy, I sure wouldn't mind an upvote... just sayin'

over 1 year ago ·