Where to generate the HTML? A Test.

I was in a conversation during a developers event yesterday, and the other guy said something that surprised me. Sometimes, he said, he generates HTML on the server side, sends it to the client via AJAX (or XMLHttpRequest, or XHR, or however you refer to it), and has the JavaScript put that in in a fairly cooked way.

This contrasts with how I work. I generate initial pages on the server-side, sure, but if I'm going to change or add HTML after load, I'm going to either use jQuery or Mustache to transform the data to HTML, rather than pull large, formatted HTML.

The conversation was not very productive, because it felt like he became very defensive, but I had no intention of attacking his favored methodology, but rather understanding it.

So, this morning, I wrote a test where I created a large array of arrays and passed it to web pages either as JSON or as HTML, using Perl's Template Toolkit to create the HTML on the server side and Mustache.js on the client side. Code follows:



The result?

On the left is the JSON > Mustache route. On the right is the Template Toolkit version. The numbers are slightly different, but in terms of how it felt as a user, they had similar delays from clicking "Click Me". I'm sure the big issue for the browser is rendering a 30,000-cell table, not downloading it from the API or generating it from a template.

(The code is not someplace I'm happy linking to right now, so I might move and re-test it and post the link.)

It strikes me that this is very much a matter of optimizing for the developer, not for the platform. I'm not wrong in wanting to do it with Mustache (although I understand Handlebar.js would allow a loop within the loop, like Template does, which would work better for me), and the other guy is not wrong for letting PHP generate it for him.

Yes, I'm avoiding language wars and saying he's not wrong for using PHP.

But, this is one test. Does anyone have data to the contrary?