Starting with Modules

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