Over the last couple years, Ajax technologies have been the hottest topic. The primary gains we hear about Ajax are from its asynchronous communication. What we don't often hear about is the pain incurred in building a savvy UI around this communication mechanism.
There are essentially two out-of-the-box techniques for building UI programmatically in the browser. The first is to render the XHTML as one normally would on the server, push it down to the client and instantiate via the innerHTML property on the container DOM element. The second is to build the elements "by-hand" using the client DOM (Document Object Model) much as you would in a server-side control without a design surface. Neither of these options is ideal, and so a third option is proposed.
This is the "right way" to do it. It's standards-based, its fast, and we have complete control of the structure, so merging is possible. Unfortunately, it is a complete pain in the... Each element must be created, stored in a variable, each attribute must be set individually, and then it must be appended to its container element. Repeat for every element. While it is easy, it is tedious and quickly degrades to cut-n-paste errors because let's face it no one is typing this for every element. The repetition of all those DOM calls can add up quickly. The scripts can be quite bulky. And if the common methods and objects are stored in shorter temporary vars, the script can be difficult to read. Finally DOM calls can't be serialized and stored into script.
Building upon this idea of compact structured data, here is a third representation of UI elments called "JsonML" (JSON Markup Language). The idea being that the UI is rendered into JsonML, sent across the wire and then a generic client script can deterministically build DOM elements from this structure. Look at the advantages:
As you can see we remove nearly all of the disadvantages of both approaches. With some careful designing of the syntax, the actual size of JsonML is nearly identical to the original XHTML, and in some circumstances smaller.
For a detailed explaination of the syntax and an example build script, check out: http://jsonml.org