Dual-Side Templating - Ajax Patterns

Dual-Side Templating

From Ajax Patterns

Stub Pattern.

Contents

Problem

How can you allow for dynamic, Ajax-style, rendering in the browser, but at the same time output it from the server upon initial page load?

Forces

  • Due to graceful degradation and performance optimisation, it's good to output significant content from the server.
  • Due to performance and usability, it's good to modify content dynamically, without requiring a page refresh.
  • The content is often the same, whether it's output from the server or from some Javascript. For example, a collection of data items - we want to add and delete directly in the browser, but we also want to output the initial content from the server.

Solution

Arrange for both the server and the browser to render according to the same template. The server renders the template on initial page load and also passes the raw template to the browser (using techniques described in Browser-Side Templating). When responding to particular events (e.g. see Live Form, Microlink), the browser opens up new content and renders it using the template that was passed in.

Decisions

What template format to use?

  • A standard server-side template format and write a custom Javascript parser.
  • A standard browser-side template format and write a custom server-side parser.
  • A hybrid format that, in simple form, degrades to work on both sides. (e.g. [http://ajax-pages.sourceforge.net/doc/5_min_tutorial.html AjaxPages looks sufficiently like JSP or RHTML for simple cases).
  • A custom format.