Introducción a Node.js, parte 8: Express y Jade

Cuando escribimos código de un sitio web, es muy importante tener las distintas partes de nuestra aplicación separada: la lógica por un lado y la presentación por otra. Suponiendo que todos estamos de acuerdo con esto: problema resuelto, pero ahora se nos presenta otro problema, o mejor dicho, necesitamos una solución para escribir código de salida, código html.

Por empezar el código html muchas veces termina siendo un dolor de cabeza, muchos desarrolladores o maquetadores no tabulan, y además el código html ya de por sí siempre termina convirtiéndose en una ensalada, difícil de leer y mantener en el tiempo.

Express trae consigo un motor de plantillas que nos permitirá escribir código html de forma muy fácil, más breve, y por sobre todas las cosas nos obligará a escribir correctamente el orden de los nodos. Este motor de plantillas se llama Jade.

Vamos a ir a nuestro proyecto, el que comenzamos en la publicación pasada, llamado “primer_proyecto_express”, dentro encontraremos una carpeta con el nombre: “views” Aquí seguramente te encontrarás con dos archivos con extensión .jade, podés abrirlos y pegarles una hojeada si querés, nunca está de más. Pero, dentro de esta carpeta vamos a crear un nuevo archivo al que yo voy a llamar: “prueba.jade”

Bien, ya tenemos nuestra plantilla, ahora tenemos que vincularla con un path y llamarla dentro de una acción. Entonces vamos a volver a abrir el archivo app.js y vamos a eliminar las líneas que escribimos la publicación pasada (si es que que no la eliminaste ya):

app.get('/prueba', function(req, res){
   res.send('Acción de prueba');
});

Vamos a reemplazarla por:

app.get('/prueba', function(req, res){
   res.render('prueba');
});

Bien, como vimos antes, mediante el evento .get() podemos definir como primer parámetro un path, y como segundo parámetro la acción que se va a disparar al acceder a ese path. En la publicación pasada vimos como devolver una cadena al navegador, mediante el método .send(). Sin embargo no podemos andar concatenando todo el código html, ni tampoco es buena idea, ya que estaríamos rompiendo con la manera de programar que planteamos al principio de separar la lógica de la presentación. Así que en su lugar usaremos el método .render() que nos permitirá cargar una vista, de la carpeta “views”

Elementos en Jade

Jade tiene una forma de trabajar distinta a html, ya que no usa los signos menor (<) y mayor (>) en las etiquetas. También tendrá cierre, sino que cada línea nos permitirá definir un elemento:

[elemento] Contenido del elemento

Por otra parte, y tener muy presente esto: En Jade NO se tabula, pero SÍ debemos dejar una sangría de dos espacios entre etiqueta padre y etiqueta hija. Esto es importante, si no hacemos sangrías Jade nos devolverá un error por pantalla:

[elemento_padre]
  [elemento_hijo]

Para ir resumiendo vamos a ver un ejemplo simple de código jade:

doctype
html
  head
    title Jade
  body
    h1 Bienvenidos a Jade

Al devolver una respuesta al navegador el navegador va a recuperar el código html de la siguiente forma:

<!DOCTYPE html>
<html>
   <head>
      <title>Jade</title>
   </head>
   <body>
      <h1>Bienvenidos a Jade</h1>
   </body>
</html>

Si hacemos una comparación entre ambos, veremos que el código de Jade es mucho más legible y breve.

Etiquetas con id y class

Es muy común que nuestras etiquetas tengan id o class, para darles estilos o tener una forma de acceder a ellos mediante Javascript.

Para definir un id debemos hacerlo de la siguiente forma:

[elemento]#[nombre_del_id]

Y para una class:

[elemento].[nombre_de_la_class]

Por ejemplo podríamos tener algo como esto:

div#contenedor
  p.parrafo Párrafo 1
  p.parrafo Párrafo 2
  p.parrafo Párrafo 3

Esto nos devolverá el siguiente código:

<div id="contenedor">
   <p class="parrafo">Párrafo 1</p>
   <p class="parrafo">Párrafo 2</p>
   <p class="parrafo">Párrafo 3</p>
</div>

También, por supuesto, podemos combinar id y class:

div#contenedor.clase1.clase2 Contenido

Esto le devolverá al navegador:

<div id="contenedor" class="clase1 clase2">Contenido</div>

 

Etiquetas con atributos

Además de los id y las class, los elementos html pueden contener otros atributos, por ejemplo el elemento img, debería tener de forma obligatoria src y alt. Estos atributos se escriben dentro de un paréntesis y separados por coma:

[elemento](atributo1="valor1", atributo2="valor2")

Por ejemplo si quisiéramos mostrar una imagen:

img(src="https://www.google.com.ar/images/srpr/logo11w.png", alt="Imagen de Google")

 

Variables, condicionales y ciclos de repetición 

Si bien dentro de nuestras vistas no se resuelve la lógica, en muchas ocasiones es necesario escapar el código html para evaluar condiciones o recorrer ciclos de repetición.

En Jade debemos utilizar el signo menor (-) para indicar que estamos escapando dentro de una plantilla, y el signo igual (=) para imprimir variables.

Por ejemplo podríamos crear e imprimir una variable de esta forma:

-var saludo = "Hola a todos";
p= saludo

Como se ve en el ejemplo, escapamos dentro de la vista con el signo menor, para crear una variable llamada saludo. Y luego imprimimos el valor de la misma con un párrafo y el signo igual.

También podemos crear condicionales:

-var me_gusta_node = true;
-if(me_gusta_node)
  p Me gusta Node
-else
  p No me gusta Node

O recorrer ciclos de repetición:

-var colores = new Array('Verde', 'Amarillo', 'Rojo');
ul 
  -each item in colores
    li= item

También podemos pasar variables desde la acción al controlador. No lo dije antes, pero el método .render() permite pasar un segundo parámetro, que es un json con datos que se podrán acceder en la vista.

Vamos a modificar:

app.get('/prueba', function(req, res){
   res.render('prueba');
});

Por:

app.get('/prueba', function(req, res){
   res.render('prueba', {
      fruta: 'Manzana',
      color: 'Rojo'
   });
});

Volvemos a compilar el archivo app.js y dentro de la vista vamos a agregar:

p Fruta: #{fruta}. Color #{color}.

Como se ve, en este caso debemos recuperar las variables como:

#{nombre_de_variable}

 

Incluir vistas

A su vez también podemos incluir otras vistas dentro de nuestra plantilla jade. Para ello vamos a crear un nuevo archivo en la carpeta “views”, al que yo llamaré “prueba2.jade” con el siguiente código:

-var frutas = new Array('Banana', 'Manzana', 'Naranja');
ul 
  -each item in frutas
    li= item

Y dentro de nuestra vista “prueba.jade” vamos a agregar la palabra include, seguida por el nombre de la vista:

include prueba2

Esto último es muy importante, ya que podremos recortar pedazos de código de vistas para que sean reutilizable, y así evitar repetir código como cabeceras, menús, pie de página, etc.

Anterior: Introducción a Node.js, parte 7: Instalar Express

Siguiente: Introducción a Node.js, parte 9: Métodos GET y POST con express

Redes sociables

    2 Replies to “Introducción a Node.js, parte 8: Express y Jade”

    Comments are closed.