title: Managing JavaScript complexity in a large project
body: <p>What should I use to manage growing number of JavaScript files in my application?</p>
  
  <p>We are building a django application with several apps. Each app has different functionality, and has to be rendered in three different modes (pc, tablet, mobile). There is a lot of things happening in JavaScript: managing data received from the server, handling user events, injecting HTML snippets, and loading sub-components. Some of the functinality is shared between apps and view modes, but often it makes sense to write a specific functions (for example, hover and click events may have to be handled differently on a PC layout vs. a tablet layout) so we are grouping this in files based on app/layout/function.</p>
  
  <p>Up to a point we were using a flat file structure with naming to differentiate types of files:</p>
  
  <pre><code>ui.common.js
  ui.app1.pc.handlers.js
  ui.app1.pc.domManupulators.js
  ui.app1.tablet.js
  ui.app2.pc.js 
  ...
  </code></pre>
  
  <p>Right now, however, as the number of apps (and corner cases) grows this way is fast becoming unusuable (we're approaching 20+ files and expecting maybe 40+ by the time we're done), so we are putting everything in directories like so:</p>
  
  <pre><code>js/
    common/
      core1.js
      ajax2.js
    app1/
      tablet.js
      pc.js
    app2/
      mobile.js
      ...
  </code></pre>
  
  <p>I have been looking at <a href="http://javascriptmvc.com/" rel="nofollow">JavaScriptMVC</a> to help with this. While it does offer useful tools it doesn't seem to have anything that would specifically make managing our giant JavaScript library better. We are expanding our dev team soon and code maintainability is very important.</p>
  
  <p>Is there something that may make our life easier? Are there any habits/rules of thumb you use in your work that could alleviate this?</p>