Node.js y Express: Jade.js

En este capitulo de Node.js y Express voy a hablarte de un tópico que tocamos muy por encima en el capítulo anterior, Jade.js.

Jade es un lenguaje de plantillas desarrollado por el creador de Express para simplificar la sintaxis de HTML y acelerar el proceso de desarrollo.

Este lenguaje intercambia tener que cerrar las etiquetas HTML por la indentación, es decir, todo bloque de texto que esté hacia la derecha de la etiqueta que abre, significa que va dentro.

También elimina los símbolos "<" y ">", y los parámetros de cada etiquetas se pasan entre paréntesis como si fuera una función.

Veamos un ejemplo:

Sintaxis Básica de Jade

Como podemos ver, se elimina el marckup para darle al código un look mucho más limpio.

Si queremos agregar clases o id, solo tenemos que colocarlo al lado:

Podemos agregar todos los que queramos y combinarlos.

Ahora supongamos que queremos escribir un texto muy largo, en una sola línea podría ser tedioso. En jade podemos separar el contenido de una etiqueta en varias lineas utilizando el carácter "|" (pipe):

También hay una forma simplificada, y es agregando un punto después de la etiqueta:

Etiquetas Style y Script

Todo el contenido de las etiquetas style y script será convertido a CSS y Javascript respectivamente:

Javacript

Jade soporta javascript embebido en el documento agregando el carácter "-" por delante, este código será ejecutado en el lado servidor y no del lado del cliente.

También podemos mostrar el contenido de la variable asignándolo a la etiqueta:

Si quisiéramos agregar HTML en el código tenemos que reemplazar "#" por "!", de lo contrario el código será impreso como texto.

Pasando Parametros

Como mencioné anteriormente, los parámetros de las etiquetas se pasan entre paréntesis como si fueran funciones:

Otro ejemplo más complejo:

Este coloca un link dentro de un elemento de una lista justo después de su valor.

Mixins

Puedes pensar en los mixins como si fueran funciones, estos permiten reutilizar bloques de código de la siguiente manera:

Supongamos que tengo un array de objetos y quiero mostrarlos en una lista, pero este patrón patrón podría repetirse en varias partes de mi código.

Vemos como el mixin recibe un objeto llamado author y lo muestra en un elemento de lista. Ahora podemos llamarlo:

Importando Archivos

Supongamos que queremos que el mixin anterior aparezca también en otros archivos de mi aplicación. Con Jade podemos guardar en mixin en otro archivo y fácilmente importarlo en otros.

Ahora en nuestra plantilla podemos importar el archivo del mixin:

Conclusión

Jade es un lenguaje de plantillas poderoso y simple, un complemento excelente para nuestras aplicaciones de Node.js y Express.

Como siempre cualquier duda, puedes dejarla más abajo en la sección de comentarios.

Saludos.