Top of page

Presentation-oriented Templating Syntax

Blog

POTS is easy to read and write, both for developers and designers

{% block content %}
  <h1>{{ section.title }}</h1>
  {% for story in stories %}
    <h2><a href="{{ story.url }}">{{ story.title }}</a></h2>
    <p>{{ story.teaser }}</p>
  {% endfor %}
{% end block %}

Why POTS is great

  • it has the same semantic and expressive syntax (notation) to bind data to markup for all frameworks using it
  • can be used interchangeably between different frameworks and rendering engines
  • has advanced methods to extend and include other templates
  • is easy to read and write, both for developers and designers

To the advantages pointed before, the best that we could add is that: if you know one, you really know how to work with all of them. Right? Well, while they are pretty much the same, each one has some particular functionality that is usually related to the framework/language they are build on. So what are those little details and why should we care about it?

First of all, because the syntax is similar on different back-ends, we can be sure that we can use it no matter which backend language is used. Secondly, even though they all look pretty much the same, the project can benefit from a specific variation of the syntax. To understand the differences between the variations of templating frameworks using POTS, we will be focusing on variables, filters, tags/conditionals and template inheritance.

Syntax key points

We will be comparing four variations of templating frameworks using POTS:

  • Django ( the ‘original’ Python flavour)
  • Twig ( the PHP version)
  • Nunjucks ( the JavaScript version)
  • Liquid ( the ‘Shopify’ Ruby version)

Since we can use the same data structure, we will use the following as an example:

{
  "title": "Fishing experiences",
  "stories": [
    {
      "title": "In my own town",
      "teaser": "My journey from noob to fishing expert",
      "url": "/story/2",
    },
    {
      "title": "Meristics",
      "teaser": "Introduction to Meristics basics",
      "url": "/story/3",
    }
  ]
}
{% block content %}
  <h1>{{ section.title }}</h1>
  {% for story in stories %}
    <h2><a href="{{ story.url }}">{{ story.title }}</a></h2>
    <p>{{ story.teaser }}</p>
  {% endfor %}
{% endblock %}
<h1>Fishing experiences</h1>
<h2><a href="/story/2">In my own town</a></h2>
<p>My journey from noob to fishing expert</p>
<h2><a href="/story/3">Meristics</a></h2>
<p>Introduction to Meristics basics</p>
{{ foo.bar }}
{% if fishes %}
  We have some {{ fishes }}
{% endif %}
{% for item in items %}
  {{ item.title }}
{% endfor %}
{% macro input(name, value, type) %}
  <input type="{{ type | default("text") }}" name="{{ name }}" value="{{ value | escape }}"/>
{% endmacro %}
<dl>
  <dt>Fish name</dt>
  <dd>{{ input_field(fish_name) }}</dd>
  <dt>Scientific name</dt>
  <dd>{{ input_field("scientific_name") }}</dd>
</dl>
{% raw %}
  {% if %} this will {{ not be processed }} {% endif %}
{% endraw %}
{# disabled type of catched fished because of Marine Conservation Institute
  {% for fish in fishes %}
    ...
  {% endfor %}
#}

Template inheritance

Template inheritance is a way to make it easy to reuse templates. When writing a template, you can define "blocks" that child templates can override You start by defining a ‘base’ template:

<!DOCTYPE html>
<html>
  <head>
    {% block head %}
      <link rel="stylesheet" href="style.css" />
      <title>{% block title %}{% endblock %}</title>
    {% endblock %}
  </head>
  <body>
    <div id="content">{% block content %}{% endblock %}</div>
  </body>
</html>
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{% endblock %}
{% block content %}
  <h1>Index</h1>
  <p class="important">Welcome to Fishing experiences.</p>
{% endblock %}

To wrap up

With variables and tags you can simply cycle through any content. Filters let you customize the output given from the data source. Macros help you don’t repeat yourself and with templating inheritance you organize your templates in a structured way.

If you want to know more you can check this references:

Some alternatives:

← All blog posts

Also in love with the web?

For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?
Join our team