Managing JavaScript complexity in a large project

Question

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?

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
– dm03514, Commented Jan 18, 2012 at 19:50
@dm03514: Nothing wrong with it, just wondering if there's a better way. — Goro
– Goro, Commented Jan 18, 2012 at 19:55

Cory Danielson · Accepted Answer · 2012-01-18 19:52:28Z

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.

answered Jan 18, 2012 at 19:52

Cory Danielson

14.5k4 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tejs · Accepted Answer · 2012-01-18 19:47:16Z

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.

answered Jan 18, 2012 at 19:47

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

1 Comment

Goro Over a year ago

Namespaces are important, we pretty much couldn't manage the code at all without them. See my post about namespaces: stackoverflow.com/questions/8916629/…

Collectives™ on Stack Overflow

Managing JavaScript complexity in a large project

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related