What is best for efficiently organizing and maintaining JavaScript

Question

I'm interested in hearing opinions on how to efficiently organize JavaScript (and jQuery) in a fairly large web application project that could potentially see high traffic.

Things that concern me:

• Be efficient on the server
• Be effective in the browser
• Maintaining Code Manageability

Suppose that all author JavaScript is stored in one massive application.js file, which, in turn, is combined with all external libraries into one js file, which the server must execute. This should be the most efficient on the server, since it only needs to serve it once, and then the browser will cache it for each subsequent page load.

Inside it there are many custom jQuery functions connected to selectors as follows:

 $('#my_unique_selector').bellsAndWhistlesPlugin(); 

If the above selector is present on only a few pages, using service methods in just one package means that every page load by the browser must analyze the plugin code (which will not be used) and then interpret the bellsAndWhistlesPlugin() method, although the selector does not find a match.

So, I think, my question is: at what point does this approach become ineffective? Is there an argument for splitting JavaScript and only serves the bits needed for each page? Or am I not worried about anything - are browsers more than capable of handling the loads of redundant code?

Answer 1

Something you should NOT do is merge all your JavaScript into a single file. If you ever make changes to your code base, this file is recreated ... and redistributed to each visitor. The HTTP overhead is pretty small, so if you don’t upload hundreds and thousands of unique files, downloading 20 different files compared to downloading 1 large will not differ from the differences, except for users with exceptionally slow connections (who will wait for a large file anyway, therefore, they will not notice extra seconds or two of the HTTP resources).

ToonMariner's recommendation on using hosted code (in particular, from the Google Code repository) is good - it eliminates the need to host a file, it allows users who encounter this file to use caching (improving the apparent loading speed of your site), and if you make changes, it will not be included in your concatenated file. Even if you decide to save the entire application in one large file, you should study it, since you can avoid jQuery packaging and save 50 + kb.

Also, your concern about interpreting the AndWhistlesPlugin () bells is correct - the this function in the bellsAndWhistlesPlugin function is just an empty list (although I should hope that the plugin will call $ (this) .each to iterate over the elements and return early, since there are no elements ... otherwise you may want to return to your plugins!). You can fix this problem by removing the page-specific code from your complete application.js file and placing it in the inline <script> element on the page itself, where it still belongs, or rewriting the plugin to return it earlier if not relevant items.

Just make sure that you enable caching for resources downloaded from the / js directory, and you won’t have problems reloading the libraries — only those that have been changed. You can use the Expires header or the Last-modified header; Expires will not necessarily be a forced update if the user does not restart or the cache has expired, and Last-modified causes HTTP overhead for each file, which is problematic for more files. You will need to appreciate the tradeoffs for your application.

If you are really seriously interested in maximum efficiency, you can rewrite your application using GWT . This technically guarantees maximum portability between browsers, maximum code efficiency, eliminates jQuery library dependency, will run faster and produce much smaller files. Everything in one file, I could add, but the compromises to get a static compiler for maximum JavaScript performance are worth it ... if you are ready to rewrite it all in GWT.

The question you should ask yourself is: who is my average user? What connection does he have? Should my application work on mobile devices? If your average user has a fast connection, don't worry about it - they will load your page fast enough, no matter which one you choose. If you need to work on mobile devices, or your intended audience has slow connection speeds, consider caching large libraries that change very rarely and using external repositories where they are available (e.g. jQuery), then pack the rest of your applications in one large file, HTTP overhead for mobile devices and slow Internet are significant enough to guarantee this.

Answer 2

My personal approach is to use the hosted code (I use googles jQuery repo) and put all my global assets (javascript, css files, images used by css) into a gzip file.

Answer 3

if $ ('# my_unique_selector') does not find matches, the called method will have a zero time. You are still using the request '#my_unique_selector', but bellsAndWhistlesPlugin () will never be called.

Answer 4

I was going to post something really similar to your question the other day, until I came across this:

Is there any JavaScript MVC (micro-) environment? Although I looked at the javascriptMVC document a bit, I did not have time to go through it completely. It looks like it will require a serious rewrite to get started.

I think, however, you are trying to correctly solve these problems as early as possible in your project.