Aprendiendo HAML

Publicado el Lunes, 19 de diciembre de 2011
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

Posts relacionados

Publicado en: Programación Web | Etiquetas: ,
Los posts de Picando Código pueden seguirse por:

14 comentarios en este post

Feed de comentarios
  1. 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 […]

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

    […] Aprendiendo HAML […]

Dejar un comentario

Archivo

Categorías

Toasty!