Cos’è EJS? Impara le basi dei template engine su Express.js

Tempo di lettura: 4 minuti
Guida EJS, come funziona il template engine del framework Express.js

Cosa sono i Template Engine

È arrivato il momento di affrontare uno dei più classici dei problemi della programmazione lato server, ovvero la separazione del codice di programmazione (in questo caso in Javascript) dall’HTML. Per risolvere questo problema la comunità Javascript ha creato i template engine, in questo articolo approfondiremo come poterne usare uno dei tanti (EJS) all’interno di Express!

Fino ad ora, abbiamo restituito il codice HTML direttamente in JavaScript (brutta cosa). In questo modo abbiamo ottenuto un codice così pesante e difficile da gestire:

res.write('<!DOCTYPE html>'+
'<html>'+
'    <head>'+
'        <meta charset="utf-8" />'+
'        <title>Pagina Node.js!</title>'+
'    </head>'+ 
'    <body>'+
'       <p>Sono un paragrafo <strong>HTML</strong>!</p>'+
'    </body>'+
'</html>');

Orribile, non è vero?

Fortunatamente, Express ci permette di utilizzare i template per uscire da questo inferno. All’interno dei template possiamo usare dei linguaggi, molto facili da scrivere, che ci permettono di produrre HTML ma anche di inserire in mezzo dei contenuti variabili.

PHP è esso stesso un linguaggio di template che ci permette di fare questo:

<p>Sei visitatore n^ <?php echo $visitornum; ?></p>

Ci sono molte altre lingue come Twig, Smarty, Haml, JSP, Jade e EJS. Express permette di utilizzare la maggior di questi template engine, ognuno con i propri vantaggi e svantaggi.

In generale: gestiscono tutti gli elementi essenziali, vale a dire variabili, condizioni e cicli, ecc.

Il principio è il seguente: dal file JavaScript, richiami il template inviando le variabili necessarie per costruire la pagina (vedi figura).

come-funziona-ejs-template-engine-expressjs
Come funziona un Template Engine

Fondamenti di EJS

Poiché ci sono molti sistemi di template in giro, ne selezionerò solo uno. Suggerisco di utilizzare EJS (Embedded JavaScript).

cosa-sono-template-engine-express-nodejs-ejs
Sito ufficiale di EJS

Installarlo per il progetto è molto semplice:

npm install ejs

Non abbiamo bisogno di includerlo con il require ma dobbiamo dire ad Express che abbiamo deciso di usare questo specifico template engine, per farlo aggiungi questa riga nel tuo codice prima di tutti gli app.get():

app.set('view engine', 'ejs');

Ora possiamo delegare la gestione della View (ovvero la Vista dell’MVC, in parola povere l’HTML) al nostro template engine.

Non c’ è più bisogno di scrivere un codice HTML nel mezzo del codice JavaScript come degli idioti!

app.get('/floor/:floornum/bedroom', function(req, res) {
  res.render('bedroom.ejs', {floor: req.params.floornum});
});

Questo codice richiede un file bedroom.ejs che deve essere trovato in una sotto-cartella chiamata “views”. Quindi creare /views/bedroom.ejs e mettici il seguente codice:

<h1>Sei nella camera da letto</h1>

<p>Al piano n^<%= floor %></p>

<%= floor %> sarà sostituito dalla variabile floor che abbiamo trasmesso al template con {floor: req.params.floornum} !

Parametri multipli e loop

Ricorda che puoi inviare più parametri ai tuoi template, basta includerli nell’array!

In questo esercizio, creeremo un’applicazione che conta fino a un numero inviato e visualizza un nome casuale all’interno di un array (sono privo di fantasia, lo so!).

Ecco il codice JavaScript:

app.get('/count/:number', function(req, res) {
  var names = ['Roberto', 'Giacomo', 'Davide'];
  res.render('page.ejs', {counter: req.params.number, names: names});
});

In seguito passiamo il numero inviato come parametro e l’elenco di nomi sotto forma di array. Poi, nel template EJS:

app.set('view engine', 'ejs');

Come puoi vedere, siamo in grado di fare cicli e stampe con nel template EJS. In realtà, usiamo la stessa sintassi di JavaScript (da cui è uscito il for loop).

Il piccolo ritocco alla fine del codice ci permetterà di prendere un nome casuale dall’array che è stato inviato al template.

Esercizio pratico EJS: template in Express

Ricapitolando, questo sarà il nostro codice:

var express = require('express');
var app = express();

app.set('view engine', 'ejs');

app.get('/count/:number', function(req, res) {
  var names = ['Roberto', 'Giacomo', 'Davide'];
  res.render('page.ejs', {counter: req.params.number, names: names});
});

app.listen(8081);

Assieme alla pagina sarà cosi:

esercizio-express-template-engine-ejs-node
Template engine: separare il codice di programmazione dall’HTML

Lanciamo l’app e vediamo il risultato alla pagina /count/99

template-engine-express-ejx-risultato
Esercizio pratico template engine

Allo stesso modo, è possibile utilizzare le condizioni (if) e i loop (while) all’ interno dei template EJS.

Non esitare a guardare altri sistemi di template, ad esempio su siti web come jade-lang.com o haml.info che offrono un modo completamente diverso di creare pagine web.

Nel prossimo articolo approfondiremo uno dei concetti fondamentali di Express: i middleware!


L’articolo che hai appena letto fa parte di una lunga serie di guide e tutorial tradotte in italiano e distribuite gratuitamente. In particolare questo articolo si basa sui testi inglesi di Mathieu Nebra (Ultra fast applications using Node.js), con licenza CC BY-NC-SA. Questo articolo è sotto la stessa licenza.