Good DRY approach to rendering and AJAX updating of page

Question

Imagine a review site where users enter ratings and optionally short comments.

On each review page you've got many comments - these are displayed in a table at the end of the page (btw - not looking for datagrid type controls, far too simple for that)

I want to let users enter new reviews and update the page without a page refresh.(all simple stuff so far, this is not the question)

What is a good approach to generating for the page. Some thoughts :-

1. Generate the reviews HTML server side, append new reviews using javascript client side. Downside is that you've got table HTML generation code in two places. Upside - more content on page as far as search engines concerned.

2. Server side only output reviews as json/xml/whatever and render HTML dynamically on page load using javasript.

   Downside - 'template' in javascript, hard for designers to customize + lack of 'content' on page.

3. Is there an approach that combines the two methods - i.e. a templating framework that will render existing data server side but also sends the template fragment client side so it can be reused there for additions/edits.

4. With (2) to get the data on initial page load would you

   • a) include json/xml on initial page and run client side render on page load

   • b) get it via a separate AJAX call on page load (+ simpler, - extra request and delay)

I am focused on jQuery/Django but this question applies to other frameworks and AJAX libraries.

This is a bit of a subjective quesiton, hope it doesn't step over the line! Thoughts?

Answer 1

You wouldn't necessarily have to know the template ahead of time, you'd just have to set hooks in the code for what data you want to fill in with JSON when you render your template.

The scenario would work like this:

1. Server side generates the page on initial load
2. AJAX call finds new page data and wants to render it
3. jQuery clones comment item from the page and re-populates the data with JSON

I personally like keeping initial page load on the server-side for making it easier to cache pages and then only use AJAX for when you need to update the page or switch to a related page without the website having to reload.

An example for you:

<ul class="commentsArea">
    <li class="comment" data-commenter-id="user1234">
        <a href="#" class="userName">Rob</a>
        <p class="userCommentContent">Some comment content would go here.</p>
    </li>
</ul>

Then you'd have a templating function:

function template(comment, newCommentMetaData) {
    // comment is a cloned comment object
    // newCommentMetaData is the AJAX data
    comment.attr('data-commenter-id', newCommentMetaData.userid);
    comment.find('.userName').text(newCommentMetaData.name); 
    comment.find('.userCommentContent').text(newCommentMetaData.content); 
    return comment; 
}

Then finally you'd have to clone the comment to add new ones:

var newComment = $('li.comment:first').clone();
// fill in your AJAX data here
var newCommentMetaData = {
    userid: 'user2345',
    name: 'Pete',
    content: 'The new comment content goes here'
};
/* you would have to put an each() function here to iterate through all new comments
   and template them up, but hopefully you get the idea */

template(newComment, newCommentMetaData).appendTo('.commentsArea').fadeIn();

Answer 2

With a framework, an approach to your scenario (3) -- combining both methods -- is to use a view "partial". A partial is a fragment of a view that can be rendered on its own; a single view could be made up of several partials.

In your case, you'd define a partial to render a review. When showing the page from scratch, the server-side code loops through existing reviews and calls the partial to render them one after the other. When a new review is added to the existing page, the javascript asks the server to render just the partial for that new review and return it as an Ajax response, and then appends it to the existing reviews on the page.

Answer 3

I've had a similar problem when trying to build an online-editable database to keep state of companies that needed to be contacted by a fund-raising team.

Ultimately I chose 2-json with 4-b, for the sake of less data transferred, but didn't bother making it work without javascript because of the DRY+lack of time. No content for SE to index but didn't care as it was private anyway.

However, if transferring entire table once per update is not a problem, I'd choose 1. About that btw, I don't understand why you said HTML generation code would be in two places.

Assuming you have a page_content view that only generates the table, you could 1) include it as a "component" (as it resembles the component idea in Nagare Framework where a page is a tree of nested components) when rendering the view of the initial page (all server-side) and then 2) request it using ajax and replace the innerHTML of the old table's parent, which means that the HTML table generation code is only found in page_content, and the search engines are happy.

Also a good optimisation to 1 would be to poll server from time to time for updates, but provide timestamp of last update so that server may send an empty response if you already have the newest content. (well, provided you don't use WebSockets in HTML5, which eliminates the need for polling by using push notifications).

2 on its own is ugly for general use, three sounds really good but I don't know of any templating framework that handles that data automatically on both server-side and client-side.

For edits and especially additions, you're right, you'd have to have the template on the client side to make if you really want to send as little data as possible (that's what I did with the edits on my page), but you could more easily stick with 1 by sending the edit/new item to the server and then requesting the updated page with ajax.