Do JSON templates help in loading content via AJAX and better performance?

Question

We are working on a dynamic dashboard which is very similar to twitter's settings panel under our twitter account.As the dashboard has many controls,there is lot of content populated dynamically.So currently this is how we do it.

This is one the menu in my left panel:

<a href="javascript:void(0);" onclick="fnGetFiles();">Files</a>     

This is the function called which gets the HTML:

function fnGetFiles(){
  $('#mainDashboard').html('<div class="rightContainer"><div class="tabLoader"></div></div><div class="clear"></div>');
  $.get(USER_DASHBOARD+'file_share/files.php',function(data){
  $('#mainDashboard').html(data);
});

So we basically attach(append) directly the HTML.But I just went through the twitter dashboard
First is the URL handling they do for navigating between the different menus on left(Added image for reference).It just changes on the fly and content is loaded.On inspecting the code I noticed they send html as JSON strings.
I am not exactly sure but does this enhance the performance in any way?Mine is a bit poor on the production and would like to know exactly what frameworks I can utilize to achieve something similar to this(Also,I face AJAX conflicting issues between scripts).I am using PHP,jquery for my application.
I tried to get info from dev.twitter.com,and blog but couldn't find any specific info on this.
Please if possible try to guide me and throw some light on it.
Thank you for your time.

Answer 1

Your HTML, JavaScript, images and other client-side elements are all static. They should stay that way. You don't need to be creating any elements dynamically within JavaScript.

Your AJAX calls merely need to go off, get the data required to populate your HTML, and add this data to the DOM. JSON / XML is just like a protocol:

Communications protocols have to be agreed upon by the parties involved.

For your JS > PHP > JS, JSON is a great 'protocol' (agreed communication method) to choose because it sets a standard, and you merely use json_encode() / json_decode() in your PHP, and $.parseJSON() if you're using jQuery. Using JSON is just an agreed messaging format that, really as a developer, you should commit to using because it's a 'standard'.

You don't want to be sending any extra data over the wire that you don't need to. Don't send HTML unless you need to. Request and Respond with only the data that you need.

Without going into too much of a rant here, there are many awesome tools out there to help you do things like this. AngularJS, for example, allows you to update the DOM automatically with JSON returned from the server, through the use of statements like ng-repeat. It basically means you don't have to write any custom JavaScript to populate DOM elements with data retrieved from the server (which both your dashboard and my dashboard are currently doing).

As well as this, I'm using websockets, because firing off a load of AJAX requests for real-time data isn't what those AJAX requests are made for. If you only need data every 5 - 10 seconds, fine, but any more often than that and you want some bi-directional technology like websockets, which will require you to learn React PHP and something like Ratchet to implement (when you get it working, however, it's awesome).

First, agree on a 'protocol' that both your client-side and server-side are going to use. Then, only send and receive data that you need, and that which changes. Anything else is static and would only waste bandwidth. Don't pass HTML around. Finally, speed-wise, sending JSON vs. sending plain text - it depends on literally the length of characters you're sending. That's it. Regardless, these gains either way are so insignificant that you don't need to worry about them, unless you're sending HTML, which you aren't. Are you.