Heavy use of ajax question - how to render html on a page initially and afterwards as it is modified?

Question

I'm sure this is a common problem for many web applications these days. What is the best way to reuse html templates so that you're not doubling up when you initially render the page and when new things are added to that page?

1. I could render the HTML page like normal, but not populate any of the data specifically. Then, each section of the page would be responsible for rendering itself using Javascript. The good thing about this method is that javascript is used to render all of the content that is updatable. There's also a really nice separation of concerns here, where each section on a page does it's own thing.

   The drawback is that I am making multiple requests to the server per page as it loads up.

2. I could send HTML fragments generated by the server and just prepend/append them to whatever part of the page. This makes the initial loading of the page very fast. It also reuses the same server-side template code, so there is also no duplication.

   The drawback is that I can't inspect it further. The other drawback is that prepend/append is pretty limited. What if I want to maintain how it is sorted? If it's alphabetical, the user will have to refresh the screen anyway to get the proper sort order. If the results are paged, this is even more troublesome to do.

3. I could send a JSON data structure, just as in 1 - however, I could also add the fully generated html template. This would give me the power to inspect the object first before deciding how to prepend/append it to the page.

   The only real drawback here is that I would have to call into Freemarker manually in my controllers (I am using Spring 3.0.x MVC). This is typically done for me automatically. I am sure there's a way to do this, but I'd have to spend some time investigating how.

   Effectively, this gives me all the benefits of 1 and 2, but it is also the most complex solution. The data transferred is also higher than the other two solutions... but perhaps that can't be helped.

Which way is considered best? Any other approaches? The app I am building is really complex, and is going to use A LOT of ajax. The equivalent HTML-only version is just not possible. In fact, I'm not even going to build the app so that non-Javascript users can use it. Oh well. So keep that in mind when you answer ;)

Thanks

Answer 1

A reasonable approach is to have your template composed of a number of components. When the page is first rendered, the entire template is rendered, and the the html for the whole page returned. Subsequent Ajax requests to update a particular part of the page just invoke the rendering of a particular component, and the html for just this component is returned.

OUTLINE COMPONENT

 HEADER COMPONENT

 COMPONENT X

 COMPONENT Y  

 ...

 FOOTER COMPONENT

On page request, the outline component is rendered, and all it's sub-components. Then lets say the html for COMPONENT X needs to be updated: so the ajax request is something like:

GET /MyPage.componentX

which will return the html for that component.

However I definitely advise using a decent web app framework. Most are component-based, with the requisite client-side javascript baked-in.

Answer 2

I would use moustache.js for the templates parts to be filled with values gathered from JS.

Also if you dont want to use ajax on initial load, you can write the json of the initial page in json format in script tags in the initial html.

Finally if you are doing a really complex ajax application, I would recommand to use backbone.js , it's a bit hard to understand it at first but It's really powerful ! Here is a complete example with commented code.

Answer 3

1>

Look, I've seen many people and website fetching loads of contents which is eventually dumped into a div's innerHTML. I feel, it is just a waste. What I do is to make the smallest and quickest request as possible and aim to get the same for the response too. You say you are updating names after a new search query is done, I would prefer extracting the data from the response than the response being in a table or div form! Like this:-

"User1;501;BSoD|User2;507;BSoD"

So instead of fetching a table code, I'll use Javascript to render the table on the client-side. I will split the response first with "|" and then each chunk by a ";". This makes it easier and quicker to run AJAX commands.

One may also opt to store these responses based on the search results (as an example used here) to reduce traffic usage and for a better GUI.

2>

Don't use libraries but don't use script tag with content on your pages too.

Many people, use libraries which are as huge as 100 - 450 kB which just makes no sense for just and only just AJAX. It just makes your website slow and eventually the HTML page too. You must use script tags with a src attribute to add a script file from your website but be sure that the script tag starts and ends like <script src="Whatever source"></script> for better webpage performance!

3>

Verify own made headers so sent to prevent any non-AJAX requests to result in the response being shown!