Welcome to WebmasterWorld Guest from 3.80.6.254

Forum Moderators: open

Message Too Old, No Replies

Ajax and client side template engines

How do you manage the presentation logic in a RIA?

     
11:12 pm on Jul 25, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts: 228
votes: 0


We are currently working on a web application that will pretty much all be Ajax based, with very few page refresh. We're having an hard time finding the correct way to manage the presentation logic of this system.

Let say we need to make an ajax call to update a div and fill it with some new data. Where do we find/create the HTML to put in the div and how do we put it in?

Different solutions:

-------------
1) The server sends the complete HTML to put in the div as the response of the ajax call
-------------
This solution is the easiest since the server can manage the presentation logic like it wants, it can use a template engine (like Smarty in PHP), it can store its templates in a dedicated folder... Everything can be clean.

// pseudo code


var data = ajaxcall(parameters);
var mydiv = document.getElementById("mydivId");
mydiv.innerHTML = data.htmlResult;

But, the problem is that sometimes the resulting HTML is just too big, it takes too much bandwidth, too much time to transfert.

For instance, if we have to fill the div with X number of <input /> tags, if X == 100 it's crazy to ask the server to return some HTML containing 100 <input />.. Instead, the server would only return the variable X ("100" in our example) and *javascript* will generate the HTML to put in the div.

-------------
2) Javascript generates the HTML, using the DOM, from the data received from the server.
-------------
Javascript would loop through all the data returned by the server (probably json encoded) and would create all needed nodes, using createNode(), createElement('input'), appendChild(), etc. It would finally appening the created structure to the div, using the DOM's methods, again.

I think this solution is better than the first but it seems to me that it mixes business logic with presentation logic. Or, should I say, it mixes *client side business logic* and presentation logic.

Using this method, if we want to change something in the generated HTML, something that can't be easily change using CSS, we have to change a lot of javascript code! This is where the separation between the code and the interface is not well done.

// pseudo code


var data = ajaxcall(parameters);
var mydiv = document.getElementById("mydivId");

mydiv.removeAllChild();

for(var i = 0 ; i < data.X; i++)
{
var oneInput = document.createElement("input");

// set some attributes, etc.

mydiv.appendChild(oneInput);
}

-------------
3) Using a client side template engine. Like JST (trimpath), SWATO, sxoop, etc.
-------------
Using this solution you have a HTML template that will be populated *on the client side*. Javascript will take the template, will insert data received from the server in it and, using innerHTML(), will append it in the target div.

I've heard this last solution may cause some problems because the resulting HTML will contain empty text nodes, between the "real" nodes, caused by line breaks, whitespaces and such. This may be a problem when later playing with the DOM, I think.

But if you need to change the HTML, it's pretty easy because the HTML template is human readable, it's not "javascript only".

// pseudo code

// template in an hidden textarea:
<textarea id="mytemplate" style="display:none;">
{for i = 0 ; i < ${data.X}; i++}
<input class="123" value="" />
{/for}
</textarea>

// javascript
var data = ajaxcall(parameters);
var mydiv = document.getElementById("mydivId");

var result = processTemplate("mytemplate", data);
mydiv.innerHTML = result;

---

I'm surprised that there are not more information about this topic on the Internet! Ajax is widely used by a lot of web apps now. How do they manage that presention logic? What are the pros and cons of the different methods? How do you do it?

8:12 am on July 27, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


it's crazy to ask the server to return some HTML containing 100 <input />

Perhaps not that crazy, if the html is compressed repeating code compresses well.

All of your solutions have a place, also consider returning data as xml. Consider if the page data can be usefull manipulated on the client side, sorted, filtered etc, saving server delays.

11:26 am on July 27, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts:228
votes: 0


Perhaps not that crazy, if the html is compressed repeating code compresses well.

How would you compress/decompress code?

Also, this makes me think of a 4th solution:

------------------------
4) The template is not stored client side but is returned from the server, along with the data. The client is on charge of populating the template.
------------------------

// pseudo code


// javascript
var result = ajaxcall(parameters);
var mydiv = document.getElementById("mydivId");

var generatedHTML = processTemplate(result.template, result.data);
mydiv.innerHTML = generatedHTML;

More opinions please!

12:55 pm on July 27, 2007 (gmt 0)

New User

10+ Year Member

joined:Apr 16, 2006
posts:15
votes: 0


You might like to look at the approach used by JQuery's Taconite plugin.

The server returns a series of commands (as XML) & the plugin uses them to update the appropriate DOM elements.

For example:-


<taconite>
<replace select="#promotion">
<div>Thank you for your order!</div>
</replace>

<remove select="#emptyMsg, .preOrder" />

<append select="#cartTable tbody">
<tr><td>1</td><td>Dozen Red Roses</td><td>$18.99</td></tr>
</append>

<replaceContent select="#cartTotal">
$18.99
</replaceContent>
</taconite>
1:21 pm on July 27, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts:228
votes: 0


You might like to look at the approach used by JQuery's Taconite plugin.

Thanks, that's exactly the kind of method/example I'm looking for. I want to know how other people manage their client side presentation logic when using ajax!

I can't say I find the Taconite method very intuitive though. I think I prefere the approch where javascript is responsible to determine what is to be updated on the page.

12:28 am on July 28, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


How would you compress/decompress code?

Most browsers support gzip and deflate [serverwatch.com...]

The template is not stored client side but is returned from the server, along with the data

This sound like XSLT, see xml development forum.

What do you see as the advantage/need for using AJAX in your application?, tailor your solution to that.

[edited by: daveVk at 12:31 am (utc) on July 28, 2007]

12:48 am on July 28, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts:228
votes: 0


True, XSLT is another method! But would it be possible to apply a XSLT only to a small section of a page (the div I want to update) using javascript? I've never seen someting like that.


What do you see as the advantage/need for using AJAX in your application?, tailor your solution to that.

I'm not a big fan of those "ajax-only" apps but that's what the compagny I work for wants. It wants the app to be like a desktop application as much as possible. :-/

I think I may even suggest Flex as a solution.

5:20 am on July 28, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


But would it be possible to apply a XSLT only to a small section of a page (the div I want to update) using javascript?
see this example [w3schools.com...] output could be to a div.

I would not assume "Desktop like" implies "Ajax-only", in my experience, management want everything, and have no idea of tradeoffs, for example all pages are naturally bookmarkable and can be index by google.

Consider using javascript/Ajax more for the "Desktop like" controls particularly data entry and selection.