title: How should I bootstrap my web app?
body: <p>I am looking for the best way to bootstrap my web app using <code>Backbone.Marionette</code>, <code>Backbone.Router</code> and <code>Requirejs</code>.<br>
  The following implementation works but I would like to know if this is the right way to make things.</p>
  
  <p>Here's some of my code (*).</p>
  
  <p>My questions are:<br>
  1) Is right the following data flow (<code>index.html</code> -> <code>conf.js</code> -> <code>router.js</code> -> <code>app.js</code>) ?<br>
  2) The <code>Backbone.View</code> for each region (<code>header</code>, <code>sidebar</code> .....) should be instantiate in <code>router.js</code> or <code>app.js</code> or booths according the context?</p>
  
  <hr>
  
  <pre><code>// index.html
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;!-- Load the script "/js/conf.js" as our entry point --&gt;
          &lt;script data-main="js/conf" src="js/vendor/require.js"&gt;&lt;/script&gt;
       &lt;/head&gt;
       &lt;body&gt;
       &lt;/body&gt;
  </code></pre>
  
  <h2>    </h2>
  
  <pre><code>// js/config.js
  require.config({
      // some code
  });
  require(['app']);  // instead of  require(['conf']); 
  </code></pre>
  
  <hr>
  
  <pre><code>// router.js
  define([
      'app',
      // others modules
  ],
  function(App, $, _, Backbone, Marionette){
      "use strict";
      var AppRouter = Backbone.Marionette.AppRouter.extend({
          routes: {
              test: test,
              "*defaults": "home"
          }
  
      var initialize = function ()
      {
          var app_router = new AppRouter;
      };
  
      return {
          initialize: initialize
      };
  });
  </code></pre>
  
  <hr>
  
  <pre><code>// js/app.js
  define(
  [
      // some modules
  ],
  function ($, _, Backbone, Router, Mustache, Layout, SidebarView) {
      var MyApp = new Backbone.Marionette.Application();
  
      MyApp.addInitializer(function () {
          $('body').html(Layout);
          MyApp.addRegions({
              header: '#header',
              sidebar: '#sidebar',
              mainColumn: '#main-column',
              rightColumn: '#right-column'
          });
      });
  
      MyApp.addInitializer(function () {
          var sidebarView = new SidebarView();
          MyApp.sidebar.show(sidebarView);
      });
  
      MyApp.on("initialize:after", function () {
  //        Router.initialize();
      });
  
      MyApp.start();
  
      return MyApp;
  
  });
  </code></pre>