Make Your HTML Pages Dynamic Using Handlebars Templating Engine

Templating, JavaScript, HTML

Technologies and methods for designing and developing web pages have come a long way and with a plethora of tools available at one's disposal, getting a minimal website is not a rocket science anymore. As web developers, we often face a dilemma to go for a static site using plain HTML or to go for a dynamic one with some server-side programming stack. Both of the approaches has got advantages as well as disadvantages. 

 If we go for a static one, the advantages are  

  1. Time needed for development is less.
  2. Easy to create and less expertise is needed 
  3. Site will be super fast 

 Disadvantages,  

  1. Hard to maintain 
  2. Lot of repetitive work 
  3. Hard to scale 

 And for the dynamic approach, advantages are 

  1. Easy to maintain 
  2. Repetitive work can be avoided 
  3. Scaling is easy and more features can be easily integrated 

 Disadvantages 

  1. Dedicated personal  is needed 
  2. Cost factor increases 

We can overcome some of the cons mentioned above by applying JavaScript Templating. JavaScript Templates helps to segregate HTML code and content which it is rendering in the browser. This separation of concerns helps to build a codebase which is easy to maintain in the future, modifications can be easily done with minimal disruption to the existing codebase. 

Some of the most popular JavaScript templating engines are Mustache, Underscore, EJS, and Handlebars and in this post, I am going in detail to show how we can make of Handlebars to generate HTML content from the template. 

Let's see how we can apply templating to the following HTML Snippet. It basically shows a list of four speakers and you can easily see that there are a lot of repetitive code in there. If are you to make a single modification say change the style for FB icon, you need to do that in four places. So let's see how we can apply templating to this snippet to make our life easier. 

<!-- Start Speakers Content --> 
<div class="mu-speakers-content"> 
  <div class="mu-speakers-slider"> 
    <!-- Start single speaker --> 
    <div class="mu-single-speakers"> 
      <img src="assets/images/speakers/speaker1.jpg" alt="speaker img"> 
      <div class="mu-single-speakers-info"> 
        <h3>Speaker 1
        </h3> 
        <p>Title 1
        </p> 
        <ul class="mu-single-speakers-social"> 
          <li>
            <a href="#">
              <i class="fa fa-facebook">
              </i>
            </a>
          </li> 
          <li>
            <a href="#">
              <i class="fa fa-twitter">
              </i>
            </a>
          </li> 
          <li>
            <a href="#">
              <i class="fa fa-linkedin">
              </i>
            </a>
          </li> 
        </ul> 
      </div> 
    </div> 
    <!-- End single speaker --> 
    <!-- Start single speaker --> 
    <div class="mu-single-speakers"> 
      <img src="assets/images/speakers/speaker2.jpg" alt="speaker img"> 
      <div class="mu-single-speakers-info"> 
        <h3>Speaker 2
        </h3> 
        <p>Title 2
        </p> 
        <ul class="mu-single-speakers-social"> 
          <li>
            <a href="#">
              <i class="fa fa-facebook">
              </i>
            </a>
          </li> 
          <li>
            <a href="#">
              <i class="fa fa-twitter">
              </i>
            </a>
          </li> 
          <li>
            <a href="#">
              <i class="fa fa-linkedin">
              </i>
            </a>
          </li> 
        </ul> 
      </div> 
    </div> 
    <!-- End single speaker --> 
    <!-- Start single speaker --> 
    <div class="mu-single-speakers"> 
      <img src="assets/images/speakers/speaker3.jpg" alt="speaker img"> 
      <div class="mu-single-speakers-info"> 
        <h3>Speaker 3
        </h3> 
        <p>Title 3
        </p> 
        <ul class="mu-single-speakers-social"> 
          <li>
            <a href="#">
              <i class="fa fa-facebook">
              </i>
            </a>
          </li> 
          <li>
            <a href="#">
              <i class="fa fa-twitter">
              </i>
            </a>
          </li> 
          <li>
            <a href="#">
              <i class="fa fa-linkedin">
              </i>
            </a>
          </li> 
        </ul> 
      </div> 
    </div> 
    <!-- End single speaker --> 
    <!-- Start single speaker --> 
    <div class="mu-single-speakers"> 
      <img src="assets/images/speakers/speaker4.jpg" alt="speaker img"> 
      <div class="mu-single-speakers-info"> 
        <h3>Speaker 4
        </h3> 
        <p>Title 4
        </p> 
        <ul class="mu-single-speakers-social"> 
          <li>
            <a href="#">
              <i class="fa fa-facebook">
              </i>
            </a>
          </li> 
          <li>
            <a href="#">
              <i class="fa fa-twitter">
              </i>
            </a>
          </li> 
          <li>
            <a href="#">
              <i class="fa fa-linkedin">
              </i>
            </a>
          </li> 
        </ul> 
      </div> 
    </div> 
    <!-- End single speaker --> 
  </div> 
</div> 
<!-- End Speakers Content -->

Step 1: 

First, you need to refer the handlebars js file in your source code. There are lot of ways to do it and best option is to download the js file and refer it to your file as shown below 

<script src="/your path/handlebars.min.js"></script> 

For other options such as CDN, node packages etc, you can refer the detailed documentation available in handlebars site 

Step 2: 

In this step, we will separate the data from the HTML and store it in a javascript variable in JSON format 

var speakerData = { 

speakers: [ 
{ name: "Speaker 1", imageURL: "assets/images/speakers/speaker1.jpg", title: "Title 1" }, 
{ name: "Speaker 2", imageURL: "assets/images/speakers/speaker2.jpg", title: "Title 2" }, 
{ name: "Speaker 3", imageURL: "assets/images/speakers/speaker3.jpg", title: "Title 3" }, 
{ name: "Speaker 4", imageURL: "assets/images/speakers/speaker4.jpg", title: "Title 4" } 
]};

Step 3: 

Let's clean up the HTML code and create a template. Since we have an array of objects, we will use the Block Helpers available in Handlebars. It starts with {{# }} and ends with {{/ }} and any property that needs to be used inside the template is given like this {{<property name>}} 

<div class="row" id="dvSpeakers"> 
  <script id="speakerTemplate" type="text/x-handlebars-template"> 
                    {{#speakers}} 
                    <div class="col-sm-3"> 
                        <div class="team-member text-center"> 
                            <img src="{{imageURL}}" class="mx-auto img-circle" style="height:244px" alt="speaker img"> 
                            <h4 >{{name}}</h4> 
                            <p class="text-muted">{{title}}</p> 
                            <ul class="list-inline social-buttons"> 
                                <li class="list-inline-item"> 
                                 <a href="#"> 
                                    <i class="fa fa-twitter"></i> 
                 </a> 
                </li> 
                                <li class="list-inline-item"> 
                                 <a href="#"> 
                                    <i class="fa fa-facebook"></i> 
                 </a> 
                </li> 
                                <li class="list-inline-item"> 
                                 <a href="#"> 
                                    <i class="fa fa-linkedin"></i> 
                 </a> 
                </li> 
               </ul> 
              </div> 
           </div> 
                    {{/speakers}} 
  </script> 
</div>

Step 4 

Now we will apply the data to design as shown below. In this first line, we will retrieve the defined template using the id given in the script tag. Then we will use the compile() in Handlebars to compile the template and will return a function which is then executed by passing the variable in which the JSON data is stored. It will return the HTML with all the template parameters replaced with actual values 

    var speakerSource = $("#speakerTemplate").html(); 
    var speakertemplate = Handlebars.compile(speakerSource); 
    $("#dvSpeakers").html(speakertemplate(speakerData));

 Output 

<div class="row" id="dvFeaturedSpeakers"> 
  <div class="col-sm-3"> 
    <div class="team-member text-center"> 
      <img src="assets/images/speakers/speaker1.jpg" class="mx-auto img-circle" style="height:244px" alt="speaker img"> 
      <h4>Speaker 1
      </h4> 
      <p class="text-muted">
      </p> 
      <ul class="list-inline social-buttons"> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-twitter">
            </i> 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-facebook">
            </i> 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-linkedin">
            </i> 
          </a> 
        </li> 
      </ul> 
    </div> 
  </div> 
  <div class="col-sm-3"> 
    <div class="team-member text-center"> 
      <img src="assets/images/speakers/speaker2.jpg" class="mx-auto img-circle" style="height:244px" alt="speaker img"> 
      <h4>Speaker 2
      </h4> 
      <p class="text-muted"> 
      </p> 
      <ul class="list-inline social-buttons"> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-twitter">
            </i> 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-facebook">
            </i> 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-linkedin">
            </i> 
          </a> 
        </li> 
      </ul> 
    </div> 
  </div> 
  <div class="col-sm-3"> 
    <div class="team-member text-center"> 
      <img src="assets/images/speakers/speaker3.jpg" class="mx-auto img-circle" style="height:244px" alt="speaker img"> 
      <h4>Speaker 3
      </h4> 
      <p class="text-muted">
      </p> 
      <ul class="list-inline social-buttons"> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-twitter">
            </i> 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-facebook">
            </i> 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-linkedin">
            </i> 
          </a> 
        </li> 
      </ul> 
    </div> 
  </div> 
  <div class="col-sm-3"> 
    <div class="team-member text-center"> 
      <img src="assets/images/speakers/speaker4.jpg" class="mx-auto img-circle" style="height:244px" alt="speaker img"> 
      <h4>Speaker 4
      </h4> 
      <p class="text-muted"> 
      </p> 
      <ul class="list-inline social-buttons"> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-twitter">
            </i> 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-facebook">
            </i> 
          </a> 
        </li> 
        <li class="list-inline-item"> 
          <a href="#"> 
            <i class="fa fa-linkedin">
            </i> 
          </a> 
        </li> 
      </ul> 
    </div> 
  </div> 
</div>

Here's the screen grab

No Comments

Add a Comment