Jun 12, 2012

Server side versus client side templating

The modern Rich Internet Applications (RIA) use the design concept of "single page web design", where a single rich page makes ajax based service calls to render different sections of a page instead of the traditional approach of loading a new page of each user action.

The "single page web design" can make use of client side and server side technologies as discussed below. Each approach has its use. It also shows the power of JavaScript.

Q. What do you understand by client side and server side templating?A. The modern rich single page web applications built today harness the power of dynamically typed and interpreted languages like JavaScript for faster prototyping and increased developer productivity and statically typed Java based frameworks for maintainability, robustness, easier refactoring, and scalability. The modern browsers using faster JavaScript engines and efficient minification of JavaScript files have made client side templating a reality.

The server side templates are such as JSPs, Facelets for JSF, Apache Velocity, tiles, Sitemesh, etc.

The client side templating libraries based on JavaScript include dust.js, underscore.js, mustache.js, etc

The client side and server side templates like Google closure.

Server side templating and data composition

Generates the markup on the server. For example, returns generated HTML code.

Client side templating and data composition

Generates the markup on the client. More suited for applications that load more data from different back end service providers via ajax. The services could return data in JSON or XML format and then add the HTML snippets for the new data via the client side templates.

Javascript templating is a technique to render templates on client-side (i.e. within the browser) with Javascript using a JSON data retrieved via RESTful web service calls. The template is basically HTML markup, sprayed with tags and variables that will insert values from the JSON data or execute a programming logic. For example,