bigardone.dev

Ahorra tiempo generando tus vistas con Haml

Jan 15, 2013 · 3 min read
code
haml
html

Después de haber escrito sobre Sass y CoffeScript, y teniendo cubierto con ambas tanto la generación de las hojas de estilo como el javascript de una aplicación de manera simple y con una sintaxis más intuitiva, no podía deja atrás al origen de todo esto, Haml, que viene a ser lo mismo pero para la generación de las plantillas HTML para las vistas.

Sintaxis

Estamos ante otro lenguaje de sintaxis simplificada, que nos ayuda a codificar de manera más rápida usando los menos caracteres posibles, y utilizando la indentación del documento para ir construyendo el árbol de elementos que generará nuestro HTML final. Olvidate de abrir etiquetas y de cerrarlas, de usar atributos como id="" o class="", de volverte loco intentado encontrar donde cerrabas no se qué elemento, etc.

Vamos a ver un ejemplo muy sencillo de html estático:

<div class="surf-spot" id="salinas">
  <header>
    <h3>Playa de Salinas</h3>
    <ul class="options">
      <li>
        <a class="view" title="View spot details" href="/surf_spots/5">View</a>
      </li>
      <li>
        <a class="edit" title="Edit spot details" href="/surf_spots/5/edit">Edit</a>
      </li>
    </ul>
  </header>
  <div class="details">
    <dl>
      <dt class="type">Type</dt>
      <dd>Beach brake</dd>
      <dt class="swell-dir">Swell direction</dt>
      <dd>NW</dd>
      <dt class="wind-dir">Wind direction</dt>
      <dd>S, SW, SE</dd>
    </dl>
  </div>
</div>

¿Y como sería su versión en Haml? Muy sencillo:

#salinas.surf-spot
  %header
    %h3 Playa de Salinas
    %ul.options
      %li
        %a.view{title: "View spot details", href: "/surf_spots/5"} View
      %li
        %a.edit{title: "Edit spot details", href: "/surf_spots/5/edit"} Edit
  .details
    %dl
      %dt.type Type
      %dd Beach brake
      %dt.swell-dir Swell direction
      %dd NW
      %dt.wind-dir Wind direction
      %dd S, SW, SE

Como puedes ver, es mucho más simple. Como norma general, si el elemento que quieres añadir es un div, con una clase o identificador, no hace falta poner el nombre del tag, simplemente basta con usar el nombre de la clase precedido por un "." o una "#" si se trata de un identificador. En caso de tener ambos, puedes usarlos también. En el caso de que no se trate de un simple div, sino de cualquier otro elemento html, deberás poner su nombre precedido de un "%", pudiendo añadirle clases e identificador igual que antes. Para el resto de atributos del elemento, solo tienes que incluirlos dentro de un hash "{}", justo después del nombre del mismo. Es muy importante la indentación de los elementos, ya que es lo que va a usar para anidar los elementos unos dentro de otros.

¿Dónde lo uso?

Inicialmente se creó para ser usado con Ruby pudiendo añadirlo a tus proyectos de Ruby on Rails como generador de plantillas por defecto gracias a la gema ham-rails. Pero ya hay muchas implementaciones para otros lenguajes como JAVA, .NET, PHP y demás. La verdad es que desde que he empezado a usarlo, cada vez me gusta más y lo uso siempre que puedo aunque sea para desarrollar simple html estático. Para compilarlo uso CodeKit, una de esas joyas que solo hay en Mac, de la que ya hablaré en otro post ;)