Während es viele akzeptable Programmiersprachen gibt, konzentriert sich die Webentwicklung auf einige wenige zuverlässige Technologien. Das gilt besonders für WordPress.
JavaScript ist für die Plattform noch nicht ausgereift, obwohl die Erwartungen der Nutzer/innen an dynamische und interaktive Websites nach wie vor hoch sind. Frameworks können diese Lücke schließen, aber die Komplexität einiger der populärsten Frameworks kann die Entwicklung deiner Website beeinträchtigen. Hier kommt HTMX ins Spiel. Diese leichtgewichtige Bibliothek verspricht Benutzerfreundlichkeit und Vereinfachung bei der Erstellung moderner Webangebote.
In diesem Artikel werden wir untersuchen, wie HTMX in deinen WordPress-Entwicklungsprozess integriert werden kann. Außerdem erfährst du, wie du mit dieser leistungsstarken und leicht zugänglichen Methode dynamische Inhalte und Interaktivität erstellen kannst.
Wir erklären, was HTMX ist, warum es immer beliebter wird und wie es mit WordPress zusammenarbeitet. Außerdem erhältst du einen praktischen Leitfaden für die Integration und Nutzung von HTMX in WordPress.
Was HTMX ist
Kurz gesagt ist HTMX eine JavaScript-Bibliothek, die die Standard HyperText Markup Language (HTML) erweitert, ohne dass du Vanilla- oder Framework-JavaScript schreiben musst. Mit diesen Erweiterungen kannst du auch auf andere Technologien zugreifen:
- Asynchrones JavaScript und XML (AJAX). HTMX nutzt AJAX, um „asynchrone“ Anfragen an den Server auszuführen. So kannst du die Seite teilweise aktualisieren, ohne sie komplett neu laden zu müssen.
- WebSockets. Du kannst WebSocket-Verbindungen aufbauen und eine bidirektionale Echtzeit-Kommunikation zwischen dem Browser und dem Server ermöglichen.
- Server-Sent Events (SSE). Mit dieser Technologie kann der Server Daten an den Browser senden. Von dort aus kannst du HTMX verwenden, um Seiten in Echtzeit zu aktualisieren.
- CSS-Übergänge. Du kannst CSS-Übergänge integrieren, mit denen du fließende und animierte Aktualisierungen auf deiner Seite vornehmen kannst.
Im Kern zielt HTMX darauf ab, die Erstellung dynamischer, interaktiver Webanwendungen zu vereinfachen. Die wichtigste Funktion ist die Erstellung von GET, POST, PUT, PATCH und DELETE HTTP-Anfragen von HTML-Elementen. Das bedeutet, dass du glatte und reibungslose partielle Seitenaktualisierungen wie bei einer mobilen Anwendung verarbeiten kannst. Alles in allem ist HTMX ein leistungsstarkes Toolkit, mit dem du ein dynamisches Web-Erlebnis schaffen kannst, ohne dass du Unmengen von JavaScript-Code schreiben musst.
Warum alle über HTMX reden
HTMX ist in letzter Zeit in aller Munde, denn die Suchanfragen nach der Bibliothek sind in den letzten fünf Jahren explodiert.
Dieser Popularitätsschub ist zum Teil auf die sozialen Medien und die Sichtbarkeit in Entwicklerforen zurückzuführen. HTMX hat jedoch mehrere Faktoren, die es zu einer attraktiven Entwicklungsoption machen.
- Einfachheit. Da HTMX die vertraute HTML-Syntax verwendet, um dynamische, interaktive Webanwendungen zu erstellen, ist es super einfach zu implementieren und weist fast keine der Komplexität typischer JavaScript-Frameworks auf.
- Leistung. Durch die Minimierung der benötigten JavaScript-Menge kann HTMX schnellere Ladezeiten und eine bessere Leistung als andere Frameworks bieten, insbesondere für mobile Geräte.
- Server-seitiges Rendering. Serverseitiges Rendering ist ideal, wenn du die Ladezeiten der Seite und die Suchmaschinenoptimierung (SEO) verbessern willst. HTMX hat diese Funktion in sein Feature-Set integriert.
- Progressive Verbesserung. Das bedeutet, dass Webseiten interaktiv gestaltet werden, ohne dass die Funktionalität für diejenigen, die JavaScript deaktivieren, beeinträchtigt wird. HTMX arbeitet nach diesen Grundsätzen, so dass auch die Barrierefreiheit gewährleistet ist.
Außerdem erfordert HTMX im Gegensatz zu einigen größeren Frameworks keinen komplexen Build-Prozess oder eine Toolchain. In Kombination mit einem viel geringeren Lernaufwand ist es einfacher, die Bibliothek in deine Projekte zu integrieren.
Diese Vorteile führen dazu, dass HTMX heiß diskutiert und immer mehr integriert wird. Wenn du auf der Suche nach einer unkomplizierten Lösung für die Erstellung interaktiver Webangebote bist, könnte diese Bibliothek deine Wahl sein.
Die Architektur von WordPress im Verhältnis zu JavaScript
Die Geschichte von WordPress mit JavaScript wurde auf der State of the Word 2015 deutlich, als Matt Mullenweg mit dem Satz schloss: „Learn JavaScript deeply.“
Der typische Weg für WordPress-Entwickler/innen war, den Bedarf an interaktiven und dynamischen Komponenten auf einer Website zu erforschen. In den meisten Fällen war jQuery das bevorzugte JavaScript-Framework für WordPress. Sogar die beliebte Website der Harvard Gazette baut auf jQuery auf:
Daher setzt WordPress jQuery standardmäßig ein. Darüber hinaus wird jQuery von vielen Kernfunktionen, Plugins und Themes ausgiebig genutzt. Dieser Ansatz ist konsistent und hat eine breite Unterstützung.
So wie sich die Webentwicklung weiterentwickelt, so verändert sich auch der Ansatz von WordPress in Bezug auf JavaScript. Die Einführung des Block-Editors ging einher mit der Verwendung des React-Frameworks für die Erstellung von Benutzeroberflächen, insbesondere im WordPress-Dashboard.
Die Vor- und Nachteile der aktuellen JavaScript-Implementierung von WordPress
Das bedeutet, dass es eine Mischung aus Frameworks gibt, die im Kerncode von WordPress unterstützt werden. Das hat einige Vor- und Nachteile. Zunächst die positiven Aspekte:
- Es gibt eine weitreichende Kompatibilität für React und jQuery. React ist ein leistungsstarkes und beliebtes Framework. jQuery ist seit langem mit WordPress verbunden.
- Viele Entwickler/innen sind mit den Frameworks vertraut, weil React und jQuery sehr beliebt sind. Außerdem findest du mehr Ressourcen, um beide zu erlernen und Fehler zu beheben.
- WordPress bietet integrierte Unterstützung für AJAX durch
wp_ajax.
Diese Vorteile werden jedoch durch eine Reihe von Nachteilen aufgewogen:
- Wenn du dich auf jQuery verlässt, leidet die Leistung deiner Website, und für manche Anwendungen brauchst du das Framework vielleicht gar nicht.
- Aus Kompatibilitäts- und Sicherheitsgründen sind nicht alle „modernen“ Features und Funktionen von JavaScript in WordPress implementiert. Das kann zu einem Problem werden, wenn du etwas Bestimmtes bauen möchtest.
- Mit der Hinzufügung von React zu einigen Bereichen von WordPress (z. B. den Block- und Site-Editoren) ist die Lernkurve noch höher als je zuvor.
Die aktuelle JavaScript-Architektur von WordPress ist geeignet, wenn du die empfohlenen Frameworks kennst oder die Zeit hast, sie zu lernen. Wenn nicht, wirst du wahrscheinlich eine Lösung suchen, die nicht die Komplexität der typischen Frameworks mit sich bringt und trotzdem ein modernes interaktives Erlebnis im Frontend bietet. Das ist der Punkt, an dem du HTMX in Betracht ziehen solltest.
Warum HTMX für einige WordPress-Entwicklungsaufgaben besser geeignet sein könnte
HTMX bietet einige überzeugende Vorteile, wenn es um die Entwicklung von WordPress geht. Es könnte einen Mittelweg zwischen der Einfachheit von jQuery und dem modernen, leistungsfähigen React darstellen.
Wir haben bereits über einige dieser Aspekte gesprochen, aber fassen wir sie noch einmal kurz zusammen:
- Das „Gewicht“ von HTMX kann im Vergleich zu jQuery und React einen großen Einfluss auf die Leistung haben.
- Die meisten WordPress-Entwicklerinnen und -Entwickler halten sich eher für Experten in HTML und PHP als in JavaScript. HTMX bietet eine leichtere Einstiegshürde, wenn du damit arbeitest, ähnlich wie mit einer Auszeichnungssprache.
- Dank des serverseitigen Renderings arbeiten PHP und HTMX auch gut zusammen, was sich wiederum positiv auf die Leistung auswirken kann.
- Obwohl HTMX eine „neuere“ Bibliothek ist, kannst du sie leichter integrieren und dich mit ihrer Funktionsweise vertraut machen. Das wird sich positiv auf deinen Arbeitsablauf auswirken.
Bei der WordPress-Entwicklung gefällt uns auch die Leichtigkeit, mit der du neue Funktionen für eine Website als Prototyp erstellen kannst. Du kannst schnell komplexe neue Funktionen entwickeln, indem du innerhalb des bestehenden HTML-Codes programmierst. Von dort aus hast du die Flexibilität, bei Bedarf React-Komponenten oder ein wenig jQuery einzubauen.
Auch die progressiven Verbesserungsprinzipien von HTMX sind interessant. Zugänglichkeit sollte ein zentraler Bestandteil deiner Designstrategie sein, und mit HTMX kannst du Interaktivität aufbauen, ohne sie für diejenigen zu unterbrechen, die JavaScript im Browser deaktivieren wollen.
Ein großer Vorteil von HTMX ist, dass es keine speziellen serverseitigen Einstellungen erfordert. Du kannst dein HTMX-Markup mit jedem Host verwenden – auch mit Kinsta.
Angesichts der hochwertigen Leistung unserer Hosting-Angebote sollte eine Website, die HTMX nutzt, rasend schnell laufen. Das wirkt sich auf deine SEO-Kennzahlen, die Besucherzahlen, die Entwicklungsdauer, den Arbeitsablauf bei der Fehlersuche und die gesamte Entwicklungskette aus.
Typische Anwendungsfälle für HTMX
Wir haben es im letzten Abschnitt schon angedeutet, aber HTMX wird keine Bibliothek sein, die du als direkten Ersatz für eines der bekannteren JavaScript-Frameworks verwendest. Stattdessen wird sie am besten mit den bereits vorhandenen Frameworks zusammenarbeiten, um die Last dort zu schultern, wo es nötig ist.
Das bedeutet, dass du HTMX für bestimmte Aufgaben einsetzen wirst, für die jQuery und React vielleicht nicht optimal sind. Bevor wir uns mit der Implementierung von HTMX in WordPress beschäftigen, stellen wir dir drei gängige Szenarien vor, in denen die Bibliothek WordPress verbessern kann.
Partielles Neuladen von Seiten
Der wichtigste Anwendungsfall für HTMX ist die Möglichkeit, partielle Seitenaktualisierungen mit minimalem Aufwand durchzuführen. Das könnte für viele Entwickler eine große Sache sein, besonders für schnelle Mockups und Prototypen. HTMX könnte Ergebnisse in Produktionsqualität liefern.
Es könnte dir zum Beispiel helfen, eine Live-Suchfunktion auf deiner Website zu implementieren:
Die HTMX-Beispielbibliothek geht auch auf die Methodik für die Durchführung von Echtzeitaktualisierungen in anderen Inhaltsbereichen der Seite ein. In dem Beispiel wird ein Kontaktformular mit einer Tabelle der verfügbaren Kontakte verwendet, die aktualisiert wird, sobald ein Benutzer einen neuen Eintrag vornimmt. HTMX bietet eine Reihe von eleganten Möglichkeiten, dies zu erreichen:
<div id="table-and-form">
<h2>Contacts</h2>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody id="contacts-table">
...
</tbody>
</table>
<h2>Add A Contact</h2>
<form hx-post="/contacts" hx-target="#table-and-form">
<label>
Name
<input name="name" type="text">
</label>
<label>
Email
<input name="email" type="email">
</label>
</form>
</div>
Das Formular verwendet die Attribute hx-post und hx-target, um sein Ziel zu erweitern. Du könntest auch HTMX-Attribute verwenden, um Formulareingaben nach einem Fehler oder einem anderen Validierungsversuch, der Aktualisierungen verwendet, zu erhalten:
<input form="binaryForm" type="file" name="binaryFile">
<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
<button type="submit">Submit</button>
</form>
Hier platzierst du die Eingabe für die Binärdatei außerhalb des primären Formularelements und verwendest die Attribute hx-swap und hx-target.
Dynamisches Laden
Dieser Ansatz zum dynamischen Aktualisieren und Laden kann auch für häufigere Aufgaben geeignet sein. Nimm zum Beispiel das unendliche Scrollen:
<tr hx-get="/contacts/?page=2"
hx-trigger="revealed"
hx-swap="afterend">
<td>Agent Smith</td>
<td>[email protected]</td>
<td>55F49448C0</td>
</tr>
Das Attribut hx-swap fungiert als „Listener“ für das Attribut hx-trigger. Sobald ein Nutzer das Ende der Liste erreicht hat, lädt HTMX die zweite Seite mit den Kontakten auf einer unendlichen Basis.
Die gleiche Methode kannst du auch für die Funktion „Lazy Loading“ anwenden:
Auch hier werden die Attribute hx-get und hx-trigger verwendet, um einen HTMX-Übergang zu starten, der das Diagramm mit einer langsamen Einblendung lädt.
Datenpräsentation
Es dürfte keine Überraschung sein, dass sich HTMX hervorragend für die Präsentation von Informationen auf dem Bildschirm mit interaktiven oder anderweitig dynamischen Elementen eignet.
Du kannst zum Beispiel alle Arten der Inhaltsfilterung implementieren, wie z. B. die Auswahl von Werten. Dabei werden die Optionen in einer Liste auf der Grundlage der Optionen in einer anderen Liste aufgefüllt:
Genauso einfach kannst du auch modale Dialoge oder Registerkarten für die Benutzeroberfläche einrichten. Hier siehst du auch, wie HTMX mit anderen Bibliotheken und Frameworks wie Bootstrap zusammenarbeitet:
Diese Flexibilität erstreckt sich auch auf die Implementierung von Registerkarten. Es gibt zwei Möglichkeiten, dies zu tun: entweder durch die Kombination von Vanilla JavaScript und HTMX oder durch die Verwendung der HATEOAS-Prinzipien (Hypertext As The Engine Of Application State):
Es gibt noch viele weitere Möglichkeiten, HTMX für Frontend-Seitenelemente zu nutzen, wobei der Kern auf der Serverseite liegt. Im nächsten Abschnitt geben wir dir die Werkzeuge an die Hand, mit denen du deine eigene Vision in WordPress umsetzen kannst.
Wie du HTMX in WordPress integrierst
Wenn du HTMX in deine WordPress-Website einbinden möchtest, ist das eine gute Nachricht: Es geht schnell und problemlos. Im Folgenden stellen wir dir eine Vorgehensweise in drei Schritten vor. Wir werden nicht den gesamten Prozess und den Code zur Entwicklung von Funktionen für WordPress behandeln, aber wir werden alle wichtigen Punkte ansprechen, die du beachten musst.
Außerdem sollte ein Großteil des Prozesses, insbesondere der erste Schritt, bekannt sein, wenn du bereits für WordPress entwickelt hast.
1. Enqueue HTMX in deinem PHP-Code
Wie bei jedem zusätzlichen Skript für WordPress musst du die HTMX-Bibliothek in den Code deines Themes oder Plugins einbinden.
wp_enqueue_script('htmx-script', 'https://unpkg.com/[email protected]/dist/htmx.min.js', array(), '2.0.0', true);
Eine objektiv gute Idee ist es jedoch, dieses Enqueue in eine Funktion zu verpacken, die auch einen Block in WordPress enqueued und registriert. Das hängt natürlich davon ab, ob du in deinem Projekt mit dem Block-Editor arbeiten musst.
Um HTMX in die Warteschlange zu stellen, musst du die gesamte Funktion mit add_action aufrufen. Auf die Verwendung von Hooks und Filtern wirst du später bei der Arbeit mit AJAX-Anfragen zurückkommen.
2. Hinzufügen von HTMX-Elementen zu deinen WordPress-Vorlagendateien
Anhand unserer Anwendungsfälle siehst du, dass HTMX das entsprechende Markup in der HTML-Datei benötigt, um AJAX-Anfragen zu verarbeiten und auszulösen. Die Bibliothek verwendet typische HTTP-Anfrageattribute, um ihre eigenen zu bilden – GET, POST, PUSH, PATCH und DELETE – mit einem hx- Präfix:
hx-post
Die AJAX-Anfragen von WordPress verwenden den Endpunkt admin-ajax.php, den du dir merken solltest! Die typischen Elemente, die du mit HTMX erstellst, stellen eine AJAX-Anfrage, senden sie an ein Zielelement und verarbeiten möglicherweise einen Trigger.
Mit dem Attribut hx-target kannst du angeben, wohin das Ergebnis deiner Anfrage gesendet werden soll. Das kann eine andere Seite, eine bestimmte div oder etwas anderes sein. Stell dir das wie HTML-Anker-Tags vor:
<input type="search"
name="search" placeholder="Search..."
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
…HTMX verwendet „natürlich“ und „nicht-natürlich“, um eine Aktion zu definieren. Zum Beispiel löst submit ein Formular aus, und das ist ein natürliches Element-Ereignis. Für nicht-natürliche Elementereignisse verwendest du das Attribut hx-trigger. Diese Auslöser gehören zu den komplexeren Teilen von HTMX, sind aber dennoch einfach zu verstehen.
Du könntest zum Beispiel einen Trigger verwenden, um ein Eingabefeld zu überwachen:
…
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
hx-trigger="input changed delay:500ms, search"
hx-indicator=".htmx-indicator">
…Wenn du den Inhalt eines Eingabefeldes änderst, wird eine Aktualisierung an anderer Stelle auf der Seite ausgelöst. Ein anderes Beispiel: Du könntest ein einmaliges Ereignis auslösen, das auf einer untypischen Aktion basiert, z. B. der Eintritts des Cursors in einen Teil des Bildschirms:
<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
[Here Mouse, Mouse!]
</div>
Das könnte dich dazu inspirieren, Anwendungen wie Pop-ups oder andere modale Boxen zu erstellen. Bevor du diese jedoch in Aktion sehen kannst, musst du die AJAX-Anfrage verarbeiten.
3. Die AJAX-Anfrage bearbeiten
Schließlich musst du die AJAX-Anfrage auf der Serverseite bearbeiten. Bei WordPress ist es von Vorteil, wenn du all diese Vorgänge in einer separaten Datei speicherst. Du kannst sie nennen, wie du willst, aber ajax-functions.php ist aussagekräftig und klar genug.
Für diesen Teil der Nutzung von HTMX musst du deine PHP-Kenntnisse unter Beweis stellen. Die Verarbeitung deiner AJAX-Anfragen ist einzigartig für dein spezielles Projekt. Hier verbindest du die Attribute, die du in deinen Vorlagendateien angibst, mit der serverseitigen Verarbeitung.
Natürlich musst du das sowieso tun, unabhängig davon, ob du mit HTMX, Vanilla JavaScript oder etwas anderem programmierst. Hier ist ein Pseudocode, der zeigt, wie das aussehen könnte:
function my_search_action() {
$search_term = sanitize_text_field( $_POST['search'] );
$args = array(
's' => $search_term,
'post_type' => 'post',
'posts_per_page' => 5
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
echo '<h2>' . get_the_title() . '</h2>';
echo '<p>' . get_the_excerpt() . '</p>';
endwhile;
else:
echo 'No results found.';
endif;
wp_reset_postdata();
wp_die();
}
Trotzdem ist das vielleicht nicht relevant und sieht auch nicht so aus wie der Umgang mit AJAX in deinem eigenen Projekt. Mit den gleichen Fähigkeiten, die du für die Erstellung von Blockvorlagen, die Erweiterung von Plugins mit PHP und mehr brauchst, kannst du auch deine eigenen AJAX-Request-Handler und -Funktionen erstellen.
Tipps zur Verwendung von HTMX mit WordPress
Obwohl die Verwendung von HTMX eine der einfachsten Möglichkeiten ist, dynamische Inhalte mit WordPress zu implementieren, muss sie dennoch sorgfältig verwaltet und berücksichtigt werden. Es bietet auch einige Möglichkeiten, dein Entwicklungserlebnis zu verbessern.
Der erste Tipp bezieht sich auf die „Reife“ von HTMX. Da es sich um eine neue Bibliothek für die Plattform handelt, ist sie noch nicht so gut integriert wie z. B. jQuery.
HTMX hat eine gute Dokumentation, aber es gibt nicht so viele Ressourcen für die Kombination der Bibliothek mit WordPress. Das bedeutet, dass du dich selbst darum kümmern musst, damit alles funktioniert, ohne das Sicherheitsnetz einer bestehenden Community.
Einer der wichtigsten Ratschläge, die wir dir geben können, ist, deine Funktionen zunächst in ein Plugin zu integrieren. Das gibt dir Struktur und erleichtert die Verwaltung, während du nach Bugs und anderen Integrationsfehlern suchst.
Wenn wir schon beim Thema WordPress sind, solltest du auch verstehen, wie die Datei admin-ajax.php mit dem Rest des Ökosystems verbunden ist, da viele Interaktionen mit ihr stattfinden.
Obwohl HTMX sehr leistungsfähig ist, solltest du sicherstellen, dass die AJAX-Nutzung so gering ist, dass sie sich nicht auf die Ladegeschwindigkeit deiner Website oder die Suchmaschinenoptimierung auswirkt. Auch das Debuggen von Anfragen sollte ein fester Bestandteil deines Workflows sein, insbesondere die XMLHttpRequest (XHR)-Metriken in den Entwicklertools deines Browsers.
Dies ist die Aufzeichnung der Anfrage- und Antwortdaten, die du zur Fehlersuche bei AJAX-Anfragen und API-Aufrufen (Application Programming Interface) verwenden wirst. Da HTMX noch nicht eng mit WordPress integriert ist, kann die Fehlersuche eine größere Herausforderung sein als bei anderen JavaScript-Frameworks.
Zusammenfassung
Für WordPress-Entwickler/innen, die dynamische, interaktive Seitenelemente erstellen wollen, ohne dass komplexe JavaScript-Frameworks ihre Zeit dominieren, präsentiert sich HTMX auf spannende Art und Weise. Es lässt dich innerhalb von HTML bauen und bietet eine schlanke Alternative zu jQuery und React, während es dir trotzdem moderne Interaktivität bietet.
In der Praxis wirst du HTMX neben diesen anderen Frameworks einsetzen, da es nicht für alle Aufgaben geeignet ist. Trotzdem ist es einfach zu implementieren und bietet dir eine schnelle Möglichkeit, die interaktiven Elemente deiner Website zu testen – und könnte sogar deine Produktionsversion werden.
Erscheinen HTMX und WordPress für dich wie ein ansprechendes Duo? Lass uns deine Meinung in den Kommentaren wissen!
Schreibe einen Kommentar