HTML reuse between server and client parties

Question

I am developing a website. On the server side, I use python (and Genshi) to manipulate / generate HTML. But I find that I am manipulating the same kind of client-side HTML snippets using Javascript.

Let me show you an example. Suppose I have an editable list of elements:

<form .... > <ul> <li id="i1">Name: <input type="text" name="i1" value="Item 1" /> <a href="#">[del]</a></li> <li id="i2">Name: <input type="text" name="i2" value="Item 2" /> <a href="#">[del]</a></li> </ul> <a id="addnew" href="#">[new]</a> </form> 

Note. The label dynamically adds new elements to the form. It should not (should) make any requests to the server.

Both the server and the client must know this "template" (pseudocode):

 <li id="${id}">Name: <input type="text" name="${name}" value="${val} " /> <a href="#">[del]</a></li> 

The server must know this in order to create the original HTML list, and the client must know it in order to allow users to add and remove elements using anchors.

What can you say about best practices for improving reuse in a scenario like this?

---

Some approaches that I already know I would like to avoid:

• Creating a source list using javascript. I am trying to use javascript to improve some parts of user interaction.
• Using a template language that I can somehow reuse between the client and the server is not an option, because I'm stuck with Genshi now
• Creating server side Javascript. Tried this before, and this is a pain for debugging, due to the extra level of indirection

Answer 1

How about storing HTML in a hidden div with some source placeholders, use JavaScript to copy it into the visible fragment of the user interface and replace the place owner with an AJAX response. The answer may be JSON (a list of Key / Value pairs).

Answer 2

Presumably when you add a new item, you make an Ajax call to send data to the server? One approach is to return an HTML snippet as an answer to this call. This is a bit of a hack, but less than generating JavaScript.

A more RESTful way to do this is to return a 201 Created response with a canonical Location header for the created item. Your JavaScript will then request a resource with an Accept header that defines the custom media type that represents the HTML fragment. This separates the presentation from the business logic, therefore, for example, you can add elements from more than one page that require different types of HTML fragments.

Answer 3

This is a bit long shot, but you can explore genshi2js . It claims to compile a subset of genshi templates into javascript functions (similar to Google soy templates). Unfortunately, this is an abandoned project. The main link for it is 404, but I was able to find the mercury repository from the link above, and the last work was in 2008.

The best solution to this problem as a whole is to use the same template system and implement both JS and server-side. (This is also the idea of ​​Google's cellular templates - an implementation of java and js.)