Dissection of Technologies in JavaScript RIA

In the last entry, I have summarized choices we have while writing a JavaScript RIA (or AJAX application). They are under these seven categories:

1. Communication Model
2. Communication Style
3. Push Communication Style
4. Transportation Protocols
5. Data Format
6. UI Rendering
7. UI Update Style

These categories are actually order in a particular user request:

1. Is it an asychronous or a synchronous?
2. Use iFrame or XHR?
3. Use iFrame or HTTP 1.1 chunked for push data?
4. Data is transmitted with HTTP, XML-RPC, or SOAP?
5. Data is returned in what format (plain text, HTML, JSON, Base64, XML)?
6. The data is the rendered UI or the data values for the client to render the UI?
   
7. Use innerHTML or use DOM to maniuplate the UI?

The combination of the technologies can be summarized in the following graph:

To make any design decision, we may highlight the nodes and paths in the graph in top-down manner. For example, in the case of original AJAX defintion, we may hightlight Asychronous, XHR, HTTP/REST, XML, and Client Side Rendering:

The UI update style is undetermined up to this moment. We can make a complete decision before sending the design to programmers. Designers and programmers may have different preference of AJAX approach. With this simple graph, designers can communicate and synchronize with programmers more effectively. The architect can also use the graph to generate the implementation blueprints for programmers to follow so that more maintainable code can be expected.

The way to JavaScript RIA is paved with good technologies

As we are working with the Shanghai team, we found that they have different concepts about JavaScript RIA (also known as AJAX). Hong Kong team tends to have a better structure and more graceful way to partition the layers. On the other hand, Shanghai team tends to have less structure but faster development speed.

This leads to the classical design question about the tradeoff between development time and maintenance time.

For this reason, I listed out all possible combinations of different technologies and styles so that we can make the design decision from the beginning of the design stage in the future. The explanations will be added soon. To summarized, they are:

1. Communication Model
• Synchronous
• Asynchronous (AJAX)
2. Communication Style
• iFrame
• XMLHTTPRequest (XHR)
3. Push Communication Style
• iFrame
• HTTP 1.1 chunked
4. Transportation Protocols
• HTTP / REST
• XML-RPC
• SOAP
5. Data Format
• Plain Text
• HTML
• XML
• JSON
• Base64
6. UI Rendering
• Server Side Rendering
• Client Side Rendering
7. UI Update Style
• innerHTML Substitution
• DOM Manipulation