Tech blog to share information.

May 10, 2018

Introduction - Client-side Template

May 10, 2018 Posted by tjcool , , , , No comments

In the world, where we have so many front-end frameworks around us, for some people this post is bit outdated. But, I thought sharing information is always helpful. 


We all know, when a web page is loaded, the browser creates a Document Object Model of the page. 
The HTML DOM model is constructed as a tree of Objects. With the object model, JavaScript gets all the power it needs to create dynamic HTML. And we all have created dynamic elements using javascript (at least I have done it :) )

Dynamic Element Creation - The approach we follow usually.

When developing modern HTML applications, we often write a lot of HTML fragments programmatically. We concatenate HTML tags and dynamic data and insert the resulting UI markup into the DOM.

Below are the random code example of this approach

Code to Create or Add dynamic Content on the page : 

Javascript : 

Jquery - Code to add user messages in the container. 

And the problem starts…

For simple Dom manipulation, we write similar snippets shown in above previous examples.

Day by day as requirement gets complicated we start facing issues, issues like managing code, scripting performance issues, user experience, cross-browser compatibility. We end up writing code of thousand lines with a lot of dom manipulation.
It makes your application very tightly coupled and harder to maintain.
So, when we should avoid client-side Dom manipulation. So, based on my previous experiences and references from forums following are some of the use cases.
  • Complex projects which involve large amounts of client-side HTML manipulation with JavaScript.
  • When client expects good UX.
  • When you need to support mobile device as well.

Note: Use of jQuery clone, append method heavily as a clone and append methods degrade application performance if involved in large DOM manipulation. 

What is Template - First Impression.

“A document that contains parameters, identified by some special syntax, that are replaced by actual arguments by the template processing system.”

Quick Example -

When & Why would you use It 

In today’s world of dynamic applications, the client frequently wants moreover like plug and play user interface (UI) or can say dynamic UI and of course styling. This can be done by fetching an HTML fragment from the server that can be readily inserted into the document. Also, as a  developer, you want to have full control over your UI as well.

So let’s take a look at templating(client-side templating)

There are a number of HTML template solutions out there: 
  • Mustache.js
  • Handlebar.js 
  • Underscore.js 
Mustache.js is a popular choice because of its powerful syntax and fast rendering. In fact, Handlebar is a more advanced version of Mustache. There are also other front-end frameworks which use Mustache for UI rendering.

Please do comment, like and Subscribe