Mi nombre es Fernando Briano y soy programador.

Aprendiendo HAML

Haml - markup haiku

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:

[fernando@hoth ror]$ haml index.html.haml index.html

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

Feed de comentarios | Url para Trackbacks | Suscribirse a los posts por correo electrónico

14 comentarios en este post

  1. Avatar Máximo Gómez 20 diciembre. 2011 - 12:00 pm Google Chrome 14.0.835.202 GNU/Linux

    Muy bueno el mini “how to”.

  2. Avatar jhsilva 20 diciembre. 2011 - 12:30 pm Google Chrome 14.0.835.163 GNU/Linux

    Me parece realmente sexy el codigo que genera HAML. He estado pensando en usarlo en un nuevo proyecto junto a SASS.

    Saludos

  3. Avatar Rodolfo Pilas 20 diciembre. 2011 - 4:38 pm Firefox 8.0.1 Mac OS

    A la idea de escribir poco HTML (o abstraerse de) suelo conocerla como WIKI.

  4. Avatar dr.Q 20 diciembre. 2011 - 5:27 pm Safari 534.52.7 Mac OS

    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/

  5. Avatar ushcompu 23 diciembre. 2011 - 9:41 am Firefox 9.0 GNU/Linux 64 bits

    Haml es muy bueno, gran artículo. Probá Slim es similar per mejor sintáctica y técnicamente mejor 😀

  1. WordPress Sass - hojas de estilo sintácticamente impresionantes | Picando Código | 29 diciembre. 2013 - 2:30 pm

    […] paso siguiente a aprender HAML fue leer sobre Sass: Syntactically Awesome Stylesheets. ¿Qué es Sass? Para mí: CSS como debe […]

  2. WordPress Tutoriales en HAML | CLW :: Construyendo La Web | 17 diciembre. 2014 - 10:24 pm

    […] Aprendiendo HAML […]

Dejar un comentario

Toasty!