Introducción a HAML con Ruby On Rails

Markup haiku

Puede que tal vez nunca hallas oído hablar de HAML, incluso si llevas ya tiempo como programador web. Tal vez lo hayas visto nombrado en alguna web en inglés y no despertase tu atención. Haiku of HTML dicen. Luego lo miro. Y tal.

Hoy voy a presentar lo que para mi ha sido el avance más importante en la manera de escribir platillas para html desde …. que conozco html.

HAML es, según sus propios creadores, “la belleza de los haiku traída al marcado html”. Es otra forma de crear marcado html, usando la indentación del código no como la buena práctica que suele ser, sino como una obligación que tiene significado propio, logrando así una manera más condensada y gráfica de crear plantillas html. Es una alternativa a las plantillas ERB para RoR, que encaja mejor con la filosofía rails. Un principio de las metodologías ágiles, y tomado de la filosofía Zen es : “Algo no es perfecto cuando no hay nada más que se le pueda poner, sino cuando no hay nada más que se le pueda quitar”.

Veámoslo con un ejemplo:

<div id="perfil" class="ficha">
<div id="avatar" class="borded">
    <img class="centrada" src="avatar.jpg" alt="" /></div>
<div id="nombre" class="campodetexto">
    <label>Nombre</label>

<%= @usuario.nombre %></div>
<div id="ap1" class="campodetexto">
    <label>Primer Apellido</label>

<%= @usuario.apellido1 %></div>
<div id="about" class="areadetexto">
    <label>Acerca de mi</label>

<%= @usuario.aboutme %></div>
</div>

Típica plantilla ERB. Lo más sencillo que puede hacerse. Con correcta indentación, que delimita que bloque está dentro de que tag.
Ahora pensemos a lo minimalista. El tag de cierre nos indica dónde acaba un bloque, y saber así lo que está dentro y lo que está fuera. ¿Existe alguna manera de saber que está dentro y que está fuera? Pues si, lo acabamos de decir: la indentación. Al fin y al cabo la usamos para ver las inclusiones de forma más visual. Hagámosla obligatoria y quitemos el tag de cierre.
¿Qué más se podría quitar que se repite mucho? Miremos el código. Div, div, div, div. Los documentos html casi siempre se dividen con este tag. Podríamos hacer que si no digo lo contrario, todas los tags sean un -div-.
Y aun más: id=””, class=””, id=””, class=””. Son atributos para los tags que usamos constantemente. Podríamos simplificar los id=”” con # y los class=”” con . olvidarnos de las comillas y el igual. Y además, cuando metemos un bloque ruby, hay que usar un tag con <%= . Usemos solo el igual.
Ésto es lo que queda:

#perfil.ficha
	#avatar.borded
		%img.centrada{:src => "avatar.jpg" }
	#nombre.campodetexto
		%label Nombre
		%p= @usuario.nombre
	#ap1.campodetexto
		%label Primer Apellido
		%p= @usuario.apellido1
	#about.areadetexto
		%label Acerca de mi
		%p.textogris= @usuario.aboutme

Bastante más legible. Y más conciso. Y eso que wordpress no resalta la sintaxis de HAML. Y por encima de todo, hemos escrito menos y cuando tengamos que releer esto porque nos hemos equivocado, y siempre nos equivocamos, enseguida vemos donde va cada cosa. El marcado también puede ser bonito.

Usando HAML se logran plantillas con ruby embebido escuetas, concisas y legibles, al tiempo que mantiene la misma flexibilidad que las tradicionales plantillas ERB, y se escribe más rápido. Porque reconócelo, estoy seguro de que igual que yo, tu sientes la misma sensación a caballo entra el orgullo y la autocomplacencia cuando miras el código que has escrito, y ves orden y belleza en él, y si alguien fuese a lograr entenderte y ver lo mismo que tu, irías corriendo a enseñárselo como un niño pequeño le enseña lleno de orgullo a su mamá su ultimo dibujo.

Rails3, en comparación a Rails2, ha ganado en uno de los aspectos en que iba más retrasado, y me refiero a la modularidad. Rails3 permite de forma muy simple personalizar los generadores de plantillas, la capa de mapeado de la base de datos, los módulos de creación de pruebas… Centrémonos en las plantillas.

Partamos de una aplicación nueva

rails new miApp
cd miApp

Una vez se ha creado todo, tenemos que configurar HAML como el lenguaje para plantillas por defecto.
Para ello añadimos en el fichero Gemfile

gem "haml"

ejecutamos el bundler para instalar haml si es que no tenemos esa gema ya instalada, y le decimos a haml que se acomode en el directorio de nuestra aplicación (“.” en mi caso, porque ya estoy en el directorio de la aplicación)

bundle unstall
haml --rails .

Tras esto, cambiamos el generador de plantillas de ERB a HAML, en el fichero config/application.rb

config.generators do |g|
      g.template_engine :haml
end

Y ahora, si tenemos intención de usar el generador para crear vistas, hace falta copiar unas plantillas base. Las podemos clonar de github con este comando

git clone git://github.com/psynix/rails3_haml_scaffold_generator.git lib/generators/haml

Y ahora generamos modelos mediante scaffold con total normalidad

rails generate scaffold miModelo

Ya podemos crear nuestra nueva aplicación usando haml, e incluso las vistas generadas automáticamente por rails lo usarán.
Vale la pena resaltar un dato. Rails3-haml-scaffold-generator , el generador que he recomendado usar, genera las vistas siguiendo una estructura ligeramente distinta a la que viene por defecto con rails. Lo unico que puede despistarnos es que usa por defecto la internacionalización I18n. El autor debió pensar, y estoy de acuerdo, que usar el i18n por costumbre es una buena práctica, pero no debió pensar que el andamiaje se usa para montar una estructura rápida, sin pretensiones de ser la definitiva, y tener que editar el archivo de traducciones cuando invocamos al generador, aunque sea para añadir un par de lineas, toca un poco los huevos. Para los que no quieran hacerlo, cuelgo aquí una versión anterior de el mismo proyecto antes de que se hiciesen esos cambios. Tan solo hay que descomprimir el contenido de ese zip en MyApp/lib.

De todas maneras, en una entrada próxima haré una aproximación a la internacionalización en rails.

La sintaxis de haml es más amplia que lo aqui expuesto, pero funciona para casi todo pasando un hash de opciones a lo ruby-style, por lo que casi no hay ni que cambiar el chip para escribir modelos, controladores o vistas. Un tag más complejo podría hacer que el ID de un div se generase dependiendo del ID de un objeto del modelo, para ello pasa un hash de opciones con un symbol :id => “su_valor”, y en esa cadena puede introducirse entre #{} código ruby para ser interpretado.
Por ejemplo este código haml

.item{:id => "item#{item.id}" }= item.body

suponiendo que el ID de item es 22, genera esté código al navegador

<div id="item22" class="item"> Yo soy el cuerpo de el objeto item</div>

Sencillo, ¿no?

Esto es todo por hoy. Podéis encontrar tutoriales y documentación más extensa (en inglés) en la pagina oficial, http://haml-lang.com/, pero hay una sorpresa más. Haml es el chico, pero tiene una hermana, llamada Sass, que ha crecido rápido y ahora tanto o más guapa que su hermano. Si haml simplifica el marcado html, sass hace lo mismo con CSS.

Eso en la próxima entrada.

Anuncios

, , ,

  1. #1 por Diana H. el junio 5, 2014 - 11:30 am

    Hola Miguel, gracias por tu artículo. Sin embargo, yo no soy programadora web, sino diseñadora y todo esto me resulta un poco complicado. Ya conozco HTML y CSS, pero ahora me gustaría dar el paso a HAML y SASS, pero no sé por dónde empezar… Te lo agradecería un montón si me aclarases un par de dudas:
    · Para aprender Haml es necesario conocer Ruby? Qué tiene qué ver una cosa con la otra?
    · No me preocupa la sintaxis del código (eso lo puedo ir aprendiendo por mi cuenta), lo que se me escapa es cómo empezar de cero, técnicamente hablando… Hay que instalar algo en el ordenador? Lo digo porque sospecho que no es tan fácil como abrir el Sublime y empezar a picar código, sino que hay que hacer algo antes y no sé qué es…
    Sé que estas preguntas pueden parecer un poco tontas, pero he buscado por ahí y no encuentro nada que me lo aclare, porque todos los posts dan por sentado esos “pasos previos” que se necesitan para empezar.
    Muchas gracias por adelantado.

    • #2 por miguelcamba el junio 5, 2014 - 6:37 pm

      Hola.

      Sass puedes utilizarlo desde ya mismo sin ningún problema. Para probarlo solo tienes que instalarlo en la command line (http://sass-lang.com/install), y la utilidad te permitirá convertir ficheros .scss a .css. La utilidad utiliza ruby, por lo que debes tenerlo instalado, pero no tienes que conocer ruby. Me consta que también existe libsass, que está escrita en C, y mucha gente la utiliza sobre node.js

      Para usar Haml tampoco hace falta saber programar ruby, también tiene un utilidad para la command line que transforma de un fichero a otro, pero evidentemente no es nada práctico hacerlo manualmente. Haml se integra perfectamente con frameworks en ruby por razones evidentes, pero estoy seguro de que existen ports de haml que lo integran con cualquier cosa.

      La mejor fuente de información para esto son las páginas oficiales ( http://haml.info y http://sass-lang.com ) y los repositorios de github.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: