Siguiendo con nuestra exploración de Express dentro del tutorial sobre Node, vamos a ha hablar sobre la funcionalidad de Jade en Express.

Si abrimos la carpeta views de nuestro proyecto, observamos que hay una serie de archivos con la extensión .jade.

Express utiliza Jade como motor por defecto de las plantillas que son estos archivos.

Jade es un generador de vistas basado en sangrías ya que definen la jerarquía de un documento, por ejemplo si comparamos un documento en html y en jade veremos los siguiente:

Analizando ambos códigos vemos varias características de Jade:

• Es mas terso que html
• Utiliza las sangrías para declarar la jerarquía del documento html
• No hace falta generar etiquetas, al compilarse se añaden automáticamente los caracteres <>
• Jade también cierra las etiquetas al generar el código html.

Al generar una página, Jade, compila la plantilla a HTML.

Ventajas de los sistemas de plantillas

• Para mostrar una lista de mensajes publicados en un blog que estén almacenados en una base de datos
• Mostrar artículos publicados en un blog
• Cambiar el elemento title de una página basándonos en una variables, con lo que ello conlleva para el SEO por ejemplo.
• Para crear una cabecera y un pie y utilizarlas en varias plantillas, muy parecido a lo que puede hacer PHP con includes o AngularJS

Utilizar Jade Para definir la estructura de una página

Seguramente ya estés intuyendo hasta donde puede llegar Jade, pero es mucho más potente de lo que podemos llegar a pensar.

Al definir la estructura de la web por medio de sangrías si una línea aparece sangrada debajo de otra se supone que es su hija. De hecho muchas veces los errores que aparecen en jade son debidos a dichas sangrías.

Permite utilizar cualquier etiqueta html en la cual podemos añadir identificadores por medio de # y el nombre del identificador sin utilizar espacios, por ejemplo:

section#noticia

Pero también se pueden incluir clases por el mismo procedimiento pero con un punto.

div.comentarios

De hecho podemos unir clases e ids con tan solo encadenarlos:

section#id.clase

Introducir diversas clases en una etiqueta

div.clase1.clase2.clase3

Si queremos añadir texto dentro de una etiqueta, tan solo tenemos que poner el texto despues de la misma:

h1 título de la entrada

E incluso introducir cuerpos mayores de texto utilizando la barra vertical como limitador:

p
  | Aquí podemos
  | escribir varias
  | líneas de texto

 

Publicar datos con Jade

El verdadero potencial de Jade se encuentra en la maniìlación y envíos de datos a HTML.

Para ello utiliza dos caracteres especiales que le ayudan a determinar como interpretar el código:

• Signo menos (-) Se utiliza para decirle que debe de ejecutar el código que se encuentra a continuación.
• Signo igual (=) Le indica al interprete de comandos que debe evaluar, cancelar y enviar el código

Variables

La sintaxis #{variable} le dice a jade que debe de sustituir la variable por su valor de cadena.

Por ejemplo si usamos la siguiente estructura en el index.jade:

extends layout

block content
	- var nombre = 'Visitante'
	p Hola #{nombre}

Lo cual nos diría; Hola Visitante

De esta forma vemos como usar – para declarar una variable y #{variable} para mostrarla

Bucles

Los bucles nos van a permitir repetir objetos y arrays. De hecho para crear un bucle no es necesario introducir el signo – aunque es una buena práctica hacerlo.

Vamos a ver algunos ejemplos para ver como funcionan los bucles, como por ejemplo:

- usuarios = ['Miguel', 'Jesús', 'Helena']
- each usuario in usuarios
	p= usuario

Si lo preferimos podemos usar el bucle for:

- usuarios = ['Miguel', 'Jesús', 'Helena']
- for usuario in usuarios
	p= usuario

O incluso realizar repeticiones sobre objetos:

- objeto = {nombre: 'Miguel', apellido: 'López'}
- each val, key in objeto
	li #{key}: #{val}

Condicionales

Podemos trabajar usando condicionales en Jade, y del mismo modo que con los bucles no es necesario poner el – delante pero por buena práctica es recomendable hacerlo. Un ejemplo de condicional podría ser:

- llueve = true
- if (llueve)
	p Coge el paraguas
- else
	p hace un buen día

Elementos comunes

Es un hecho que los sitios webs tienen secciones repetidas en todas las páginas, estas secciones por norma general son:

• cabeceras
• sidebars
• pies

Y en Jade al igual que en PHP o AngularJS, se pueden separar estas partes en archivos independientes y trabajar con ellas de forma separada para un mejor desarrollo y mantenimiento.

Para lograr esto Jade utiliza la palabra reservada include y que requiere el nombre de la plantilla que vamos a utilizar como por ejemplo:

include ./includes/footer

En este caso el archivo se encuentra en views/includes/footer.jade ya que considera como raíz al directorio views

De este modo si tenemos el footer por ejemplo en el directorio includes nos quedaría un index.jade de la siguiente forma:

extends layout
block content
	h1= title
	p Welcome to #{title}
	include ./includes/footer

Hay que tener en cuenta el indexado y que nuestro pie se encuentra dentro del bloque de contenido.

Mixin

Si al programar nos encontramos con que se van a repetir ciertos bloques de código se pueden utilizar los mixin, con el fin de simplificar el código y mejorar su mantenimiento.

De hecho esta es una característica casi en exclusiva de Jade.

A continuación vemos un par de ejemplos, aunque como digo más abajo, es muy interesante acceder a la documentación oficial y hacer algunas pruebas.

extends layout

block content
	h1= title
	p Welcome to #{title}
	//- Declaration
	mixin list
		ul
			li foo
			li bar
			li baz
	//- Use
	+list
	mixin list(id, ...items)
		ul(id=id)
			each item in items
				li= item

	+list('my-list', 1, 2, 3, 4)
	+list('nombres', 'Miguel', 'Antonio', 'Ramón')

Una vez más es muy importante el tener controlados los tabuladores para evitar errores.

Podemos ver mucho más sobre jade en express desde su documentación oficial.