File structure for javascript-based web application

Question

I'm planning to write a javascript-based web application. I'm wondering what the best way to implement it in terms of file stucture is.

There is one main page (main.html) containing a menu and a main div section. The way it works is simple: When the user clicks on one of the links in the menu (for example 'Page 1'), the content of the div section is refreshed with the content of the page1.html file. This is done using javascript (jquery). If the user clicks on 'Page 2', the content of the page2.html file is loaded into the div section, etc.

Each page has its own javascript code and as I prefer to keep it separate I've implemented a sort of 'code behind' like in asp.net:

page1.html:
< script type="text/javascript" src="page1.js" >< /script>
<... html code ...>

page2.html:
< script type="text/javascript" src="page2.js" >< /script >
<... html code ...>

When the user clicks on 'Page 1', the content of the page1.html file is loaded into the main div section of main.html. As page1.html is referencing page1.js, the javascript code in page1.js is also loaded.

This seems to work fine but I'm wondering if it is the best way to implement this. At some point I was thinking of referencing all the javascript files in main.html This would also work fine but it would mean all the javascript files would have to be loaded in memory even if they are not going to be used. With the 1st approach, a javascript file is only loaded in memory before being actually used.

Any ideas? What are the 'best practises' for this? Keep in mind that this is a web application (as opposed to a website). It will be available over the internet but only to some users (and it will be password protected) so I don't care about SEO etc.

Answer 1

It might be of no consequence to you but you know that from an SEO perspective this is a terrible idea. Your site will be a Javascript version of a flash site. There will be only one page as far as the search engines are concerned.

That's why sites based on frames, which were quite popular for a number of years, all but disappeared.

Answer 2

Loading of JavaScript files is synchronous, which negatively affects page loading time/perceived responsiveness.

For that reason I think it's best to merge all scripts into one file, compress it with YUI compressor and send gzipped. You'll get best compression and least HTTP overhead this way, and cached JS won't pause loading of other pages.

For page-specific, dynamic scripts use in-line <script>…</script>.

Answer 3

@porneL

there are ways and means to get JS to load async'ly (creating script tags specifically) but these could be deemed unsafe

@OP

I agree with others that this sounds like a bad idea from an SEO and accessibility standpoint, a performance issue from a practical standpoint (there are ways of bootstrapping in code but it's a lot of effort for minimal gain I think), and of questionable efficacy from an application development standpoint. As a hypothetical exercise, I imagine porneL's gzip solution is best.

Basically, I think you'll have trouble finding best practices for something few would practice.