Da Jade a Swig

on Node.js, Express.js, Jade, Swig, Angular.js

Come è possibile intuire dal titolo, non stiamo parlando di nuove icone pop del momento.
Quando creiamo un nuovo progetto con WebStorm, il template di default per il framework di Express.js per Node è Jade.
Jade è un template engine per Node, che permette di generare un html partendo da un metalinguaggio, >> qui i riferimenti.

Swig invece è un template engine che permette di scrivere in maniera più semplice e diretta html pulito: >> qui qualche riferimento.

In questo articolo verranno raccolti alcuni semplici passaggi, per modificare il template utilizzato da Express.js da Jade a Swig.

Per prima cosa occorre installare i moduli di consolidate e swig:

$ npm install consolidate
$ npm install swig

Appena sotto la dichiarazione del modulo di express, dichiarare la referenza al modulo di consolidate

var express = require('express');
var cons = require('consolidate');

Cambiare infine il template nel seguente modo:

var app = express();
app.engine('html', cons.swig);
app.set('view engine', 'html');
//app.set('view engine', 'jade');

Lato server, il lavoro è terminato.

Diamo un occhio a come variano le nostre view lato front end.
Occorre per prima cosa rinominare i file da .jade a .html, traducendo il contenuto del metalinguaggio html.
Il file layout.jade, diventerà layout.html e sarà così definito:

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body ng-app="myapp" >
  <section class="content">
    <section class="container">
      {% block content %}{% endblock %}
    </section>
  </section>
  <script type="text/javascript" src="/lib/angular.min.js" >y</script>
  <script type="text/javascript" src="/javascripts/main.js"></script>
</body>
</html>

Questa definizione può risultare utilite se si volesse costruire una struttura complessa.
In tal modo ad esempio è possibile includere le pagine che estendono layout nel blocco content, utilizzando gli assets definiti nel layout ereditato.

Ad esempio un file index.html presenterà una struttura del genere:

{% extends 'layout.html' %}
  {% block content %}
  {% raw %}
  <section data-ng-controller="MainController">
  <div class="container">
      <h1>Index</h1>
  </div>
  </section>
  {% endraw %}
{% endblock %}

NB: La direttiva {% raw %} fa si che si evitino conflitti tra il template Swig e framework che usano double brackets, come Angular.js per esempio.