Marcelo Calbucci

Startup Score:

Successes: 0.1+0.5
Failures: 1
In progress: 1

Wednesday, July 9, 2008

What's best: JSON / AJAX / AJAH / in-page?

    [Geek alert: this is for geeks only]

 

    When I started Sampa, I thought that most content would be traditional page GET/POST. But then I went back and checked a family tree that I did for my personal site in 2000 that used AJAX. It made sense to use that technology on Sampa and I went overboard. I created my own AJAX framework (in 2005 there wasn't anything solid that I could use) and used AJAX everywhere on the system.

 

    Later AJAX started to become a pain, because a page after being loaded required 3 or 4 AJAX calls to get the additional content. Bad design for the user. The good part is that Sampa used a combination of Frames that allowed us to cache content on the browser, so the AJAX calls to the server were minimized.

 

    From a development standpoint, AJAX is a pain because it requires you to parse the returning XML and do something with it, usually generate some HTML or data structure. This is where AJAH and JSON come in hand.

 

    If you need a piece of HTML to sitck on the middle of the page, you can generate that HTML on the server and send it on an AJAH call. Once you get that is just a matter of setting the innerHTML on an element.

 

    JSON does the same thing, but for data structures and its data in Javascript. Get a JSON response, eval-it, and you have data and 'classes' ready for use, instead of parsing the XML and putting into a data structure.

 

    So, of the 4 technologies above (in-page, AJAX, AJAH, JSON) which one should you be using on your web-based service? All of them! Each one solves a different problem and they need to be used in combination.

 

    This is my non-comprehensive list of tips on those technologies:

 

  • in-page: Use that to minimize server calls when the page is first loaded. The same way you should have few CSS, JS and Images file on a page, you should try not to make any JSON, AJAX or AJAH call once the page is loaded at the first time. Everything should be embedded on the HTML you send to the user.
  • AJAX: Great to take action on the server ("delete this record") without needing to refresh the page, or when you need pagination ("contacts 1-50 of 1750").
  • AJAH: When the HTML generated is smaller (or faster) than sending an AJAX response and creating the HTML in Javascript. It's also good because you can keep all the HTML generation routines on the server. Like AJAX, you should only use it when you can't have the content embeded on the page directly on the first page request to the server.
  • JSON: When the results of an AJAX call will be parsed into a data structure, you probably should consider JSON. Size of the response and parsing time are important considerations. Remember "eval" can be very very very very (add 17 more 'very') expensive at runtime. You don't want your user's browser freezing every time it clicks on something.
  • I'm a big advocate of using 1 or 2 letters field names. Instead of "Username" just use "n", and that goes both to JSON and AJAX. Put the comment on the code to what it means, but save a lot on response size.

 

 

 

 

 

   

blog comments powered by Disqus