Loading HTML straight from ajax reqest, or clone templates and insert data with javascript?

Question

I'm working on a forum like page, where changing between pages of a thread pulls in html from an ajax request and inserts it into the div container.

My question, is would it be faster to just get the basic data through json retrieval, and then do something like cloning a message template and inserting the needed data into that template?

Answer 1

Faster in regards to less information being transmitted between client and server, almost definitely. The development time is another story.

Answer 2

You're faced with two possible overheads as I see it:

1. Plain HTML across an Ajax request will take longer than the raw data, but there's no processing once it reaches the client.
2. Raw data won't take as long as plain HTML but will take a bit of processing on the client to insert it into an HTML template. This really depends on how you do it though.

I'd go with option #2 - any opportunity to decrease the amount of data sent to the client should be taken. Just my opinion...

Answer 3

Normally I send just JSON data from the backend, which I then insert into the HTML page however I like.

IMHO this decouples a bit the backend from the frontend and makes the server side API more reusable/universal.

I place predefined html parts in the website, these are then filled with the JSON data. I recently built an app where you can browse through images. Always 10 images at a time. The html looked like this:

<table>
 <tr>
  <td id="img_0"></td>
  <td id="img_1"></td>
  <td id="img_2"></td>
  ....
  <td id="img_9"></td>
 </tr>
</table>

The JSON was something like that (rough example):

{images:
 [
  {imgTag: "<img src='foo.jpg' />"},
  {imgTag: "<img src='foo.jpg' />"},
 ]
}

And in the Javascript I did:

for(var i = 0; i < 10; i++) {
 var currentImage = response.images[i];
 if(currentImage) document.getElementById('img_' + i).innerHTML = currentImage.imgTag;
 else document.getElementById('img_' + i).innerHTML = '';
}

This was doable because the amount of data (in this case images) was known: always 10, at most. The grid was predefined and could be filled with the JSON data.

Of couse this is very fast because JSON responses are most of the time very small (in my case < 2 kb). And inserting data with innerHTML in already existing elements is reasonably fast as far as I know.

---

Getting already complete HTML back from an AJAX request to the server is an option for me when the HTML is rather complex and I cannot predefine parts of HTML in the website which then get populated with JSON data.

For example when I have a blog post and all comments to that blog post are loaded via AJAX (== stupid example), then I would build the HTML on the server side. Because the number of comments can be anything from 0 to N.

Of couse you could load the comments from the backend like so:

{comments:
 [
  {text: "some text"},
 ]
}

And then insert it in the html page by creating dom nodes:

for(var i = 0; i < response.comments.length; i++) {
 var currentComment = response.comments[i];

 var commentDiv = document.createElement('div');
 commentDiv.className = "comment"
 commentDiv.innerHTML = currentComment.text;

 document.getElementById('commentContainer').appendChild(commentDiv);
}

But this normally is not an option for me: constructing complex HTML using document.createElement('div') is in my opinion very annoying.

There exist Javascript template engines which might make it easier but I never used one.

In this example case constructing the complete, probably complex HTML on the server side seems much better to me.

With GZIP you can reduce the amount of data sent over the wire and with a clever caching strategy one can keep down the server load.

---

In your case the second approach (getting generated HTML from the server) might seem like the better approach. But it is hard to tell without more complete information.

This are no definite laws so your milage will vary. Just my experiences so far while working at AJAX web apps.