Including/Organzing HTML in large javascript project

Question

Hi,

I've a got a fairly large web app, with several mini applets on each page. These applets are almost always identical jquery apps. I am looking for advice on how I should organize/include smaller parts of these jquery apps within my larger project.

For example, each app has several independent tabs. If possible, I would like to store each of the tabs as a seperate .html file because this makes development easier.

My requirements are: 1) All of the html 'tabs' are loaded on the clients end when the page loads. I would like to avoid any delays by dynamically requesting the tab html.

2) If possible, I would like to minimize the raw data sent. For example, it would be preferable to send each tab 1 time, instead of sending each tab 10 times if there are ten applets on that page.

Questions: 1) What are my options for 'including' the HTML files / javascript code 2) Any tips for keeping my development simple in this situation? Surely there has to be a better way than just editing one massive html file when working with large pages.

Answer 1

It's a bit hard to get my head around exactly what you are asking for, but a point that certainly has to be made is that you can use clientside caching, if you set it up right on your server you can tell the client to load the same file many times, but the client will only download one copy and reuse that copy. (Query string must also be the same, but hash string may differ)

Browsers and user will not have a problem with a big HTML file (at least not as long as we are talking <1MB), with caching it's probably the method that has the least bandwidth overhead. But if you prefer to work with smaller files you could set up a php script to concatenate your development files, just make it write to disk rather than serve directly, and serve the resulting file.

Answer 2

You can use server-sides includes... Loading content with JavaScript isn't a good idea because some people won't be able to access it.

And if you want to make you page load before your scripts, just put the s elements just before the . And of course, put your scripts in distant files so that browsers use cache.

@eBusiness : If he uses Ajax, I don't think browsers will use the cache... Only IE gets the page from his cache with XHR.

Answer 3

The PURE javascript templating engine has been useful to me: http://wiki.github.com/pure/pure/pure-version-2-release-notes

It uses branches of the DOM as its templates - you can either use an existing part of the page, or request the template HTML over XHR when it's needed (or before).

PURE applies JSON data to the template to render the result - you can have it do this automatically (by mapping classes in the HTML to properties in the JSON), or get fine control using a set of rules, also stored as JSON.

It's VERY fast to render, and relatively easy to set up.

So - in your example you'd have:

• One set of HTML for your 'tab' - either include it in the page or request it with XHR.
• Retrieve the contents of each tab over XHR as JSON object - much less data than sending HTML+content
• Render the JSON with the tab template to wherever you want it on the page.