Al igual que existen los pre-procesadores css existen los pre-procesadores html o también conocidos como lenguajes de plantilla. Básicamente nos ayudan a crear plantillas html simplificandonos la síntaxis pero a la vez ofreciéndonos otras funcionalidades muy potentes.
En este artículos nos vamos a nombrar tres: HAML, SLIM o JADE.
Mientras que los dos primeros usan Ruby para la compilación, Jade está basado en node.js. Por ello es habitual que Haml y Sass vayan de la mano y por otro lado Stylus y Jade ya que ambos utilizan ruby y node respectivamente.
Sintaxis
La sintaxis de cualquiera de estos tres preprocesadores es muy parecida pero sí podemos decir que mientras que Jade y Slim no necesitan ningún símbolo al inicio de cada sentencia, haml utiliza el símbolo %:
Jade
Aquí os dejo algunas de las características a destacar de Jade. Para ver todas las posibilidades que ofrece podéis visitar la página oficial de Jade
- Abre y cierra las etiquetas html automáticamente
- La tabulación es muy estricta, si no se tabula jerárquicamente el html no se interpretará correctamente metiendo contenedores dentro de otro que no corresponda o generándose errores de compilación.
- Para poder añadir los atributos (href, src,...) de una etiqueta, se ponen entre paréntesis separados por comas. Por ejemplo:
a(href="#ancla", title="enlace")
- Para asignar ids y clases se hace como si estuviéramos en una hoja de estilos. Por ejemplo:
div#box-content
equivaldría a:
<div id="box-content"></div>
- Los comentarios se hacen igual que en css con //
- Se pueden hacer includes de código como, por ejemplo de la cabecera y el pie u otro componente que se repita en todas las páginas. Esto nos permite la reutilización de código. Por otro lado cuando se hace un cambio en una de estas partes o componentes hay que compinar el archivo padre que le contenga.
- Nos permite declarar variables y objetos como si en un javascript nos encontraramos. Esto lo hacemos poniendo delante un guión: Ejemplo:
- var title = "Home"
Después para acceder a ellas lo hacemos así:
h1 = title
- También podemos hacer uso de los condicionales para pintar una cosa u otra en función de una variable.
- Podemos hacer un bucle para pintar n elementos por ejemplo, de una lista
Slim
Algunas peculiaridades:
- No utiliza ningún símbolo al inicio de cada sentencia ni etiquetas de cierre. En su lugar utiliza la indentación. Una sentencia mal tabulada puede dar un error en la compilación.
- Etiquetas de rápido acceso configurables.
- Creación de bucles. Por ejemplo:
# for <div id="name"> and . for <div class="name">
- Escapado automático del HTML
Algunas referencias:
Haml
- Su principal diferencia con el resto es que lleva el símbolo % al comienzo de cada línea de código.
- Te permite integrar código Ruby y Rails templates con la extensión .haml.
- Podemos utilizar las variables de Ruby omitiendo las comillas.
Para más detalle aquí os dejo algunas referencias:
Instalación
Como hemos dicho, mientras que Slim y Haml usan Ruby para compilar, Jade está basado en Node.js.
Entre Slim y Haml cabe decir que, aunque usan el mismo motor, Slim puede llegar a ser hasta ocho veces más rápido que Haml.
Jade - Node
Para compilar nuestros archivos Jade lo primero que tenemos que hacer es tener instalado Node.
- Nos vamos a la página de descargas de Node e instalamos la versión correspodiente: https://nodejs.org
- Ahora instalamos Jade. Abrimos la consola de nuestro sistema operativo. Si estamos en Windows vamos al Inicio y escribimos en el cuadro de búsqueda la palabra cmd. Cuando se nos abra la consola escribimos: npm install jade -g y listo, ya tenemos instalado Jade.
- Para compilar nuestros archivos .jade a .html podemos hacerlo manualmente o a través de nuestro editor de texto si éste tiene algún plugin que nos lo permita.
- Si lo hacemos manualmente. Volvemos a abrir la consola y nos movemos donde tengamos nuestro archivo jade a compilar. Una vez dentro escribimos el comando jade seguido del nombre del archivo a compilar, por ejemplo index.jade. Para que jade compile en tiempo real tienes que agregar el comando -w y si quieres que el codigo html se muestre ordenado se añade -P
: jade index.jade -P - Si usamos Sublime Text como editor lo primero que tenemos que tener insladado es el Package Control (ver Package Control). Entonces nos vamos a Preferencias -> Package Control -> Package install. Entonces escribimos Jade y seleccionamos Jade Build. Después vamos a Tools -> Build System y seleccionamos Jade. Cada vez que queramos compilar pulsamos Control + B y nos generará el archivo html correspondiente.
- Si lo hacemos manualmente. Volvemos a abrir la consola y nos movemos donde tengamos nuestro archivo jade a compilar. Una vez dentro escribimos el comando jade seguido del nombre del archivo a compilar, por ejemplo index.jade. Para que jade compile en tiempo real tienes que agregar el comando -w y si quieres que el codigo html se muestre ordenado se añade -P
Slim y Haml - Ruby
Si lo que vamos a usar es Slim o Haml necesitamos tener instalado Ruby.
- Si usamos Windows nos vamos a la página de descargas de Ruby para Windows y descargamos e instalamos la versión correspodiente. En el segundo paso de la instalación debemos activar la segunda opción.
- Ahora instalamos haml o slim según corresponda. Abrimos la consola de nuestro sistema operativo. Si estamos en Windows vamos al Inicio y escribimos en el cuadro de búsqueda la palabra cmd. Cuando se nos abra la consola escribimos: gem install haml o gem install slim respectivamente.
- Para compilar nuestros archivos escribimos en consola: haml index.haml o en su caso slim index.slim
¿Con cuál me quedo?
Los tres ofrecen funcionalidades muy potentes y para decantarse por uno u otro yo me haría estas dos preguntas:
- ¿Qué sintaxis me gusta más?¿Con qué sintaxis me encuentro más cómodo?
- ¿Qué prefiero Node o Ruby?
En mi caso yo elegí Jade ya que suelo trabajar con node.js y su sintaxis me parece muy limpia.