March 13, 2014

Coffee dentro de Jade

Sacandole jugo a JADE

Hace poco empecé a usar JADE en mi desarrollo, específicamente en las vistas. Puesto que toda la lógica y definición de objetos lo hago en los modelos/controladores, las vistas son prácticamente html con algunos echo de php.

Me parece que no he escrito sobre JADE en mi blog, así que vamos desde arriba.

Jade fue diseñado para crear archivos tipo XML, es decir, HTML, RSS, etc. Por lo menos eso dice en la página, sin embargo, la mejor forma de mostrar como funciona es con un ejemplo práctico.

En jade nosotros hacemos algo así:

h1 hola
h2 saludos desde jade
div.texto.
    Como pueden ver este es un texto arbitrario

Esto nos produce un HTML con esta estructura:

<h1>hola</h1>
<h2>saludos desde jade</h2>
<div class="texto">Como pueden ver este es un texto arbitrario</div>

Muy parecido al código zen.

Si bien con jade podemos hacer más rápido nuestro proceso de creación de vistas. No es de mucha ayuda si no podemos meterle nuestras variables de PHP. Entonces necesitamos aprender a poner el PHP dentro del Jade evitando que Jade nos haga un parse del php. Veamos a que me refiero.

Si en jade hacemos esto:

h1
    <?=$hola?>
h1.
    <?=$hola?>
h1
    |<?=$hola?>

div.<?=$hola?> mundo

div(class="<?=$hola?>") mundo

div(class!="<?=$hola?>") mundo

En el resultado tendremos esto:

<h1>&lt;=$hola?&gt;</h1>
<h1><?=$hola?></h1>
<h1><?=$hola?></h1>
<div class="&lt;=$hola?&gt;">mundo</div>
<div class="&lt;=$hola?&gt;">mundo</div>
<div class="<?=$hola?>">mundo</div>

Podemos concluir que para poner texto y que Jade no lo compile, tenemos varias formas de hacerlo:
- Dejamos un punto al final del tag y el bloque lo indentamos bajo el tag
- Ponemos un pipe “|” antes del texto
- En caso de poner dicho texto DENTRO del tag, usamos la expresión “bang equal” (!=)

Ok Hasta ahora nada fuera de lo ordinario. Ahora empecemos con lo interesante.

Mixins

Si ya has trabajado con LESS, sabrás que es un mixin, de todos modos vamos a ver un ejemplo en Jade

mixin eltexto
    div.clase Hola
        b BOLD TEXT
+eltexto()
+eltexto()

Esto producirá:

<div class="clase">Hola</div>
<b>BOLD TEXT</b>
<div class="clase">Hola</div>
<b>BOLD TEXT</b>

Útil cuando vas a repetir bastante texto… Pero ahora vamos a darle algunas variables para que sea más funcional.

mixin eltexto(clase, saludo, bold)
    div(class=clase) #{saludo}
    b #{bold}
    if block
        div.bloque
            block
+eltexto('mi-clase','Hola mundo','Esto es bold')
    |¿Que clase de brujería es esta?

+eltexto('otra-clase,'Mundial','Esto también es bold')

Al final esto se verá así:

<div class="mi-clase">Hola mundo</div>
<b>Esto es bold</b>
<div class="bloque">¿Que clase de brujería es esta?</div>

<div class="otra-clase">Mundial</div>
<b>Esto también es bold</b>

Brotip: Recuerda que también puedes escapar el php dentro del mixin usando cualquiera de las técnicas que ya mencioné.

Finalmente vamos a ver algo que en la documentación está muy vagamente mencionado

Filters

Los filtros te permiten especificarle a JADE que cierto bloque será de un lenguaje en específico. Digamos que necesitas escribir algo de javascript directo en el jade. Regularmente haríamos algo así:

h1 Hola
h2 Mundo
div.texto.
    Esto es algo de texto arbitrario
script.
    var miUrl = "<?=$Url?>";
    console.log(miUrl);

Ok funciona, pero ¿que tal que en vez de usar javascript como simple mortal, quieres usar algo más divertido como CoffeeScript? Bueno pues, para eso son los filtros. Veámoslos en acción.

div.texto Hola mundo
script
    :coffee
        miUrl = "<?=$Url?>"
        console.log miUrl

Si, acabas de escribir php dentro de coffe, el cual se convertirá en javascript dentro de jade que a su vez se convertirá en un php con html dentro.

Pero esto no llega hasta aquí. También puedes usar :markdown y ganar mil puntos de hipster:

:markdown
    #Hola
    ##Mundo
    Desde markdown dentro de jade
script
    :coffee
        console.log 'Esto es coffeescript en-línea'

Esto creará algo así:

<h1>Hola</h1>
<h2>Mundo</h2>
Desde markdown dentro de jade
<script>console.log('Esto es coffeescript en-línea')</script>

Si intentas compilar esto, probablemente te topes con el problema de que no tienes coffee-script en tu sistema. Un rápido google me llevó a deducir que necesitarás instalar coffee-script de forma global. PERO un mejor google me llevó a una mejor solución.

Si estás usando grunt (y deberías) para compilar tus jade, incluir el compilador de coffee es tan sencillo como incluirlo en tus dependencias dentro del package.json y correr un npm update y listo!

¿Que les parece esta forma de escribir html?, la curva de aprendizaje es mínima y la velocidad de desarrollo se incremente sustancialmente cuando lo usas en todo el potencial, sin contar que el código es mucho más legible.

Espero les sirva de algo esto y cualquier cosa, pues ahi me preguntan, como siempre si te gustó esto compártelo en todas tus redes sociales. Y si en realidad te sirve de algo lo que escribo aquí, a la derecha hasta arriba hay un botón para que me invites un café o algo más :D

Saludos!