templating - rvdegroen/notes GitHub Wiki

Table of Contents

By using template engines, you avoid making repetitive HTML files or code. If you write your code in a templating engine, it will render your written code through a templating engine into something the browser can use, think of an HTML file.

Templating Research

To be able to decide which templating engine I will use, I will research five different templating engines: EJS, Handlebars, Mustache, Pug & Nunjucks.

EJS

If I use EJS, I can use my HTML file in an EJS file. "Normal" HTML basically works in EJS and this is also a reason why I would probably want to use this templating engine.

Mustache

Npm describes Mustache as a "logic-less" template, because there are no if-else statements and you write for loops all in tags instead, which means for me that I'm not familiar with this way of working at all. One example how you write an if-else statement in Mustache is like this:

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

One example how you write a loop in Mustache is like this:

{{#names}}
  <li>{{name}}</li>
{{/names}}

The reason I won't choose this templating engine, is because I'd have to learn a lot from scratch again and I'd rather put all of my time into my project itself, than learning something like this entirely from scratch. I'd say it's very inconvenient for now for me to use it, but I might look at it again sometime in the future.

bron: https://stackoverflow.com/questions/6027525/how-do-i-accomplish-an-if-else-in-mustache-js , https://codepen.io/johnsonshara/pen/mPzbBO , https://www.npmjs.com/package/mustache

Handlebars

Just like Mustache, Handlebars is a "logic-less" template, which means you don't have the if-else statements or for loops etc. The idea behind this is that all the "logic" contained in the javascript and not in the template itself. Handlebars is actually an extension of Mustache. Because they're both "logic-less" templates, you also would have to use tags for things like loops or an if-else statement.

The reason I won't use handlebars is the same reason I won't use Mustache. I don't want to learn something entirely from scratch for this project, because I don't have all the time in the world to learn something entirely from scratch when I can use something else that I'm more familiar with to do almost the same thing (think about using EJS).

Pug

Pug was formerly known as "Jade". It is a templating engine heavily influenced by Haml (HTML abstraction markup language). Quick-adviser describes Haml a "a markup language predominantly used with Ruby that cleanly and simply describes the HTML of any web document without the use of inline code".

Npm describes pug as a "clean, whitespace sensitive syntax for writing html", which basically means that indentation and **spaces ** matter as opposed to languages like javascript or HTML. You could write your entire html in one line and it would still work. In pug, this matters. You also don't write the html with <> characters. To give you an exmaple of what pug would look like, I'll show you the following:

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.

I'm considering this templating engine for me as an option to use, because it doesn't seems entirely "out-of-the-box", like handlebars or Mustache and it seems it would be quicker to write it, but the thing I'm worried about is whether or not it will confuse me.

bron: https://haml.info/ , https://www.npmjs.com/package/pug , https://quick-adviser.com/what-is-haml-used-for/#What_is_Haml_used_for , https://quick-adviser.com/what-is-haml-used-for/#What_is_Haml_used_for

Nunjucks

Nunjucks is heavily influenced by Jinja2, which is a templating engine for Python. You can make a re-usable layout with blocks that will be filled in/ replaced by the views (pages).

To see what the syntax would look like, look at the following example:

<html>
<head>
    <title>Nunjucks example</title>
</head>
<body>
{% block content %} 
{{title}}
{% endblock %}
</body>
</html>
{% extends "index.html" %}

{# This is comment #}
{% block content %}
    <h1>{{title}}</h1>
    {# apply custom function and next build-in and custom filters #}
    {{ myFunc(smthVar) | lower | myFilter(5, 'abc') }} 
{% endblock %}

I would like to use this, but I'm just really not sure about it at the same time. The reason Why I'd use this is, because I can just make one page and just make different partials for blocks that will change within the page, instead of adding the same partials in a page and using different partials for other pages if I'd use EJS. The thing that I'm worried about is that it might confuse me as I'm not known to how the syntax is written and I don't want to waste time researching things if I'd already known them in normal html (EJS). Also, the amount of weekly downloads on npm doesn't seem that much in comparison to EJS for example, so if I'd run into problems I'd might have a hard time fixing my issues.

bron: https://www.npmjs.com/package/nunjucks , https://riptutorial.com/node-js/example/20689/nunjucks ,

Which Templating Engine Will I Choose?

So my decision was leaning towards Pug, Nunjucks and EJS.

Pug just seemed shorter for me to write, but maybe the spaces will just make me confused and I have a tendency to get easily overwhelmed, so using tags without using special characters, like <> might confuse me. This is why I decided to not use it.

I also seemed to be interested in Nunjucks, due to being able to make re-use your main page and making different partials for a block. The weekly downloads on npm doesn't seems that much though, which could mean that if I run into a problem it might be harder to look for a solution. This is especially important for me, as I'm also not familiar with it's style of typing.

My final decision is to choose EJS. I think for me EJS is just the safest choice for now, especially because I have a deadline in the next coming weeks. I'm familiar with HTML and I can use my HTML in EJS, so I think it will be overall easier for me to use for now.

⚠️ **GitHub.com Fallback** ⚠️