htmz – ultrakleines HTML-Framework

 (leanrada.com)
21 Punkte von GN⁺ 2024-02-21 | 3 Kommentare | Auf WhatsApp teilen
  • Ein minimalistisches HTML-Mikroframework, mit dem sich modulare und dynamische Web-Benutzeroberflächen auf ebenso einfache Weise wie mit plain HTML erstellen lassen
  • Es macht genau eine Sache: HTML-Ressourcen können von jedem Element auf der Seite geladen werden
    • Dadurch lassen sich Teile der Seite aktualisieren und Seitenfragmente ersetzen
  • Insgesamt nur 166 Byte groß, verwendet ausschließlich pures HTML, ist frei von Abhängigkeiten und benötigt weder JS-Bundles noch ein Backend, spezielle Attribute, eine DSL oder Custom Elements
  • Interagiert mit dem echten DOM und verwendet weder VDOM noch Click-Listener, AJAX oder fetch
  • Man muss nur ein Inline-HTML-Snippet als iframe hinzufügen
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>

Grundlegende Verwendung

  • Um htmz zu verwenden, benötigt man einen Hyperlink (oder ein Formular) mit einem href-Attribut (bzw. action bei Formularen), das auf eine Ressourcen-URL zeigt, sowie einen Ziel-ID-Selektor.
  • Es sieht so aus, als würde das URL-Fragment als Ziel-ID-Selektor wiederverwendet, aber da das URL-Fragment in diesem Kontext nicht anderweitig verwendet wird, kann es dafür genutzt werden.

Was genau macht es?

  • htmz bietet genau eine Funktion: HTML-Ressourcen in ein beliebiges Element innerhalb einer Seite zu laden.
  • Die Idee ist nicht neu; Web-Seiten in unabhängig neu ladbare Teile aufzuteilen gibt es bereits seit Mitte der 1990er-Jahre.
  • htmz ist eine Generalisierung von HTML-Frames und kann HTML-Ressourcen in jedes Element innerhalb einer Seite laden.

Fortgeschrittene Verwendung

  • Im aktuellen HTML5 können nur die Elemente und als Ziel für htmz angegeben und aufgerufen werden.
  • Mit dem Element kann htmz als Standardziel für alle relativen Links festgelegt werden.
  • Wenn man lieber einen echten Zielwert verwendet, kann man einen Hack nutzen, bei dem der Ziel-ID-Selektor direkt im target-Attribut selbst steht.

Scripting / Interaktion

  • Wenn mehr Interaktivität benötigt wird, kann JavaScript verwendet werden, die begleitende Skriptsprache von htmz.
  • htmz schließt weder das Schreiben von JS noch die Nutzung von UI-Bibliotheken aus, und mit htmz lassen sich Formularwerte weiterhin über normale HTTP-Formulare absenden.

Erweiterbarkeit

  • Wenn erweiterte Selektoren, Fehlerbehandlung oder mehrere Ziele benötigt werden, können Entwickler dies nach Bedarf erweitern.

FAQ

  • htmz ist ein iframe mit dem Namen "htmz"; aufgerufen wird htmz, indem eine URL über das iframe geladen wird.
  • htmz fungiert als Proxy-Ziel und leitet die Antwort an das angegebene Ziel weiter.
  • htmz parst das DOM nicht fortlaufend, sucht nicht nach speziellen Attributen oder Syntax und hängt keine Listener an das DOM an.
  • htmz ist ein HTML-Mikroframework und verwendet nur ein Minimum an JS.
  • htmz ist ein Snippet; die Abkürzung steht für 'Html with Targeted Manipulation Zones'.
  • Das Projekt entstand als Reaktion auf htmx und war ein Experiment dazu, ob sich Load-Link-Target-Funktionalität im heutigen Web auch ohne htmx umsetzen lässt.
  • Trotz seiner winzigen Größe wirkt htmz erstaunlich leistungsfähig; die wichtigste Einschränkung ist, dass pro Antwort nur ein einziges Ziel möglich ist.

Meinung von GN⁺

  • Innovativer Ansatz: htmz bietet einen innovativen Ansatz für die Webentwicklung, indem es die Komplexität von Frameworks reduziert und Web-Oberflächen mit reinem HTML aufbaut. Das bedeutet eine Form der Webentwicklung, die selbst für Junior-Softwareingenieure leicht zugänglich ist.
  • Balance aus Performance und Einfachheit: Die extrem leichte Größe von 166 Byte und die abhängigskeitsfreie Struktur können die Performance von Web-Seiten deutlich verbessern. Gleichzeitig bietet htmz eine Einfachheit, mit der sich effektive Web-Seiten erstellen lassen, ohne komplexe JavaScript-Frameworks lernen zu müssen.
  • Die Zukunft der Webentwicklung: htmz liefert eine interessante Perspektive auf die Zukunft der Webentwicklung. Es zeigt, wie die Weiterentwicklung von Web-Standards und -Technologien Entwicklern einfachere und effizientere Werkzeuge bereitstellen kann.

Verwandte Beiträge

3 Kommentare

 
joyfui 2024-03-06

Wow, das ist wirklich originell, haha. Im Link steht, dass es selbst weder eine Bibliothek noch ein Framework ist, sondern einfach nur ein Snippet ... hehe
 
savvykang 2024-02-21

Fortgeschrittene Verwendung: Im aktuellen HTML5 scheinen nur die Elemente und kein HTML-Escaping anzuwenden Derzeit scheint kein HTML-Escaping angewendet zu werden
 
GN⁺ 2024-02-21
Hacker-News-Kommentare

  • Zusammenfassung des ersten Kommentars:

    • Positive Reaktion auf die Idee, benannte iframes und zielgerichtete Formulare für serverseitig gerenderte Seiten und Widgets mit begrenztem Stilbereich zu verwenden.
    • htmz scheint diese Idee gut umzusetzen.
    • Es wird betont, gute Ideen nicht aufzugeben, sondern sich auf Ausgereiftheit und Exzellenz zu konzentrieren und die Idee gut zu vermitteln.
    • Wird als großartiger Hack bewertet, der zeigt, dass Browser SPA nativ bereitstellen können.
    • Eine beeindruckende Demonstration von jemandem, der die Plattform gut versteht.
    • Die Meinung, dass das Vanilla-Web einfach und leistungsfähig sein sollte.
    • Positive Einschätzung dazu, das gegebene Material des Webs maximal auszunutzen.
    • Lob für die Kommunikations- und Marketingfähigkeiten des Erstellers.

  • Zusammenfassung des zweiten Kommentars:

    • Ein Hack, der zeigt, dass Browser SPA nativ bereitstellen können.
    • Es braucht nur einige wenige Attribute, um iframes zu vermeiden.
    • Könnte nützlicher sein, um einen Punkt zu beweisen, als als tatsächliches Werkzeug.
    • Hinweis darauf, dass es im Vergleich zu dem, was htmx bietet, zu komplex ist.

  • Zusammenfassung des dritten Kommentars:

    • Es wird eine Erfahrung aus der Entwicklung eines HTML-basierten E-Mail-Clients um 2001 geteilt.
    • Dabei wurden versteckte iframes verwendet, um Daten vom Server zu laden und das DOM zu manipulieren.
    • Damals war die Browser-Unterstützung nicht ausreichend, aber der grundlegende Mechanismus ist derselbe.
    • Positive Bewertung dafür, dass es als kompaktes Paket ohne viele Bibliotheken umgesetzt wurde.
    • Könnte für die meisten Anwendungsfälle geeigneter sein als heute weit verbreitete Frontend-Frameworks wie React.

  • Zusammenfassung des vierten Kommentars:

    • Starke Behauptung, dass das Ersetzen des DOM durch eine Antwort Teil der Plattform sein sollte.
    • Vorschlag eines ersten Schritts für ein Element, das externe Inhalte deklarativ in eine Seite laden kann.
    • Es wird erwähnt, dass HTML Elemente unterstützen sollte, die Ziel eines Links sein können.

  • Zusammenfassung des fünften Kommentars:

    • Lob für eine beeindruckende Demonstration von jemandem, der die Plattform wirklich versteht.
    • Wahrscheinlich nichts, was man tatsächlich verwenden würde, aber dennoch großartig.

  • Zusammenfassung des sechsten Kommentars:

    • Vorschlag, this. in Inline-Event-Listenern zu entfernen, um den Code noch weiter zu verkleinern.
    • Ein Tipp, mit dem sich im Snippet 10 Byte sparen lassen.

  • Zusammenfassung des siebten Kommentars:

    • Hinweis darauf, dass durch die Verwendung von target möglicherweise keine elegante Degradation wie bei htmx erfolgt, wenn JS deaktiviert ist.
    • Ausdruck einer idealistischen Sicht auf Situationen mit deaktiviertem JS.

  • Zusammenfassung des achten Kommentars:

    • Hinweis darauf, dass die Wiederverwendung des <slot>-Elements auf diese Weise eine schlechte Idee ist.
    • Im Browser hat <slot> ein sehr spezifisches Verhalten, und unabhängig davon, was die Bibliothek macht, wird es durch die Kinder des Host-Elements ersetzt.
    • Es wird erwähnt, dass für solche Situationen bereits das <output>-Element existiert.

  • Zusammenfassung des neunten Kommentars:

    • Hinweis auf Verbesserungsbedarf im Demo-Bereich.
    • Wenn man auf „Tabs“ klickt und dadurch den Beispielcode ändert, werden zwar History-Events hinzugefügt, aber die URL wird nicht aktualisiert.
    • Kritik daran, dass mit dem Anspruch „einfach nur HTML“ grundlegende Regeln von Web/UX verletzt werden.

  • Zusammenfassung des zehnten Kommentars:

    • Erinnert an pjax; pjax verwendet statt iframes XHR und standardmäßig pushState, damit der Zurück-Button funktioniert.