14

Let's say you are building a large application, and you expect to have tons of javascript on the site. Even if you separated the javascript into 1 file per page where javascript is used, you'd still have about 100 javascript files.

What is the best way to keep the file system organized, include these files on the page, and keep the code structure itself organized as well? All the while, having the option to keep things minified for production is important too.

egervari
  • 21,108
  • 30
  • 115
  • 171

3 Answers3

8

Personally I prefer the module pattern for structuring the code, and I think this article gives a great introduction: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

It keeps my global scope clean, enables namespacing and provides a nice way to seperate public and private methods and fields.

I'd structure the code in separate files, and seek to keep coupling low and cohesion high. Although multiple files are bad for client performance (you should minimize the number of requests), you'll easily get the best from both worlds using a compression utility.

I've some experience with YUI Compressor (for which there is a Maven plugin: http://alchim.sourceforge.net/yuicompressor-maven-plugin/compress-mojo.html - I haven't used this myself). If you need to order the javascript files in a certain way (also applies for CSS), you could make a shell script, concatenating the files in a given order in advance (Tip: YUI Compressor defaults to STDIN).

Besides, either way you decide to minify your files will probably do just fine. Your focus should instead be on how you structure your code, so that it performs well on the client (should be highest priority in order to satisfy a good UX), and is maintainable in a way that works for you.

You mention namespaces, which is a good idea, but I'd be careful to adopt too many concepts from the traditional object oriented domain, and instead learn to utilize many of the excellent features of the javascript language :)

Jørgen
  • 8,059
  • 9
  • 44
  • 65
  • This seems like the simplest approach. What is the best tool to compress and merge this into 1 file, ideally something that works with maven? YUI compressor seems to take care of the min part, but I didn't see an option to join the files and to specify ordering unfortunately. – egervari Nov 30 '11 at 03:51
  • I have some experience with YUI Compressor, which there is a maven plugin for (http://alchim.sourceforge.net/yuicompressor-maven-plugin/compress-mojo.html). It also has support for multiple input (using wildcards) but I guess you'll have list all files manually or create a shell script if you need to change the default order. RequireJS, using the Clojure compiler for minification and concatenation is also popular for this, as @Josh mentions. – Jørgen Nov 30 '11 at 08:05
  • For a large application with many, many JS files, would you say using RequireJS would be better, or your approach (Which i'm assuming is similar to ThiefMaster's) – egervari Nov 30 '11 at 10:23
  • If you mean if I'd prefer YUI or requireJS, I honestly don't think it really matters which tool you end up with. Your focus should be on how to structure your code so that it performs well and is maintainable in a way that works for you. Both YUI Compressor and RequireJS will do the job of concatenating/minifying just fine :) – Jørgen Nov 30 '11 at 10:59
5

If the overall size is not too big, i'd use a script to compile all files into a single file and minify this file. Then I'd use aggressive caching plus the mtime in the url so people load that file only once but get the new one as soon as one is available.

ThiefMaster
  • 285,213
  • 77
  • 557
  • 610
  • While I expected that part of the answer (thank you for this), how do you organize the file structure, and more importantly, how do you organize or even connect the code (i.e. its architecture, if any)? – egervari Nov 29 '11 at 07:41
  • I have a file listing all JS files in the order I want them in the compiled file. So I manually ensure dependencies are available. – ThiefMaster Nov 29 '11 at 09:35
  • so everything is done manually and not by a build process? What about your html - does it always point to the compiled version then, or do you manage between development and production? I don't want to run the compile program every time I make a change to the javascript files :( Am I correct assuming that your actual javascript code is using the Module pattern shown by the other answer? Do you list every file manually then in your compile script - like all 100? – egervari Nov 30 '11 at 01:07
  • I have a condition in my template that either executes the function to create script tags for all files or for the single file. The compilation is done by a build script of course; the only thing that is done manually is ensuring the dependencies are met - with jQuery plugins it's usually "load X after jQuery/UI" anyway, and my application code is split to files that do not depend on each other. – ThiefMaster Nov 30 '11 at 07:30
  • I am pretty much using the module pattern. For each page that needs specific JS I have `function whateverInit(options){}`. This function contains all the logic for this site - i.e. it register handlers, contains private functions, etc. On the related page I execute that function via a document.ready in a a script tag. – ThiefMaster Nov 30 '11 at 07:32
1

Use:

  • jslint - to keep checks on code quality.
  • require.js - to get just the code you need for each page (or equivalent).

Organise your js as you would any other software project, break it up by roles, responsibilities and separating concerns.

Tom
  • 39,281
  • 4
  • 35
  • 60
  • I obviously know how to refactor, but there are so many ways people split up behaviour architecturally. Some people use namespaces. Some people use classes (their own system added on to Javascript). Others wrap everything in anonymous functions. There are a lot of ways to do it. I have no idea which is correct. Other programming languages give you few choices, so you can't mess this up. In the JS space, people have invented about 20 ways to it - or even nothing at all. – egervari Nov 29 '11 at 07:54