Dynamisch

HTMX: Der neueste Trend in Web Development

HTMX (HyperText Markup eXtensions) ist eine Bibliothek, die es ermöglicht, Daten über reguläres HTML zu senden und dynamische Inhalte auf Webseiten zu aktualisieren, ohne die gesamte Seite neu zu laden.

Was ist HTMX? #

Wer in den letzten Wochen und Monaten die News im Bereich Web Development verfolgt hat, ist sicher bereits über den Begriff HTMX gestolpert. Dabei handelt es sich um eine sehr schlanke Javascript Library, die Entwickler:innen einige nützliche Werkzeuge in die Hände legt.

Ich habe mich in den letzten Wochen damit befasst und möchte einen Überblick darüber geben, was HTMX ist und welche Fragen sich mir dazu gestellt haben.

Verwendung von HTMX #

HTMX ermöglicht es, jedem HTML-Element sogenannte hx-tags zuzuweisen, die steuern, wie das Element mit Daten interagieren soll. Zum Beispiel:

<div hx-get="/interesting-content" hx-trigger="load, every 1s">
  Loading
</div>

Hier gibt es zwei hx-Tags: hx-get definiert die Adresse, an die die Anfrage gesendet werden soll, und hx-trigger definiert, wann dies geschehen soll (beim Laden und dann jede Sekunde). Diese Tags werden auf ein <div>-Element angewendet, das normalerweise keine Netzwerkfunktionalität hätte.

HTMX registriert im Hintergrund Event-Handler, die AJAX-Anfragen senden und die Antwort vom Server mit dem aktuellen Inhalt des Containers austauschen.

Kann ich HTMX in bestehenden Seiten verwenden? #

HTMX kann sehr einfach über einen CDN-Link oder einen Package Manager wie npm oder yarn eingebunden werden. Hier genügt ein kurzer Blick in die Dokumentation.

Um eine bestehende Seite mit HTMX zu erweitern, kommt der hx-boost-Tag zum Einsatz. Angenommen, eine Seite verwendet noch kein HTMX und enthält einige Links, so kann man den hx-boost-Tag auf den obersten gewünschten Container anbringen und durch Vererbung werden alle darin enthaltenen Links und Formulare geboostet.

<section id="News" hx-boost="true" hx-select="#News">
  <div class="content">
    ...
  </div>
  <nav class="pagination">
    <ul class="pagination-list">
      <li class="pagination-item">
        <a href="/news" class="active">1</a>
      </li>
      <li class="pagination-item">
        <a href="news/p2" class="">2</a>
      </li>
      <li class="pagination-item">
        <a href="news/p3" class="">3</a>
      </li>
      <li class="pagination-item">
        <a href="news/p4" class="">4</a>
      </li>
    </ul>
  </nav>
</section>

Hier sieht man eine News-Liste. Sie enthält einen Container für den Inhalt und Links für die verschiedenen Seiten. Beim Klick auf diese Seiten wird normalerweise die ganze Seite neu geladen. Durch den hx-boost-Tag werden alle im geboosteten Container aufgerufenen Requests zu AJAX-Anfragen, durch den hx-select-Tag wird trotz einer Antwort vom Server, die die vollständige neue Seite (nicht nur die News-Liste) enthält, nur die News-Liste mit dem neuen Inhalt ausgetauscht.

Wie mache ich den Umstieg auf HTMX? #

Häufig wird nach einer Antwort gesucht, wie man HTMX als Alternative für andere Frontend-Frameworks wie zum Beispiel React oder Vue verwenden kann, um dynamische Seiteninhalte zu erstellen.

Meistens kommunizieren Seiten, die mit diesen Frameworks erstellt wurden, mit einem Backend über eine Schnittstelle, die Daten in einem strukturierten Format zurückliefert, zum Beispiel JSON oder eine GraphQL-Schnittstelle. Diese Daten werden dann an Komponenten übergeben, die Logik enthalten, um sie im Browser darzustellen.

Da HTMX die Antworten vom Server direkt in den DOM einfügt, funktioniert es nicht direkt mit solchen Schnittstellen, daher müssen die Antworten vom Server im HTML-Format kommen.

HTMX mit JSON APIs? #

Was, wenn man den Umstieg auf eine HTMX-Seite machen will, aber die API nicht darauf ausgelegt ist? Oder wenn man in der Situation ist, eine Seite zu bauen, die an eine API anbindet, welche gar nicht in der eigenen Hand liegt?

Hier kommt die client-side-templates Extension ins Spiel. Diese Erweiterung ermöglicht es, Elementen Templates mitzugeben, die die erhaltenen Daten aufbereiten und in HTML umformen, bevor diese in das Dokument eingefügt werden.

Wie behandle ich HTMX Requests serverseitig? #

Zuletzt möchte ich noch auf das Verarbeiten von HTMX Anfragen im Backend eingehen. Hierbei sind HTMX Header, die im Request mitgeschickt werden, sehr hilfreich. Dafür möchte ich noch einmal die Seite mit der News-Section als Beispiel heranziehen. Bisher hat eine Anfrage immer die ganze Seite zurückgeliefert und der Browser musste entscheiden, welche Elemente aus dem DOM ausgetauscht werden müssen.

Sofern ein Backend aber darauf ausgelegt ist, mit HTMX Requests umzugehen, kann dieses darauf reagieren und nur Teile der Seite ausliefern, die benötigt werden.

Ein Request, der über HTMX abgesendet wurde, kann einige Header beinhalten: HTMX Request Headers

Als Erstes können wir den Header HX-Request="true" auslesen, um zu sehen, ob es sich um einen HX-Request oder einen regulären Request handelt. Bei einem regulären Request wird wie gewohnt die ganze Seite zurückgegeben, somit funktioniert die Seite weiterhin auch, wenn JavaScript auf dem Client deaktiviert wurde.

Weitere Header helfen uns, um zu entscheiden, welchen Teil der Seite wir zurückgeben. In diesem Fall können wir HX-Target verwenden, dieser Header enthält das im hx-tag angegebene Target. Somit weiß das Backend, es handelt sich um einen HX-Request mit dem Target News und gibt somit nur die News-Section zurück.

Mein Fazit #

HTMX hat in mir große Neugierde geweckt. Es bietet sich aus meiner Sicht extrem gut an, um Inhalte auf Websites mit sehr geringem Aufwand dynamisch zu machen. Ich kann es sehr für Website-Projekte empfehlen, hier ist React oder Vue meist nicht die richtige Wahl, trotzdem möchte man dynamische Inhalte. Da solche Dinge mit JavaScript und AJAX oftmals etwas mühsam umzusetzen sind und durch einen einfachen hx-tag ersetzt werden können, spart man sich hier viel Aufwand und erhält tolle Ergebnisse.

Natürlich verbietet HTMX einem nicht, JavaScript zu verwenden. Es hilft jedoch dabei, sich vieles an Code zu sparen und somit das Frontend schlank zu halten. Komplexe Anwendungen brauchen weiterhin viel Logik, diese bleibt einem nicht erspart. Die Logik wandert hierbei einfach ins Backend, welches dann entscheidet, welche Daten zurückgegeben werden.

Für mich ist HTMX ein interessanter Richtungswechsel. Früher wurden Anwendungen häufig auf diese Weise gebaut: Der Client fordert etwas an, der Server berechnet und gibt entsprechende Daten zurück. Später drehte sich der Spieß um und Schnittstellen wurden sehr allgemein, die Logik, die Daten von den Schnittstellen darzustellen, wanderte großteils in das Frontend. Jetzt dreht sich der Wind erneut und viele Entwickler:innen scheinen wieder zur ursprünglichen Ansatzweise zurückzukehren.

Hx-Tags machen das Schreiben von Triggern und Targets sehr einfach. Ich wünschte allerdings, es gäbe eine Trennung zwischen dem Markup und den Triggern. Ich fände es schön, die Tags über Ids oder Klassen mit den Elementen zu verbinden, um ähnlich wie bei CSS die Styles und die Logik vom Markup zu trennen.

Auf htmx.org findet ihr eine Liste von Beispielen, die zeigen, wie HTMX eingesetzt werden kann — hier sind auch einige interessante Anwendungsfälle dabei!

Solltet ihr Fragen oder Anmerkungen zu diesem Artikel haben, dann meldet euch gerne und ich werde versuchen, diese so bald wie möglich zu behandeln! Ich bin neugierig, ob ihr auch schon Erfahrungen mit Projekten, in welchen HTMX zu Einsatz kommt, hattet und was eure Meinungen dazu sind!