5

What should I use to manage growing number of JavaScript files in my application?

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.

Up to a point we were using a flat file structure with naming to differentiate types of files:

ui.common.js
ui.app1.pc.handlers.js
ui.app1.pc.domManupulators.js
ui.app1.tablet.js
ui.app2.pc.js 
...

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:

js/
  common/
    core1.js
    ajax2.js
  app1/
    tablet.js
    pc.js
  app2/
    mobile.js
    ...

I have been looking at JavaScriptMVC 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.

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?

dm03514
  • 54,664
  • 18
  • 108
  • 145
Goro
  • 9,919
  • 22
  • 74
  • 108
  • 1
    What is wrong with the js/{app_name}/{device_type} layout? it seems to mimic django's app based setup and is very clear cut and organized. Is there any way in which it is lacking for you? – dm03514 Jan 18 '12 at 19:50
  • @dm03514: Nothing wrong with it, just wondering if there's a better way. – Goro Jan 18 '12 at 19:55

2 Answers2

2

Backbone.js is used to organize javascript heavy applications in an MVC-style pattern. It's going to take some learning, but it's definitely something you'll want to look into and learn a bit about even if you don't end up using it.

It's used on quite a few pretty impressive projects

And, here's a site to learn more with tutorials.

Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
1

Typically, grouping libraries by commonality (like your second example) would be preferred. However, more importantly would be making sure you have namespaced or otherwise make them unique so that you are unlikely to get naming collisions with other potential scripts.

Tejs
  • 40,736
  • 10
  • 68
  • 86
  • Namespaces _are_ important, we pretty much couldn't manage the code at all without them. See my post about namespaces: http://stackoverflow.com/questions/8916629/are-there-any-dangers-associated-with-using-javascript-namespaces – Goro Jan 18 '12 at 20:05