“Handling” Web Apps Using Handlebars
mustache

“Handling” Web Apps Using Handlebars

Share with your friends

By: SUMISHREE DAS

SUMISHREE DAS
SUMISHREE DAS

“Handling” Web Apps Using Handlebars

In this blog post, we will cover what template engines are and how Handlebars can be used to create Server Side Rendered (SSR) web applications.

What is a template engine ?

There is a need to update the data rendered on a web browser, the majority of the web consists of dynamic applications in which the data keep changing frequently. So template engines and templating systems are very useful and help developers to build semantic templates in HTML that work along with JavaScript to quickly render a lot of HTML with just a little bit of code.

A template engine is a template processing module that has all of the major features of a modern programming language. This term has come up as a description of programming languages whose primary purpose was to process templates and data to output text. 

Template engines( or template parsers) typically include features common to most high-level programming languages, with an emphasis on features for processing plain text.

                          

mustache
Mustache

Click here for image link 

  Mustache : It is named “Mustache” because of the heavy use of braces, { }, which resemble a sideways moustache.                             

Node JS
Using Handlebars along with Nodejs

 Source : medium.com

What is Handlebars?

We can use template engines in both front-end & back end. If we use a template engine in the backend to generate HTML, it is called Server-Side Rendering (SSR).

                       

Handlebar
Handlebar

Source : https://handlebarsjs.com/

Handlebars is an extension of the Mustache template language, which stresses upon  simple and minimal templating.

Handlebars is a superset of Mustache Template engine

Why should I learn Handlebars? 

Handlebars can be used for both back-end and front-end templating.

It separates the logic-less templates from the business logic in our JavaScript files, thus improving the structure of the application. (and also its maintainability and scalability).

The most important use of Handlebars, and any templating engine, is to keep HTML pages simple and clean and decoupled from the logic-based JavaScript files, and Handlebars serves this purpose well.

It has fast execution.

Using Handlebars  in your Web App –

  • Expressions :Expressions tell Handlebars to include the value of variables or to execute helper functions. Templates need to be compiled to a JavaScript function before use.

A handlebars expression is a {{ some contents, followed by a }}. When the template is executed, these expressions are replaced with values from an input object.

You can see an example below

<!–Data will be inserted in its according place, replacing the brackets.–>

<script id=”address-template” type=”text/x-handlebars-template”>

  <p>I live in {{city}}. My address is {{number}} {{street}}.</p>

</script> 

  • Built-in Helpers :These are JavaScript functions that you can call from your templates, and help you reuse code and create complex templates. To call a helper, just use it as an expression – {{helpername}}. You can pass parameters as well – {{helpername 123}}, which are passed as parameters to your helper function.

To create a helper, use the registerHelper( ) function. See the example below, which demonstrates the usage of a helper –

<script id=”built-in-helpers-template” type=”text/x-handlebars-template”>

  {{#each animal}}

    <p>

      The {{capitalize this.name}} says

      {{#if this.diet}}

        “{{this.diet}}”.

      {{else}}

        nothing since its a {{this.name}}.

      {{/if}}

    </p>

  {{/each}}

</script>

<div class=”content-placeholder”></div>

  • HTML Escaping :

Handlebars can escape the value returned by the expression. If you don’t want Handlebars to escape a value, you have to then surround the variable using triple curly braces {{{variableName}}} , i.e. use the “triple-stash”, {{{.

Click here for image link

Refrences:

For further reading & delving deeper into Handlebars , you can follow the web links & references given  below –

  1. https://handlebarsjs.com/
  2. https://en.wikipedia.org/wiki/Template_engine
  3. https://www.sitepoint.com/a-beginners-guide-to-handlebars/
  4. https://www.youtube.com/watch?v=4HuAnM6b2d8&t=200s
  5. https://tutorialzine.com/2015/01/learn-handlebars-in-10-minutes
  6. https://medium.com/

Share with your friends