HAML – Markup wie es sein soll

In diesem Artikel möchte ich einen kurzen Einblick in eine meiner Lieblingssprachen mit dem lustigen Namen HAML vorstellen. Salopp formuliert ist HAML nichts anderes als HTML ohne die ganzen nervigen Sachen wie z.B. Tags, die man separat schließen muss. Mehr dazu in diesem Artikel.

Was ist HAML?
Die Markupsprache HAML ist eine äußerst attraktive Art, HTML-Code in einer Ruby on Rails-Umgebung (oder PHP / ASP) zu schreiben.

Die Grundprinzipien von HAML
1. Markup soll schön und gut lesbar sein
2. Markup soll DRY sein
3. Markup soll richtig eingerückt sein
4. Markup soll die Dokumenten-Struktur wiederspiegeln

Und konkret?
Man benötigt z.B. im Gegensatz zu HTML (oder ERB in Rails) keine schließenden Tags, da die Hierarchie eines Dokuments durch Einrückungen von 2 Leerzeichen pro Hierarchieebene erfolgt. Das ist erstens übersichtlicher und zweitens spart das Zeit. Beispiel gefällig?

<!DOCTYPE HTML>
<html>
<head>
  <title>Beispiele für Verweise</title>
</head>
<body>
  <div id="content">
    <h1>Eine Überschrift</h1>
    <div class="link_block">
        <a href="http://www.wikipedia.de/">Wiki</a>
        <br />
        <a href="http://www.wikipedia.de/">Wiki</a>
    </div>
    <p>Dies ist ein Absatz.</p>
  </div>
  <footer>
    <ul>
      <li>
        <a href="/">Linktext</a>
      </li>
      <li>
        <a href="./">Noch ein linktext</a>
      </li>
    </ul>
  </footer>
</body>
</html>

Und hier dasselbe Beispiel in HAML:

!!! 5
%html
  %head
    %title Beispiele für Verweise
  %body
    #content
      %h1 Eine Überschrift
      .link_block
        %a{:href => "http://www.wikipedia.de/"} Wiki
        %br/
        %a{:href => "http://www.wikipedia.de/"} Wiki
      %p Dies ist ein Absatz.
    %footer
      %ul
        %li
          %a{:href => "/"} Linktext
        %li
          %a{:href => "./"} Noch ein linktext

Das ist jetzt auf den ersten Blick vielleicht noch nicht Raketenwissenschaft, aber wir haben in diesem simplen Beispiel bereits 9 Zeilen Code gespart. Oder in Zeichen ausgedrückt haben wir statt 375 Zeichen lediglich 254 Zeichen geschrieben, also ein Drittel weniger Code. Klingt das sympathisch?

Grundregeln für Umsteiger
Wer den Umstieg machen möchte, dem seien folgende Regeln als „Schnellstarter“ ans Herz gelegt:

1. DIV mit ID erstellen
<div id=“content> wird zu #content

2. DIV mit Klasse erstellen
<div class=“content“> wird zu .content

3. Standard Tags erstellen
<p> wird zu %p
<br> wird zu %br

4. Link erstellen
<a href=“#“ target=“_blank“>Das ist ein Link</a> wird zu
%a{:href => „#“, :target => „_blank“} Das ist ein Link

5. Bestehenden Code konvertieren
HTML und ERB lassen sich ganz einfach mit folgendem Tool in HAML konvertieren: HTML2HAML

Und wie gehts weiter?
Das war selbstverständlich nur eine kurze Zusammenfassung von HAML. Wer jetzt Appetit hat, umzusteigen, startet am besten gleich mit diesem Tutorial für HAML.

Mehr zur Verwendung und eine detaillierte Doku findet man in der großartigen Referenz zu HAML.

Mein Fazit zu HAML
HAML ist für mich mittlerweile unverzichtbar geworden. Man schreibt schnell Code, es ist (meistens) übersichtlich und man ist mittlerweile dankbar, wenn man nicht HTML oder ERB schreiben muss. Nicht zuletzt dank der Filter bleibt genug Flexibilität übrig, um doch mal einen Schnippsel ERB, Markdown oder andere Formate in HAML zu verwenden. Wer also effizient Markup innerhalb von Ruby on rails oder PHP schreiben will, sollte sich HAML als ernstzunehmende Alternative zum klassischen HTML/ERB angucken. Ich wurde jedenfalls nicht enttäuscht.

Nutzt ihr bereits HAML? Welche Vorteile und Nachteile ergeben sich aus der Verwendung von HAML?

5 Comments on “HAML – Markup wie es sein soll

  1. Hi Alex,
    das Konstrukt „!!!“ erzeugt im aktuellen Haml-Release (3.1.3) einen (X)HTML Doctype. Für den HTML 5 Doctype gibt es „!!! 5″.

    Ich habe schon häufiger Haml angetestet, war aber nie zufrieden, weil damit viele Dinge letzten Endes komplizierter als nötig wurden. Hier ein guter Artikel dazu: http://chriseppstein.github.com/blog/2010/02/08/haml-sucks-for-content/

    Grundsätzlich lässt sich Haml ja aber auch mit HTML-Fragmenten mischen (s. Artikel), oder die Filter (die du auch erwähnt hast) nutzen. Die Puristen mögen da jetzt aufschreien, aber auf diese Weise erspart man sich viele Schmerzen.

    Der Mehrwert von Haml hält sich meiner Meinung nach in Grenzen, aber das bisschen Syntax lernen ist ja auch keine große Hürde. Demnach bleibt es eine Frage des Geschmacks. Sass (auch von Hampton Catlin) liefert dem gegenüber schon handfestere Vorteile.

  2. Hi Gregory,
    danke für deinen Hinweis, dass die Doctype Deklaration sich verändert hat! Ändere es gleich ab.

    Ansonsten stimme ich mit dir übrigens überein, dass HAML für Formatierung von Content schnell an die Grenzen kommt. Aber dafür gibts ja den Markdown-Filter.

    Sicherlich ist es eine Geschmacksfrage, aber ohne HAML möchte ich persönlich nicht mehr arbeiten. Aus o.g. Gründen.

    Auch bei SASS sind wir denke ich auf einer Wellenlänge. =)

    Gruß, Alex

  3. Oh… Sieht auf jeden Fall gut aus 😀
    Hab gleich mal den Syntax für Sublime Text 2 gedownloadet.
    Frage: Gibts da auch so Tools wie bei {Less}? (Also instant umwandlung)

  4. Auf jeden Fall übersichtlicher und schneller editierbar, aber ob es wirklich ein Mehrwert ist, bleibt fraglich. Trotzdem interessanter Beitrag!

    Gruß
    Marcus

  5. Sieht super aus die Sprache. Ich hab mich bis jetzt mit Java, HTML, C# und C++ beschäftigt. Aber dann habe ich jetzt ja meine nächste. 😀

    Gruß,
    Kiki

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>