post thumbnail

Node.js y Express: Jade.js

Publicado Por: Oscar González, El 09/09/2013


Detalles del Curso:

Dificultad: Novato

Duración: 20 min


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

h1 Hola, mi nombre es Oscar

h2 y me gusta programar en los siguientes lenguajes:

ul
    li Javascript
    li Objective-C

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:

h1.titulo Hola, mi nombre es Oscar

h2.subtitulo y me gusta programar en los siguientes lenguajes:

ul#lenguajes
    li Javascript
    li Objective-C

Podemos agregar todos los que queramos y combinarlos.

h1.titulo Hola, mi nombre es Oscar

h2.subtitulo.cursiva y me gusta programar en los siguientes lenguajes:

ul#lenguajes.lista
    li Javascript
    li Objective-C

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):

p un texto corto

p
    | un
    | texto
    | muy
    |largo

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

p.
    un
    texto
    muy
    largo

Etiquetas Style y Script

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

style
    h1 {
        color: blue;
    }
script
    var a = 1;

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.

- var name = 'oscar';

ul
    li Mi nombre es: #{ name }

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

- var name = 'oscar';

ul
    li= #{ name }

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

- var name = '<span>oscar</span>';

ul
    li != { name }

Pasando Parametros

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

a(href="/profile", rel="nofollow") ver el perfil

Otro ejemplo más complejo:

- var name = '<span>oscar</span>';

ul
    li= !{ name }
        a(href="/delete") x

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.

- var authors = [ {name: 'oscar', tutorial: 'iOS'}, {name: 'carlos', tutorial: 'django'}, {name: 'alberto', tutorial: 'git'}, {name: 'jonathan', tutorial: 'how to'}, {name: 'ricardo', tutorial: 'rails'}, {name: 'ramses', tutorial: 'php'}];

mixing authorInfo(authorObject)
    li Autor: #{ authorObject.name } - Curso: #{ authorObject.tutorial }

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

ul
    each author in authors
        mixin authorInfo(author)

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.

// author-info.jade

mixing authorInfo(authorObject)
    li Autor: #{ authorObject.name } - Curso: #{ authorObject.tutorial }

Ahora en nuestra plantilla podemos importar el archivo del mixin:

- var authors = [ {name: 'oscar', tutorial: 'iOS'}, {name: 'carlos', tutorial: 'django'}, {name: 'alberto', tutorial: 'git'}, {name: 'jonathan', tutorial: 'how to'}, {name: 'ricardo', tutorial: 'rails'}, {name: 'ramses', tutorial: 'php'}];

include author-info

ul
    each author in authors
        mixin authorInfo(author)

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.


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus