htmx vs. SPA
Als Webentwickler liegt es in unserer Verantwortung, das beste Werkzeug für die
jeweilige Aufgabe zu finden. htmx vereinfacht in der Tat den technischen Stack
und senkt die Einstiegshürde für angehende Entwickler oder einfachere Projekte.
Für komplizierte Benutzeroberflächen, die eine konsistente Darstellung der Daten
erfordern, bietet der SPA-Ansatz jedoch eine bessere Unterstützung. Anstatt
sich von Trends beeinflussen zu lassen, sollten wir die
Nuancen in diesen Diskussionen anerkennen und unsere Tools mit Bedacht auswählen.
Inhalt:
Eine single-page application (SPA) wird eine Webanwendung bezeichnet, die aus einem einzigen HTML-Dokument besteht und deren Inhalte dynamisch nachgeladen werden.
Die Technologielandschaft entwickelt sich ständig weiter, und im Bereich der Webentwicklung hat in letzter Zeit nichts mehr Aufsehen erregt als htmx. Als Webentwickler erleben wir kontinuierliech, wie eine Vielzahl von Technologien und Praktiken ins Rampenlicht gerückt wurden, nur um dann wieder in der Versenkung zu verschwinden, wenn etwas Besseres auftaucht. Der derzeitige Hype um htmx ist ein Beleg für diesen Zyklus, und viele loben seine Fähigkeit, den Prozess der Erstellung interaktiver HTML-Seiten zu vereinfachen. Aber wie bei allen technischen Diskussionen ist es wichtig zu differenzieren, besonders wenn man htmx mit Single Page Applications (SPAs) vergleicht.
htmx ist eine JavaScript Bibliothek die es, erlaubt
moderne Browserfunktionen direkt von HTML aus zuzugreifen, anstatt Javascript
zu verwenden.
Der htmx hype
htmx bietet einen erfrischenden Ansatz für die Entwicklung von Webanwendungen. Es bringt eine nachweisliche Einfachheit in den Tech-Stack, reduziert den Bedarf an mehreren Sprachen und eliminiert bestimmte Build-Tools. Diese messbare Einfachheit spricht Entwickler an, die einen geradlinigen Ansatz für interaktive Webseiten suchen.
Allerdings hat der Aufstieg von htmx auch eine Welle der Kritik an SPAs ausgelöst, die sie als zu kompliziert und schwerfällig darstellen. Es ist jedoch wichtig anzuerkennen, dass Einfachheit nicht universell ist; was in einem Kontext einfach ist, kann in einem anderen komplex sein.
Einfach ist relativ
Während htmx für die Einfachheit des technischen Stacks optimiert, setzen SPAs auf eine andere Art von Einfachheit - die Einfachheit des UI-Zustnadnds-Managements.
Die Elm-Architektur beispielsweise gewährleistet eine klare Ableitung der Darstellung aus einer einzigen Datenquelle. Ein solches Setup hilft bei der konsistenten Widerspiegelung von Daten in der gesamten Benutzeroberfläche.
Ich bin mir sicher, dass Du auch auf größeren Webplattformen schon einmal auf den folgenden Fehler gestoßen sind:
In der oberen rechten Ecke befindet sich ein Zähler, der die Anzahl der ungelesenen Nachrichten anzeigt. Du folgst einem Link zu einer ungelesenen Nachricht, nur nicht über genau diesen Zähler. Nun wird dieser Zähler aber nur dann aktualisiert, wenn die gesamte Seite neu geladen wird.
Mit einem dedizierten Datenmodell für die Benutzeroberfläche steigt das Vertrauen Benutzeroberflächen bauen zu können, die konsistent genaue Daten wiedergeben.
Das soll nicht heißen, dass SPAs eine Garantie für fehlerfreie Benutzeroberflächen sind, aber die grundlegende Architektur bietet Entwicklern einen robusteren Rahmen, um die Konsistenz der Benutzeroberfläche zu gewährleisten.
Das richtige Werkzeug für die Aufgabe
Bei der Diskussion zwischen htmx und SPA sollte es nicht darum gehen, welches Tool “auf der Welt” ist, sondern darum, die Stärken und Grenzen der beiden zu verstehen. htmx setzt eine niedrigere Einstiegshürde für diejenigen, die mit einfachen Webanwendungen beginnen wollen. Es eignet sich hervorragend für Projekte, die weniger komplizierte Benutzeroberflächen erfordern, wie zum Beispiel ein einfaches Anmeldeformular für einen Newsletter. Für komplexe, interaktive Benutzeroberflächen, bei denen eine konsistente Datendarstellung entscheidend ist, bietet der SPA-Ansatz, insbesondere mit Frameworks wie Elm, eine zuverlässigere Struktur.
Die häufigste Kritik an SPAs is wie kompliziert sie sind. In dem foglenden Video zeige ich wie man inerhalb weniger Minuten ein SPA setup aufsetzen kann, ganz ohne NPM, Webpack und eigentlich sogar ohne JavaScript.