Modulizing HTML using Nunjucks template engine and Gulp

Wednesday, 5.04.2017

I've recently completed a simple project in which my client requested a plain HTML markup which he later implemented in his .NET web application. No Javascript frameworks were possible to use so I wondered which approach would be convenient the most. Basically, I needed to split my markup into reusable components so I could use them in different places. Every common person would immediately think of Polymer and so did I.

The idea here is great. Need a component, insert <component-name> and there you go! What about custom components? Completely different story. The thing is that Polymer project is actually some kind of Javascript framework and for each custom component you have to declare new javascript class or something. As I was reading through the tutorial I quickly realised, that this is too much complexity for a simple project I was about to work on. I needed something simpler, as PHP offered back in old days.

<php include 'header.html' ?>

was what I needed. But that meant I would need also Apache and PHP configuration and you know what else.

Since I work a lot on Drupal 8 projects, I'm also quite familiar with its Twig templating system which is pretty neat in my opinion. I needed something like it, but to work as a simple node automated application, which would stick all components together. So after some research I came across this little article. So Nunjucks is the answer to all my problems! I've never heard of it before and the interesting thing is that is developed by Mozilla. Great stuff.

So then I just needed to connect it to my Gulp project and I was about ready to roll. Since I didn't have really much time to implementing Nunjucks to Gulp by myself, I did a little more googling and came along Yeogurt. This is basically a static site generator based on Yeoman (now I know where its name derived from), which is a scaffolding tool. So the nice thing is that Yeogurt has Nunjucks included so all I had to do was to select it during scaffolding. Awesome!

And the beauty of everything is here. Now I can write something like this:

{% set items = [1,2,3,4,5,6,7,8] %}

{% for item in items %}
  {% include "_components/objects-table-row.njk" %}
{% endfor %}

What a pleasure. I can even write macros and create my own bootstrap snippets!

{% macro field(id='formId', label='', placeholder='', type='text', required=false, class='') %}
  <div class="form-group {{ class }}">
    <label class="control-label" for="{{ id }}">{{ label }} {%if required %} <span class="required">*</span> {% endif %}</label>
    {% if type == 'select' %}
      {{ select() }}
    {% else %}
    <input type="{{ type }}" class="form-control" id="{{ id }}" placeholder="{{ placeholder }}">
    {% endif %}
  </div>
{% endmacro %}

{{ field(id='house_number', label='House number:', required=true ) }}
 

Amazing. And the output is: 

<div class="form-group"> 
<label class="control-label" for="hisna_stevilka">Hišna številka:  <span class="required">*</span> </label>
   <input class="form-control" id="hisna_stevilka" placeholder="">
</div>

The possibilities are limitless. I found this Nunjucks and Gulp couple as a perfect match for my static websites generator. Hope it helps for your projects too!