title: Marionette building re-usable sub-apps and modules
body: <p>I am currently building a complex marionette application and have been follow a <a href="https://leanpub.com/marionette-gentle-introduction" rel="nofollow">great book</a> as a reference. However, I am a sucker for reusable code and like to keep things flexible as possible.</p>
  
  <p>My application has various screens and modules, one of which is a dashboard. The dashboard has its own set of responsibilities, so I made the conclusion that it should be a sub-app. </p>
  
  <p>The dashboard is split 50/50 and there are two components inside. I have identified that each of these components (lets say <code>compA</code> and <code>compB</code>) each have their own set of responsibilities aswell and should be their own sub apps. However, I will have the use case where <code>compA</code> will be used in another area of the application.</p>
  
  <p>My first thought with re-use in mind was to simply re-use the views and create a new module where ever this particular view was needed. However, the unique events and actions that come with this view are stored in the controller and API to interact with the module.</p>
  
  <p>So I have ended up with the following structure:</p>
  
  <pre><code>    application.js
      apps
      --dashboard
      --compA
      --compB
  </code></pre>
  
  <p>and I have implemented something like the following to reuse functionality from <code>compA</code></p>
  
  <pre><code>Controller = {
      getView: function () {
          return new Show.MyView();
      }
  }
  
  API = {
      getMyView: function () {
          return Controller.getView();
      }
  }
  
  App.reqres.setHandler('compa:get:view', function () {
      return API.getMyView();
  });
  </code></pre>
  
  <p>Doing this allows me to request a new instance of the view to display and keep the same action logic. However, this means that there is no separation between each section (<code>compA</code> in the dashboard, and <code>compa</code> in another section of the app). So if I were to stop the <code>compa</code> module it would not have the desired results.</p>
  
  <p>Is there a better approach to re-usable modules with minimal duplication of code? </p>
  
  <p>My thought was to extract the Controller logic into a controller object that I can extend, and then creating a new 'sub app' when I would like to re-use the features. </p>
  
  <pre><code>    application.js
      apps
      --dashboard
      --compA-dashboard // new instance of Controller
      --compA-somewhereelse // new instance of Controller
      --compB
  </code></pre>
  
  <p>It seems as though I may be over-complicating my design pattern.</p>