The Practices of Backbone.Marionette That I Believe the Best

On Marionette.Module

Dividing app into sub-modules

You can create sub-modules as many as you want inside one Marionette app. I higly enoucurage to take the advantage of sub-modules.

You can also say that sub-module is sub-application. The easiest way to imagine is Gmail. Gmail has many features: email, chat, contacts list, etc. You can construct each component as sub-modules in Marionette.

Let’s look at how we define sub-modules.

1
2
3
4
var MyApp = new Backbone.Marionette.Application();
MyApp.module("ModuleA", function(ModuleA, MyApp, Backbone, Marionette, $, _){
  // your module code goes here //
})

You may wonder about parameters in callback function. This is automatically passed in this order:

  • The module itself
  • The Application object
  • Backbone
  • Backbone.Marionette
  • jQuery
  • Underscore

They are defined in local scope and only accessbile from the callback function.

One of the benefits of using sub-modules is you can write codes of a module into separate files with ease.

Let’s say you define a ShoppingCart module.

1
2
3
4
var MyApp = new Backbone.Marionette.Application();
MyApp.module("ShoppingCart", function(ModuleA, MyApp, Backbone, Marionette, $, _){
    // your module code goes here //
})

You can easily guess what the module does: it takes care everything about shopping cart feature in your app.

One single ShoppingCart module is still too big to be written in a file. So, let’s divide them into separate files based on functionality: Controller and View.

shopping_cart_controller.js

1
2
3
4
5
MyApp.module("ShoppingCart", function(ShoppingCart, MyApp, Backbone, Marionette, $, _){
    ShoppingCart.Controller = Marionette.Controller.extend({
        // controller implementation goes here
    });
})

shopping_cart_view.js

1
2
3
4
5
MyApp.module("ShoppingCart", function(ShoppingCart, MyApp, Backbone, Marionette, $, _){
    ShoppingCart.View = Marionette.ItemView.extend({
        // view implementation goes here
    });
})

When you create modules, you don’t have to worry whether your module is already defined or not. If not defined, Marionette defines for you. So, in the previous case, ShoppingCart module is defined in shopping_cart_controller.js and shopping_cart_view.js just adds things to the module.

Maybe ShoppingCart.View still contains too many views to be in a single file such as show_view or new_view. You can further divide your ShoppingCart sub-module like this.

show/shopping_cart_view.js

1
2
3
4
5
MyApp.module("ShoppingCart.View", function(View, MyApp, Backbone, Marionette, $, _){
    View.ShowView = Marionette.ItemView.extend({
        // show view implementation goes here
    });
})

new/shopping_cart_view.js

1
2
3
4
5
MyApp.module("ShoppingCart.View", function(View, MyApp, Backbone, Marionette, $, _){
    View.NewView = Marionette.ItemView.extend({
        // new view implementation goes here
    });
})

I create separate directories for show and new and put each file there. You can continue this process until you are satisfied.

Probalby enough words are spoken to introduce sub-modules.

So here is the pattern statement. Use sub-modules to seperate codes