squido logosquido blog

Popular templating engines

Templating engines are essentially a way to generate HTML. Some of the benefits is the ability to insert variables/data, loop data to create HTML, conditional rendering and other clever rendering rules and formatting.

Some template engines look quite like HTML like Handlebars and EJS whereas others are vastly different and are indentation based like Pug.

Handlebars

Handlebars is based on the Mustache syntax using {{}} as the general variable delimiter. Some see the benefit of Handlebars is how closely it looks like HTML. This helps if you are familiar with HTML and simply want to extend by looping data, conditional rendering, formatting etc.

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

Find out more


EJS

EJS is quite similar to Handlebars but has more of a Javascript feel with a <%%> variable delimiter. Similar to Handlebars, EJS is close to HTML which makes it easier to learn, read and debug if you are familiar with the HTML syntax.

<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}) %>
  <% }); %>
</ul>

Find out more


Pug

Pug (formally Jade) is quite a different syntax to the other template engines and allows for shorthand and indentation syntax quite like yaml.

Where something like this:

doctype html
html(lang='en')
 head
   title Hello, World!
 body
   h1 Hello, World!
   div.remark
     p Pug rocks!

Generates something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <div class="remark">
      <p>Pug rocks!!</p>
    </div>
  </body>
</html>

Find out more


Luckily, all of these are supported with squido and you can find our more here.

Related posts