Basics of javascript Templating

Being the 100th post, i felt i should share some of my most useful learning here. And i could not think of anything better than javascript Templating. There are quite a handful of such templating tools available online(JsRender, Underscore.js, Moustache.js…). Feel free to run a jsPerf on the tool you wish to use and then go ahead. This post will focus on giving you a grip on the concept of templating in javascript, by correlating it to a day to day example you see around you.

A little bit of Background:

The concept of templating is pretty simple once you understand what it is. Let me take you through a simple example here, so that you could correlate this concept to some live example and remember this forever.

Observe the Facebook “People You May Know” (PYMK) section below:

 

 

 

 

 

 

 

 

 

 

 

 

Its pretty much straight forward, with a header and some contents. Normally we feel that its a direct 6 div-based HTML section (1 div for header and 5 for the friends list). Lets deep dive into this a little bit.

When we look deeper, we could see two major sections here. One is the header and then there a friends list section which is replicated as is 5 times, but with different contents.

Consider the section breaking visually below:

 

 

 

 

 

 

 

 

 

 

 

 

Header is simple and nothing much special about it. You could even achieve it using a simple HTML code. But our focus here is the “Repeating Template Section“. This section repeats by itself 5 times here, populating 5 different contents. This is infact the place where we could see the power of templating coming into play.

But before that lets dig a bit more deeper into the repeating Template section:

 

 

 

 

 

How Templating Works:

Now lets see how these templating engines available online works. For simplicity, I am considering JsRender here.

Firstly, its nothing but a plugin – jsrender.min.js (just like your jQuery.min.js), you can download from Github.

Secondly, it basically need 2 inputs(for just the basic functionality):

1. Is the Template section – An HTML section on the page with just the basic skeletal structure, as shown below

Inside these sections we normally keep something called placeholders, for ex.

A sample template could be like this:

<script id=”tmpl_pymk” type=”text/x-jsrender”>

<div id=’hdrpymk’>

People You May Know

<a href=”{{>SeeAllLink}}“>See All</a>

</div>

<div id=’rptpymk’>

<img src=’{{>ProfilePic}}‘ />

…

</div>

</script>

The templating engine just replaces these placeholders (SeeAllLink, ProfilePic) with the data picked up from the input JSON

2. The Input JSON

Note: In the above JSON, I have shown only 3 entries; which would imply the final rendered HTML would generate 3 repeater section with the data you provided in the “Contents” array inside the input JSON (see above screenshot).

Thirdly, using the render() method, it merges the input JSON into the template and constructs the final HTML, which you can render it on your page.

var finalHTML = $(“#tmpl_pymk”).render(jsondata);

As simple as that!!

A schematic diagram of how this works is shown below:

HEADER: This could be just the heading with a link to “See All”

SECTION DATA: JsRender repeats this section 5 times displaying different data, picking them up from the input JSON. I shall get into the technical aspects in a later post.

But for now, I hope you got a background on how templating works in javascript and you could visualize the power of this concept in our day to day life.

This is just a drop from the ocean i wish to drive you through. But i hope the example used here helped you correlate to the concept.

Hope this post was useful!!

Feel free to post your comments & suggestions.

Note: The example used here is just a sample and need not be the way fb would have implemented it. The idea here is to correlate this topic to things that we see around us on the web in a better way.