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
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: Java EE
posted by Unknown at
6/12/2012 04:01:00 PM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home