Exploring Template Engines: Syntax and Control Flow in Popular Frameworks

In web development, template engines play a crucial role in rendering dynamic content. They allow developers to embed server-side code within HTML, making it possible to generate HTML dynamically based on data and control flow logic. Different frameworks and languages use different template engines, each with its own syntax and capabilities. In this post, we'll explore the syntax and control flow mechanisms of several popular template engines.

1. EJS (Embedded JavaScript)

Variable Interpolation: <%= %> for escaped output, <%- %> for unescaped output.
Control Flow: <% %>

<!-- Output -->
<p><%= variable %></p>

<!-- Control Flow -->
<% if (condition) { %>
    <p>Condition met!</p>
<% } %>

2. Pug (formerly Jade)

Variable Interpolation: #{} for inline, !{} for unescaped HTML.
Control Flow: Indentation-based syntax with conditionals and loops.

// Output
p #{variable}

// Control Flow
if condition
    p Condition met!
each item in items
    li= item

3. Handlebars

Variable Interpolation: {{}}
Control Flow: {{#if}}, {{#each}}, {{#unless}}, etc.

<!-- Output -->
<p>{{variable}}</p>

<!-- Control Flow -->
{{#if condition}}
    <p>Condition met!</p>
{{/if}}
{{#each items}}
    <li>{{this}}</li>
{{/each}}

4. Jinja2 (Used in Flask)

Variable Interpolation: {{ }}
Control Flow: {% %}

<!-- Output -->
<p>{{ variable }}</p>

<!-- Control Flow -->
{% if condition %}
    <p>Condition met!</p>
{% endif %}
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}

5. Mustache

Variable Interpolation: {{}}
Control Flow: {{#section}}, {{/section}}, {{^inverted}}

<!-- Output -->
<p>{{variable}}</p>

<!-- Control Flow -->
{{#condition}}
    <p>Condition met!</p>
{{/condition}}
{{#items}}
    <li>{{.}}</li>
{{/items}}

6. Twig (Used in Symfony, Craft CMS)

Variable Interpolation: {{ }}
Control Flow: {% %}

<!-- Output -->
<p>{{ variable }}</p>

<!-- Control Flow -->
{% if condition %}
    <p>Condition met!</p>
{% endif %}
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}

7. Smarty (Used in PHP)

Variable Interpolation: {$}
Control Flow: {if}, {foreach}, {while}

<!-- Output -->
<p>{$variable}</p>

<!-- Control Flow -->
{if $condition}
    <p>Condition met!</p>
{/if}
{foreach from=$items item=item}
    <li>{$item}</li>
{/foreach}

8. Thymeleaf (Used in Java)

Variable Interpolation: ${}
Control Flow: th:if, th:each

<!-- Output -->
<p th:text="${variable}"></p>

<!-- Control Flow -->
<div th:if="${condition}">
    <p>Condition met!</p>
</div>
<ul>
    <li th:each="item : ${items}" th:text="${item}"></li>
</ul>

Summary

• EJS: <%= %> for output, <% %> for logic.
• Pug: #{} for inline, indentation for logic.
• Handlebars: {{}} for output, {{#if}}, {{#each}} for logic.
• Jinja2: {{ }} for output, {% %} for logic.
• Mustache: {{}} for output, {{#}}, {{/}} for logic.
• Twig: {{ }} for output, {% %} for logic.
• Smarty: {$} for output, {if}, {foreach} for logic.
• Thymeleaf: ${} for output, th:if, th:each for logic.

Each template engine has its own strengths and is used based on the requirements of the web framework and project preferences.

Conclusion

Each template engine has its unique syntax and features, making it suitable for different use cases and preferences. Understanding the differences and strengths of these engines can help developers choose the right tool for their projects, ensuring efficient and maintainable code.