After organizing the file structure of my web app, utilizing RequireJs and Backbone.Marionette, it now looks like this:
|- main.js
|- app.js
|- /subapp1
|- subapp1.js
|- subapp1.router.js
|- /subapp2
|- subapp2.js
|- subapp2.router.js
|- /collections
|- /views
To load the modules, I have incorporated requireJs.
Below is my code where each module has some associated questions.
// main.js
define([
'app',
'subapp1/subapp1.router',
'subapp2/subapp2.router'
], function (app) {
"use strict";
app.start();
});
Questions:
1) Is it appropriate to asynchronously load the app and subapps even if subapps rely on the app?
2) Should the router which requires the app be loaded for the subApps?
// app.js
/*global define*/
define([
'backbone',
'marionette',
'models/user'
], function (Backbone, Marionette, UserModel) {
"use strict";
var App = new Marionette.Application();
App.addRegions({
header: '#header',
sidebar: '#sidebar',
mainColumn: '#main-column',
rightColumn: '#right-column'
});
App.on("initialize:before", function () {
this.userModel = new UserModel();
this.userModel.fetch();
});
App.on("initialize:after", function () {
Backbone.history.start();
});
return App;
});
Questions:
3) Since the subApps may need some models, I decided to load them in app.js. Is this the correct approach?
// subapp1/subapp1.js
/*global define*/
define([
'app',
'subapp1/views/sidebarView',
'subapp1/views/headerView'
], function (app, SidebarView, HeaderView) {
"use strict";
app.addInitializer(function(){
app.header.show(new HeaderView({userModel: app.userModel}));
app.sidebar.show(new SidebarView({userModel: app.userModel}));
});
});
Question:
4) Regarding this module, I am uncertain about the app.addInitializer.
I am unsure whether the app.userModel will be fetched when I execute app.header.show.
Would that work correctly?
// subapp1/subapp1.router.js
/*global define*/
define([
'marionette',
'tasks/app'
], function (Marionette, app) {
"use strict";
var Router = Marionette.AppRouter.extend({
appRoutes: {
'tasks': 'tasks',
'tasks/:id': 'taskDetail',
'*defaults': 'tasks'
}
});
return new Router({
controller: app
});
});
Question:
5) Is it acceptable to load the subapp1/subapp1.router from main.js rather than subapp1/subapp1?