Starting with Modules

Learn how to split an application code into modules in Marionette.

While building our app, we’ve simply been putting the code into index.html so far.

Refactor the code using Marionette modules

While that’s great for a small app, it won’t scale as our code base grows. So, let’s refactor our code using Marionette modules. Here's basic strategy we’ll follow:

  • One file for our general ContactManager app code (defining regions, the start handler, etc.): assets/js/app.js

  • One module to manage our entities, i.e., models and collections, broken down into one file per type, e.g., assets/js/entities/contact.js

  • One module for each sub-application. For example, the sub-application that will manage our contacts or the one that will manage our header menu. There will be sub-modules for each functional end result, such as listing all contacts or editing a single contact. For these sub-modules, we’ll separate functionality into a controller and a view, giving us two files. Here’s where we can find the files to list contacts:

    • assets/js/apps/contacts/list/list_controller.js

    • assets/js/apps/contacts/list/list_view.js

Get hands-on with 1200+ tech skills courses.