Aprendiendo HAML
Publicado el Lunes, 19 de diciembre de 2011
Haml - markup haiku
Una de las tantas cosas que "me llevé anotadas para aprender" de la pasada RubyConf Uruguay fue HAML.
En Ruby se usa mucho ERB como sistema de plantillas para crear archivos HTML con código Ruby embebido. Lo mismo que provee JSP o PHP. Ahora, el "tema" con erb, es que a pesar de permitir ejecutar código Ruby, uno está obligado a escribir el código HTML.
Ahí entra HAML, un lenguaje de marcado ligero con el cual podemos generar HTML a partir de un sencillo DSL. Haml busca emprolijar las plantillas y deshacerse de los lenguajes "feos" que venimos utilizando en nuestras plantillas HTML. Me resultó sumamente útil para desarrollo web en general, no solo para usar con Ruby.
El código que usa es realmente elegante, lo que se explica con uno de sus principios primarios: El marcado debería ser hermoso.
Haml es una solución real a un problema real. Deja de usar las plantillas lentas, repetitivas y molestas que ni siquiera conoces cuánto odias todavía. Prueba algo nuevo - haz que las plantillas sean divertidas y bellas de nuevo.
Haml puede ser usado dentro de una aplicación web o por su cuenta. Por ejemplo podemos incluirlo en aplicaciones que usan Rails o Sinatra, así como también generar las plantillas desde línea de comando con haml "suelto".
Por ejemplo si tenemos el siguiente archivo index.html.haml:
!!!
%html
%head
%title Página de inicio
%body
%h1 Bienvenidos a la página de inicio
%p Esto es un párrafo de texto
%ul.menu
%li Primer elemento
%li Segundo elemento |
Podemos usar Haml por línea de comando:
Lo que nos generará el archivo index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Página de inicio</title> </head> <body> <h1>Bienvenidos a la página de inicio</h1> <p>Esto es un párrafo de texto</p> <ul class='menu'> <li>Primer elemento</li> <li>Segundo elemento</li> </ul> </body> </html> |
Como dice en el sitio web, aprender Haml es muy fácil y no toma más de 20 minutos. Incluso invitan a los desarrolladores a probar de convertir uno de sus archivos ERB a Haml: "Siente el poder de la tecla Suprimir. Simplifica. Disfruta. Ríete. 20 minutos después, nunca volverás."
Realmente es más rápido, sencillo y elegante que ERB. El ejemplo que muestran en el sitio de inicio de Haml es bastante gráfico:
HAML
#profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio |
ERB
<div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"><%= current_user.address %></div> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div> |
Como ven, es bastante sencillo darse cuenta cómo funciona. Generar tags con .clases e #id's css es muy sencillo. Algo particular que tiene es que usa una sintaxis al estilo Python, en el sentido que no hay que cerrar los tags, simplemente se cierran por indentación. Les recomiendo el tutorial -van a ver que salen andando con Haml en unos pocos minutos- y seguir con la referencia. Hay soporte para varios editores de Texto.
Para poner en práctica los conocimientos, decidí pasar mi sitio web personal de ERB a Haml. La web fernandobriano.com es algo así como un Sandbox de Rails para ir aplicando cosas que quiera aprender a usar. Solía tener un archivo HTML plano con links a los blogs, Linkedin y demás, pero ahora la estoy usando como excusa para desarrollar algo con Ruby de vez en cuando. Si quieren ver el código fuente, está colgado en github: https://github.com/picandocodigo/fb_site
14 comentarios en este post
Feed de comentarios-
Sass - hojas de estilo sintácticamente impresionantes | Picando Código |
29 diciembre. 2013 - 14:30
[…] paso siguiente a aprender HAML fue leer sobre Sass: Syntactically Awesome Stylesheets. ¿Qué es Sass? Para mí: CSS como debe […]
-
Tutoriales en HAML | CLW :: Construyendo La Web |
17 diciembre. 2014 - 22:24
[…] Aprendiendo HAML […]
Máximo Gómez 20 diciembre. 2011 - 12:00
Muy bueno el mini “how to”.
Fernando 20 diciembre. 2011 - 12:34
Gracias, la idea no era mostrar una referencia completa, sino algo para arrancar y que se note que es muy fácil entrarle.
Máximo Gómez 20 diciembre. 2011 - 12:52
Se entendió, y la verdad me aburren las extensas y detalladas documentaciones, esto es perfecto para generar el interés.
jhsilva 20 diciembre. 2011 - 12:30
Me parece realmente sexy el codigo que genera HAML. He estado pensando en usarlo en un nuevo proyecto junto a SASS.
Saludos
Fernando 20 diciembre. 2011 - 12:57
Buena elección, lo próximo en mi lista es aprender también Sass.
¡Saludos!
Rodolfo Pilas 20 diciembre. 2011 - 16:38
A la idea de escribir poco HTML (o abstraerse de) suelo conocerla como WIKI.
Fernando 21 diciembre. 2011 - 00:54
Para layouts es ideal 🙂
Pero para contenido, como dice el comentario de dr.Q, no es tan recomendable.
dklight 27 diciembre. 2011 - 13:56
Ciertamente. De hehco mi blog es un dokuwiki, y casi nadie lo nota. Y mantenerlo es sumamente simple, mucho más que los CMS grandes (WordPress, Jomla, Drupal).
dr.Q 20 diciembre. 2011 - 17:27
Haml está muy bien para hacer estructura y eso, pero usar Haml para contenido es un asco:
http://chriseppstein.github.com/blog/2010/02/08/haml-sucks-for-content/
Fernando 21 diciembre. 2011 - 00:56
Muy buen artículo, ¡gracias!
ushcompu 23 diciembre. 2011 - 09:41
Haml es muy bueno, gran artículo. Probá Slim es similar per mejor sintáctica y técnicamente mejor 😀
Fernando 23 diciembre. 2011 - 11:59
¡Gracias! Ya estoy leyendo sobre Slim, creo que sale otro post al respecto.
¡Saludos!