Google

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,

1. 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>

2. 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" }
];

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>

4. 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.


Q. What are the pros and cons of server side versus client side templating?
A. 

 Server Side Templating

Pros:

  • More search engine friendly.
  • Entire response message can be cached.
  • Can work without JavaScript

Cons:

  • Harder to mix and match different server side technologies. For example, retrieve data from both Java and Ruby based services
  • Harder to send content for multiple devices. E.g. browser, mobile devices, etc.


Client Side Templating


Pros:

  •  Faster development and prototyping
  •  Serves JSON data to multiple devices.
  •  The responses are smaller as JSON data is less verbose.
  •  Templates and JSON data can be cached.
  •  Can work with multiple server side technologies like .Net, JEE, Ruby, etc


Cons:

  •  Less search engine friendly
  •  Older browsers may not work properly
  •  Cross browser compatbility testing is required




Labels:

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home