Web Template Languages

A template language makes it possible to re-use the static elements that define the layout of a webpage, while dynamically populating the page with data.

HTML is the World Wide Web’s core markup language. Originally, HTML was primarily designed as a language for semantically describing scientific documents. Its general design, however, has enabled it to be adapted, over the subsequent years, to describe a number of other types of documents and even applications.

• HTML involves major repetition.
• HTML is confusing and unreadable to human eyes.
• HTML is static.

Markup should not be used merely as a tool to get browsers to render a page how the author wants it rendered. The rendering isn’t the only thing people have to see; they have to see, modify, and understand the markup as well. Thus, the markup should be just as user-friendly and pleasant as the rendered result.

Based on those frustrations.

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

template_engines (data, templates) -> documents

It works by expanding tags in a template files using values provided in a hash or object. The result documents can be anything like HTML, config files, source code.

Using template languages will result many benefits like separation of concern, readability, template caching, template inheritance, or output auto escaping. You can pick one or mix followings all together in a single project.

Markdown

A plain text format for writing structured documents, based on conventions for indicating formatting in email and usenet posts. The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. CommonMark is a strongly defined, highly compatible specification of Markdown. GitHub Flavored Markdown (GFM) is the most popular dialect if Markdown currently supported on GitHub and other sites.

| Syntax    | Description |   Test Text |
| :-------- | :---------: | ----------: |
| Header    |    Title    | Here's this |
| Paragraph |    Text     |    And more |

Liquid

Safe open-source template language created by Shopify. It uses a combination of objects, tags, and filters inside template files to display dynamic content.

<ul id="products">
  {% for product in products %}
  <li>
    <h2>{{ product.name }}</h2>
    Only {{ product.price | price }} {{ product.description | prettyprint |
    paragraph }}
  </li>
  {% endfor %}
</ul>

Nunjucks

A rich and powerful templating language for JavaScript with block inheritance, autoescaping, macros, asynchronous control, and more. Available in node and all modern web browsers, with thorough precompilation options.

{% extends "base.html" %} {% block header %}
<h1>{{ title }}</h1>
{% endblock %} {% block content %}
<ul>
  {% for name, item in items %}
  <li>{{ name }}: {{ item }}</li>
  {% endfor %}
</ul>
{% endblock %}

Handlebars

Largely compatible with Mustache templates, provides the power necessary to let you build semantic templates effectively with no frustration. Compiling templates into JavaScript functions makes the template execution faster than most other template engines.

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

Mustache

A logic-less template syntax. It can be used for HTML, config files, source code, anything. It works by expanding tags in a template using values provided in a hash or object. We call it logic-less because there are no if statements, else clauses, or for loops.

<h2>Names</h2>
{{#names}} {{> user}} {{/names}}

EJS

A simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It’s just plain JavaScript.

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

Haml

Avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

Pug

Formerly known as “Jade”. A clean, whitespace sensitive syntax for writing HTML.

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Jinja

A fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.

{% extends "layout.html" %} {% block body %}
<ul>
  {% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
  {% endfor %}
</ul>
{% endblock %}