Uso de templates en NodeJS: Separa la lógica de la presentación

¿Qué son los templates?

Que sucede cuando nuestra página html contiene diferentes partes de ella que cambian según diferentes condiciones, supongamos que tenemos una pagina de inicio de un diario que cambia de titulo, sus artículos y con ellos autores.

Para estos casos existe el concepto de template. Un template es un documento que tiene preparados ciertos elementos que son reemplazados por contenido dinámico.

Vamos a guardar ahora nuestro hola_mundo.html como hola_mundo.tpl.

La extensión .tpl es una convención que se usa muy frecuentemente para hacer referencia a una plantilla.

En lugar de un titulo y un párrafo estáticos vamos a agregar dos comodines, %titulo% y %parrafo%.

<!-- hola_mundo.tpl -->
<!DOCTYPE html>
<html>
    <head>
        <title>%titulo%</title>
    </head>
    <body>
        <p>%parrafo%</p>
    </body>
</html>

Ahora definimos en variables diferentes el titulo y párrafo.

var titulo = "Este es el titulo de la pagina.";
var parrafo = "Este es el parrafo de la pagina.";

Vamos a actualizar la referencia al archivo.

var html = fs.readFileSync(__dirname + "/hola_mundo.tpl");

Vamos a convertir el contenido de nuestro template a texto.
```
html = html.toString();
```

Y vamos a reemplazar los comodines por contenido dinámico.

html = html.replace("%titulo%", titulo); // reemplazar %titulo% por el valor de la variable titulo
html = html.replace("%parrafo%", parrafo); // reemplazar %parrafo% por el valor de la variable parrafo

Como la función replace regresa un string, podemos utilizar la sintaxis encadenada para simplificar lo anterior en una sola línea.

html = html.replace("%titulo%", titulo).replace("%parrafo%", parrafo);

e incluso podemos simplificar aun mas si encadenamos todo.

var html = fs
    .readFileSync(__dirname + "/hola_mundo.tpl")
    .toString()
    .replace("%titulo%", titulo)
    .replace("%parrafo%", parrafo);

Al final rendereamos la pagina con end.

// llamamos a la librería http
var http = require("http");

// llamamos a la librería fs
var fs = require("fs");

// definimos los valores de nuestros comodines a reemplazar
var titulo = "Este es el titulo de la pagina.";
var parrafo = "Este es el parrafo de la pagina.";

// creamos nuestro server
var miServidor = http.createServer((peticion, respuesta) => {
    respuesta.writeHead(200, { "Content-Type": "text/html" });
    var html = fs
        .readFileSync(__dirname + "/hola_mundo.tpl")
        .toString()
        .replace("%titulo%", titulo)
        .replace("%parrafo%", parrafo);
    respuesta.end(html);
});

// inicializar el servidor
miServidor.listen(1111, "127.0.0.1");

Cierra y abre nuevamente el proceso de node, y podrás notar que ahora los comodines han sido reemplazados por texto dinámico.

En el ejemplo anterior podemos ver una serie de operaciones de manera consecutiva utilizando la sintaxis encadenada. Esto si bien es aceptable tiene la limitante que requiere que se entienda todo el comportamiento implícito de la sintaxis. Por lo cual no es una buena idea utilizarla especialmente si se trabaja con programadores que están teniendo su primer contacto con el lenguaje.