Was ist Htmx? Wie verwendet man Htmx?
Was ist Htmx? Wie verwendet man Htmx?
Htmx, das direkten Zugriff auf AJAX, CSS-Übergänge, WebSockets und serverseitige Ereignisse direkt aus HTML bietet, hat der Webentwicklungs-Community neue Begeisterung gebracht. In diesem Artikel werden wir Htmx detailliert erklären: Was ist Htmx? und wie wird es verwendet?
Was ist Htmx?
Htmx, eine Abkürzung für HTML und XMLHttpRequest, ist eine leichtgewichtige und unabhängige JavaScript-Bibliothek, die die Einfachheit und Leistungsfähigkeit von Hypertext nutzt, um hochmoderne Benutzeroberflächen zu erstellen. Htmx bietet direkten Zugriff auf AJAX, CSS-Übergänge, WebSockets und serverseitige Ereignisse direkt aus HTML. Es unterstützt Technologien wie CSS-Animationen und WebSockets, zielt jedoch hauptsächlich darauf ab, die Handhabung von HTTP-Anfragen zu vereinfachen.
Htmx macht JavaScript-Funktionalität über HTML-Attribute verfügbar. Hier ein einfaches Codebeispiel:
<a href="/about" hx-get="/about">Über uns</a>
In diesem Code sehen Sie das hx-get Attribut, das von einem normalen HTML-Code abweicht. Wenn Sie auf diesen Link klicken, sendet die Htmx-Bibliothek eine AJAX-Anfrage und lädt die Zielseite, ohne dass der Browser vollständig aktualisiert werden muss.
Wie verwendet man Htmx?
Htmx adressiert nicht das Verhalten einer gesamten Anwendung, sondern spezifische Aufgaben innerhalb von Webanwendungen oder Websites. Ein großer Vorteil der Bibliothek ist die einfache Inbetriebnahme. Sie können die Bibliothek herunterladen und in Ihre Website einbinden oder einfach einen Link in Ihren HTML-Code hinzufügen:
Wenn Sie es lokal auf Ihrem Computer ausprobieren möchten, müssen Sie einen Webserver wie Apache installieren, da das file:-Protokoll keine AJAX-Anfragen zulässt.
Wie kann ich Htmx lernen?
Sie können Htmx von den Grundlagen bis hin zur Expertise auf der offiziellen Website htmx.org lernen. Dort finden Sie alle angebotenen Funktionen, deren Anwendungen und Beispielcodes. Außerdem können Sie auf Plattformen wie github.com Beispielprojekte einsehen. Zum Beispiel gibt es hier ein Beispiel für unendliches Scrollen (neue Inhalte werden beim Herunterscrollen der Seite geladen), wie es bei Plattformen wie Instagram, X und Facebook verwendet wird, das mit Htmx umgesetzt wurde.