Quando sviluppiamo applicazioni per il web, è bene suddividere il nostro codice tra componenti che si occupano esclusivamente della logica e dei dati dell'applicazione e componenti che si preoccupano esclusivamente di presentare i dati all'utente finale.
In questo post avevamo visto come sia scomodo costruire la risposta in html direttamente dalla funzione di callback che gestisce la richiesta.
Express ci mette a disposizione il concetto di template engine, un componente che ha proprio il compito di creare la risposta finale (View) a partire da dati (Model) preparati dal gestore della richiesta (Controller), in modo da attuare quella separazione di responsabilità tanto cara ai bravi architetti informatici: MVC vi dice niente?
Express è molto flessibile, ci permette di scegliere differenti motori di renderizzazione delle viste, uno dei più diffusi è jade: in questo post vederemo come utilizzarlo e impareremo via via ad apprezzarne la semplicità di utilizzo.
Invece di creare direttamente delle pagine html, creeremo delle pagine simil html da dare in pasto a jade che si preoccuperà di compilare le parti dinamiche e restituire il codice html finale.
Vediamo ora come creare una pagina jade per dinamicizzare una risposta
doctype html
html
head
meta(charset='UTF-8')
body
p Applicazione node.js su heroku ok!
p Benvenuto #{nomeCognome}
Eventuali attributi di un nodo si esprimono mettendo tra parentesi tonde la coppia nome=valore subito dopo il nome del nodo (guardate il nodo meta con il suo attributo charset ).
Le parti dinamiche si inseriscono utilizzando la notazione #{nomeVariabile}, dove nomeVariabile deve essere una proprietà di un oggetto javascript preparato dal controller.
Vediamo come configurare la nostra applicazione per l'utilizzo di jade come template engine.
Aggiungiamo la dipendenza a jade nel file package.json modificando la proprietà dependencies in questo modo
"dependencies": {
"express": "~4.9.x",
"jade": "*"
},
Modifichiamo app.js in questo modo
var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 5000));
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));
app.get('/benvenuto', function(req,res){
res.render('benvenuto', {nomeCognome : req.query.nome});
});
app.listen(app.get('port'), function() {
console.log("Node app is running at localhost:" + app.get('port'));
});
Configuriamo poi la rotta /benvenuto con una funzione di callback che prepara i dati, in questo caso un oggetto js {nomeCognome: req,query.nome} che verra passato a jade tramite l'istruzione res.render('benvenuto', {nomeCognome : req.query.nome}): il template engine andrà a cercare la pagina benvenuto.jade presente in /views e la compilerà sostituendo tutte le espressioni dinamiche con i relativi dati, in questo caso #{nomeCognome} sarà sostituito con il valore del parametro della richiesta che si chiama nome.
Ho modificato la pagina statica index.html in questo modo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node js</title>
</head>
<body>
<p>Applicazione node.js su heroku ok!</p>
<form action="benvenuto">
Nome: <input type="text" name="nome" />
<input type="submit" value="Saluta!" />
</form>
</body>
</html>
D'ora in avanti dunque, in /public ci saranno solo risorse statiche, mentre in /views ci saranno le pagine dinamiche scritte in jade.
Provate a effettuare queste modifiche e a reinstallare il tutto su heroku, vi riassumo i passi da fare dopo che avete effettuato le modifiche
- git add --all
- git commit -m "introduzione template engine jade"
- git push heroku master
- heroku open
Se invece volete eseguire in locale:
- npm install (che scaricherà le dipendenze express e jade)
- node app.js
Su heroku è presente l'applicazione completa.
Alla prox.
Ivan
Nessun commento:
Posta un commento