HTMX könnte eine große Sache für WordPress sein
Der Aufbau eines umfassenden Benutzererlebnisses im Browser kann eine anspruchsvolle Aufgabe sein, die häufig eine erhebliche Menge an JavaScript-Code erfordert. Mit steigenden Anforderungen und Ambitionen unserer Anwendung wächst auch die Komplexität unseres JavaScript-Codes. Daher ist es nicht verwunderlich, wie oft Entwickler unsere Denkweise und das Schreiben von JavaScript-Apps überarbeitet haben.
Tage seit dem letzten JS-Framework.
Entwickler von WordPress-Plugins haben es noch schlimmer. Die Umgebung, auf die wir abzielen, ist weder ein Server, den wir kontrollieren, noch einer mit vollständiger Kontrolle über die gesamte Seite. Während es durchaus möglich ist, ein JavaScript-Framework erfolgreich in einem WordPress-Plugin zu verwenden, kann es auch bemerkenswert einfach sein, am Ende ein Projekt zu erhalten, dessen Umfang und Komplexität über das hinausgehen, was Sie beabsichtigt oder erwartet haben.
Aber was wäre, wenn es nicht so sein müsste? In diesem Artikel untersuchen wir, wie moderne Web-Benutzeroberflächen mit JavaScript erstellt werden, welche Schwierigkeiten Entwickler haben und welche Alternative HTMX bietet. Insbesondere werfen wir einen Blick darauf, warum HTMX und WordPress eine himmlische Kombination sein könnten.
Wie wir hierher gekommen sind
Vor JavaScript waren Browser im Grunde nur verherrlichte Dokumentenleser. Daher handelte es sich bei den meisten Erlebnissen im Web um „Multi-Page Applications“, kurz MPAs. MPAs sind Webanwendungen, die aus mehreren HTML-Dokumenten bestehen, eines für jede Seite in der Anwendung. Während der Benutzer die Anwendung verwendet, werden ihm verschiedene Dokumente mit unterschiedlichen verfügbaren Aktionen angezeigt.
MPAs sind sehr einfach zu bauen. Die Navigation erfolgt über Tags zum Verknüpfen mit anderen Dokumenten, und Benutzereingaben können mit einem erfasst werden
Unsere Seite wird einzeln und leer gerendert
const rootEl = document.getElementById("books-app");const root = ReactDOM.createRoot(rootEl);root.render(My Books
... );}Wie listen wir also die Bücher auf, die in der Datenbank gespeichert sind? Der Code dafür befindet sich auf dem Server, daher brauchen wir eine Möglichkeit, ihn aufzurufen und das Ergebnis zu erhalten.
Dazu können wir eine JSON-API vom Server aus bereitstellen. Die React-App kann dann eine Anfrage an die URL unserer API stellen, die Bücher im JSON-Format empfangen und dann die Liste rendern. Nehmen wir für dieses Beispiel an, dass wir der WordPress-REST-API einen Endpunkt hinzugefügt haben:
GET https://my-wp-site.com/wp-json/books{ "books": [ { "id": 15, "title": "Mistborn", "author": "Brandon Sanderson", }, { "id": 44, "title": "The Hobbit", "author": "J. R. R. Tolkien", }, ]}Anschließend können wir eine React-Komponente schreiben, die die Bücher abruft und als Liste darstellt:
function BookList() { const [books, setBooks] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect( function () { setIsLoading(true); fetch("https://my-wp-site.com/wp-json/books") .then((res) => res.json()) .then((data) => setBooks(data.books)) .else((error) => setError(error)) .finally(() => setIsLoading(false)); }, [setBooks, setIsLoading], ); if (isLoading) { return Loading...; } if (error) { return Error: {error}; } return ( - {books.map((book) => ( {book.title} ))}
);}Diese Lösung ist jedoch zu naiv und führt zu einer groben Benutzererfahrung. Es berücksichtigt keine Statusänderungen nach dem Aufheben der Bereitstellung der Komponente, das Zwischenspeichern der Antwort, das Wiederholen fehlgeschlagener Abfragen oder das Überschreiben eines neueren Status durch einen veralteten Status. Tatsächlich die Art und Weise, wie wir es verwenden fetch() In einem React-Effekt wird generell davon abgeraten.
In vielerlei Hinsicht kann dies schlimmer sein als eine herkömmliche MPA. Um dies richtig zu machen, müssen wir noch ein paar weitere Dinge in unserem Client implementieren. Oder, realistischer, verwenden Sie Pakete von Drittanbietern.
Aber all dies scheint ein unverhältnismäßig großer Aufwand zu sein, nur um eine Liste von Büchern zu erstellen. Müssen wir wirklich eine JavaScript-App und eine JSON-API erstellen, um ein reibungsloses Benutzererlebnis zu schaffen?
Vergleichen wir dies mit einem MPA, bei dem das Rendern der Buchliste in nur wenigen Zeilen PHP-Code ohne Abhängigkeiten erfolgen kann:
- url ?>"> title ?>
Aber das ist natürlich kein fairer Vergleich. Bei dieser Bücherliste handelt es sich lediglich um statisches HTML. Es reagiert nicht auf Zustandsänderungen oder Benutzereingaben.
Wenn wir ein SPA-ähnliches Erlebnis haben und gleichzeitig den HTML-Code auf dem Server rendern möchten, wo unser Code direkten Zugriff auf die Datenbank hat, müssen wir einen Weg finden, damit der vom Server gerenderte HTML-Code seinen Weg zum Browser findet und ersetzen Sie die vorherige Liste der Bücher. Aber ohne jeglichen JavaScript-Code ist dies derzeit nicht möglich, sodass wir ohnehin in den sauren Apfel beißen und JavaScript verwenden müssten.
Aber wir müssen es nicht selbst schreiben.
Wir stellen HTMX vor
HTMX ist eine kleine JavaScript-Bibliothek, die in erster Linie eines tut: HTML erlauben, neues HTML vom Server anzufordern. Dies geschieht mithilfe neuer Attribute, die es uns ermöglichen, HTMX mitzuteilen, woher der neue HTML-Code stammt, womit er ausgetauscht werden soll und was den Austausch auslöst. Es fungiert als Brücke zwischen unserem HTML-Server und der Seite im Browser.
Dies ist eine völlig andere Denkweise über SPAs, da wir keine Client-JavaScript-Anwendung erstellen, um die aktuelle Seite zu aktualisieren. Stattdessen fügen wir einfach einige HTML-Attribute hinzu, um HTMX mitzuteilen, wie sich die Seite ändern soll, wenn bestimmte Ereignisse eintreten.
Auch ohne HTMX können Sie bereits mit HTML die Darstellung auf dem Bildschirm ändern, wenn auch in sehr begrenztem Umfang. Sie kennen diese HTML-Funktion bereits: den Humble Linkelement.
View booksÜber ein Link-Element erhält der Browser alle für die Navigation notwendigen Informationen. Wenn darauf geklickt wird, übernimmt der Browser die href vom Element aus, stellt eine Anfrage an diese URL, lädt die Antwort herunter und ersetzt, vorausgesetzt, dass sie HTML enthielt, den Inhalt der Seite durch den neuen HTML-Code.
Der
xjilmv