Jade, una herramienta eficaz para creación de contenido y plantillas
Durante mis andares en el desarrollo Web he visto diversas formas de generar contenido HTML, tanto del lado del servidor como del cliente, ambos con las mejores intenciones, pero siempre agregan un grado de complejidad que muchas veces es innecesario.
Existen aquellos que generan templates con JavaScript, los cuales pueden tomar sentido cuando se trabaja con Frameworks funcionales en lado cliente; otros pre-procesan el contenido HTML en el servidor usando plantillas en lenguajes como PHP, JAVA, Ruby, etc, siendo éstos últimos muy distintos entre sí, e implican una curva de aprendizaje inherente al lenguaje.
Pero esto se ha comenzado a resolver separando el desarrollo Back-end con el Front-end, y es éste último del que quiero hablar. Muchos desarrolladores Front-end prefieren apoyarse de Frameworks puros en cliente que manejan las plantillas mediante su definición en JavaScript, pero debemos tomar en cuenta que el contenido final siempre es HTML, y que debemos enfocarnos en generar contenido, más no en resolver la curva de aprendizaje del Framework.
En mi sentir y actuar, considero que es más importante usar una herramienta adecuada para el contenido, y que solamente resuelva esa parte, más no un conjunto de herramientas que resuelven muchas cosas para finalmente crear HTML. Entre más sencilla la herramienta, más fácil de aprender y de usar.
Plantillas con Jade
Jade en un lenguaje de plantillas, un binario de NodeJS, y una forma rápida de generar contenido. Básicamente define una estructura semántica, ordenada y jerárquica, usando solamente el nombre de las etiquetas HTML, de esta forma solamente nos dedicamos a generar contenido y no en aprender un lenguaje nuevo, dado que es una abstracción de HTML plasmada en un formato más sencillo, de aquí deriva el “nuevo” lenguaje llamado Jade.
1 //-index.jade 2 doctype html 3 html 4 head 5 title Mi título 6 body 7 h1 Título de la página 8 p Un párrafo que explica el propósito de la página.
Básicamente el código se reduce considerablemente debido a que se escribe una sola vez la etiqueta deseada, evitando así abrir y cerrar etiquetas HTML (nótese que los caracteres ‘<’ y ‘>’ no son necesarios). La indentación de dos espacios define la jerarquía, y como resultado natural se obtiene una plantilla definida con orden.
Pero no termina ahí, es necesario traducir o compilar la plantilla a verdadero código HMTL. Esto se logra mediante la línea de comandos.
$ jade index.jade -P
Así, el comando ‘jade’ crea un nuevo archivo con el mismo nombre, pero con la extensión ‘.html’; el parámetro ‘-P’ le indica a Jade que el archivo compilado le de un formato leíble (si omitimos el parámetro se compila un archivo minificado), dándonos como resultado:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Mi título</title> 5 </head> 6 <body> 7 <h1>Título de la página</h1> 8 <p>Un párrafo que explica el propósito de la página.</p> 9 </body> 10 </html>
De esta forma tenemos un template listo para usar, mediante una llamada síncrona o asíncrona, se puede mostrar el contenido en un navegador, o manipularlo con JavaScript, según sea la necesidad. Cabe mencionar que la cantidad de código se redujo un 22%, además que con la práctica, el tiempo de desarrollo se reduce considerablemente.
Jade, así como otros lenguajes de plantillas, incluye un mecanismo para tomar fuentes de datos en JSON y usarla en forma de variables dentro de la plantilla. Por ejemplo, si definimos el objeto:
1 {
2 "title": "Mi título",
3 "content": {
4 "title": "Título de la página",
5 "text": "Un párrafo que explica el propósito de la página."
6 }
7 }
Y modificamos nuestra plantilla para que tome las variables del objeto descrito anteriormente:
1 //-index.jade
2 doctype html
3 html
4 head
5 title #{title}
6 body
7 h1 #{content.title}
8 p #{content.text}
Al compilar mediante el comando:
jade index.jade -P -O index.json
Obtenemos el mismo resultado, pero con la ventaja de que estamos separando el esqueleto en un archivo y el contenido útil para el usuario en un objeto de datos.
Otra peculiaridad de Jade es la herencia de contenido, esto es bastante útil cuando se está creando un sitio estático; para ejemplificar esto consideremos un sitio estático con dos páginas, una de inicio y otra de contacto:
La página de inicio se ve de la siguiente forma:
1 //-index.jade 2 doctype html 3 html 4 head 5 title Mi sitio web con Jade 6 body 7 header 8 p Mi sitio web con Jade 9 nav 10 ul 11 li 12 a(href="/") Inicio 13 li 14 a(href="/contacto.html") Contacto 15 main 16 h1 Bienvenido 17 p Esta es la página de inicio. 18 footer 19 p Derechos reservados 2015 ®
La página de contacto (muy similar) se ve así:
1 //-contacto.jade 2 doctype html 3 html 4 head 5 title Mi sitio web con Jade 6 body 7 header 8 p Mi sitio web con Jade 9 nav 10 ul 11 li 12 a(href="/") Inicio 13 li 14 a(href="/contacto.html") Contacto 15 main 16 h1 Envía un mensaje 17 form 18 input(type="email", placeholder="Escribe aquí tu correo electrónico") 19 textarea(placeholder="Escribe aquí el mensaje") 20 input(type="submit") Enviar 21 footer 22 p Derechos reservados 2015 ®
Como podemos apreciar, ambas son similares en elementos como el encabezado, la barra de navegación y el pié de página, pero son distintas en el contenido que muestran. Es así que podemos abstraer el contenido común en una plantilla “base” y heredar esos elementos en las dos secciones del sitio. La “base” se ve así:
1 //-base.jade 2 doctype html 3 html 4 head 5 title Mi sitio web con Jade 6 body 7 header 8 p Mi sitio web con Jade 9 nav 10 ul 11 li 12 a(href="/") Inicio 13 li 14 a(href="/contacto.html") Contacto 15 main 16 block content 17 footer 18 p Derechos reservados 2015 ®
Notemos que en la línea 16 se agregó la directiva `block`, misma que nos permitirá insertar el contenido exclusivo de cada página del sitio, de esta forma las plantillas de inicio y contacto heredan el contenido de la base de la siguiente forma:
Página de inicio:
1 //-contacto.jade 2 extends ./base.jade 3 4 block content 5 h1 Envía un mensaje 6 form 7 input(type="email", placeholder="Escribe aquí tu correo electrónico") 8 textarea(placeholder="Escribe aquí el mensaje") 9 input(type="submit") Enviar
Página de contacto:
1 //-contacto.jade 2 extends ./base.jade 3 4 block content 5 h1 Envía un mensaje 6 form 7 input(type="email", placeholder="Escribe aquí tu correo electrónico") 8 textarea(placeholder="Escribe aquí el mensaje") 9 input(type="submit") Enviar
Y de esta forma la directiva `extends` nos permite heredar todos los elementos comunes en las distintas plantillas de nuestro sitio. Notemos que la directiva `block content`, la cual se especificó en la base, la usamos en nuestras plantillas “hijo” para especificar el contenido particular de la página.
Esta estrategia nos permite generar contenido estático para sitios pequeños que no manejan contenido dinámico.
Jade también puede ser integrado en la generación de contenido dinámico mediante NodeJS, pero eso es otro tema.
Espero este mi primer artículo lo encuentres útil, saludos!
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario