How do you organize large JS/jQuery code bases across your entire website?

Question

How do you organize large JS/jQuery codebases across your entire website? There are plenty of good resources on how to organize pieces of your code, but nothing really about ho

Answer 1

To help me answer your specific questions, please allow me talk a little about JavaScriptMVC's features:

Controller will improve your jQuery widgets, taking care of setup / teardown, extensibility.

View adds client side templates that can be built into your app.

Model abstracts the service / data layer minimizing and localizing JS changes if your server changes.

Steal does dependency management, compression, and code cleaning. It will even take all your scripts across all your pages, figure out shared dependencies, and combine scripts into an optimal payload.

FuncUnit makes testing your apps as easy as possible.

DocumentJS ... well ... documents your code

.

Now on your specific questions:

How to deal with logic used in multiple places?

I use StealJS's dependency management system to load the functionality I need into my page. Dependency management is absolutely necessary on apps of a certain size. RequireJS is a good choice if you are able to build it easily.

How do you organize page specific code

Page specific code should be as small as possible. It typically involves loading dependencies and a "MainController". That main controller configures the page to obey the functional / business requirements of that page. It's typically namespaced as something like:

App.Controllers.Main

how do you stop writing the same patterns

Well, I suggest using a framework that has stable patterns for development. Also, keep your modules / plugins / widgets as small (and testable) as possible. This will make these parts much less likely to change.

Finally ....

It seems your biggest struggle tension between:

• shared functionality
• multiple pages
• timely load times

So picking a solid dependency management tool is super critical. StealJS could help you get very optimal loading times, but you'd have to stray from JavaScriptMVC's standard folder organization due to your larger number of pages.

RequireJS is more flexible, but you're going to have to load a lot of files. Not only will this be slow, this is going to start making you create lots of big JS files that aren't very organized.

If you are happy with the loading times and feel like they won't cause you to squeeze code into files it doesn't belong, your current solution seems like it will work.

I think the secret to maintainable development is how easy your system/framework allows you to isolate concerns. It's important to break up your app into the smallest parts possible. Plus, you should be testing these parts. People get side-tracked by thinking about their pages functionality. But to really scale development you really need something that allows you to break up your app into little parts, load those parts easily, and somehow get the app to still run fast in production.