What do you Understand by Client Side and Server Side Templating

by

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 show

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,

  • Import jQuery template library

<script src=”http://code.jquery.com/jquery.min.js” type=”text/javascript”></script>

<script src=”jquery.tmpl.js” type=”text/javascript”></script>

  • Define JSON data to be used to fill the template values. This can be returned from the server via a RESTFul service call.

var carsData = [

{ make: “Toyota”, model: “Camry” },

{ make: “BMW”, model: “3 Series” },

{ make: “Mazda”, model: “3” }

];

  • Define your client side template like

<script id=”carsTemplate” type=”text/html”>

<li><a href=”cars/${make}”>${model}</a></li>

</script>

or the complete HTML code may look like:

<html lang=”en”><head>

<script src=”http://code.jquery.com/jquery.min.js” type=”text/javascript”></script>

<script src=”jquery.tmpl.js” type=”text/javascript”></script>

<script id=”clientTemplate” type=”text/html”>

<li>make: ${make}, model: ${model}</li>

</script></head><body><ul></ul></body></html>

  • Invoking the template enginge (e.g jQuery) plugin to render the template with data

$(“#carsTemplate”).tmpl(carsData).appendTo( “ul” );

The  <li> tags will be appended to the <ul> tag with the retrieved JSON data values.

s the power of JavaScript.