HN-Vorstellung: HTMX Playground, zu 100 % im Browser umgesetzt

HTMX Playground

• HTMX Playground ist ein Tool, mit dem man mit HTMX in einer einfachen Code-Sandbox-Umgebung experimentieren kann.
• Es ist ohne zusätzliche Einrichtung sofort nutzbar, und man kann Beispiele ansehen, die ursprünglich von htmx.org übernommen wurden.
• Im Browser selbst kann man Code in einer backendähnlichen Umgebung schreiben, Endpunkte in server.js definieren und eigene Templates rendern.
• Es startet einen Mock-Server, der ausgehende Requests von HTMX abfängt, und bietet eine Request-Verarbeitung und eine Template-Engine, die für Nutzer von Django vertraut wirken.
• Das Projekt ist nicht nur auf HTMX beschränkt, daher lassen sich auch andere Bibliotheken frei ausprobieren.

Speichern und Teilen

• Über den Button „Copy as JSON“ oben rechts lässt sich der Inhalt im JSON-Format kopieren.
• Lädt man den kopierten Inhalt in ein Gist hoch und gibt die Raw-URL unter „Load Playground“ ein, wird die URL der Seite aktualisiert und kann geteilt werden.
• Der Code ist auch auf GitHub verfügbar.

Hinweise

• Es gibt keine Seitennavigationsfunktion.
• Die mobile Unterstützung ist eingeschränkt.
• server.js kann zustandsbehaftet sein, aber wenn der Status in der View on.get("/") aktualisiert wird, kann diese Aktualisierung verloren gehen, da sie beim initialen Laden der Seite über ein separates iframe abgefragt wird.

Verwendete Bibliotheken

• Svelte
• Ace (Code-Editor)
• PollyJS (Mock-Server)
• Nunjucks (Template-Engine)

GN⁺-Meinung

• HTMX Playground ist ein nützliches Tool für Webentwickler, um mit HTMX interaktive Webanwendungen schnell zu prototypisieren.
• Durch die Bereitstellung einer Umgebung, die für Entwickler mit Erfahrung in Backend-Frameworks wie Django leicht zugänglich ist, hilft es dabei, Frontend- und Backend-Entwicklungserfahrungen zusammenzuführen.
• Das Tool bietet Funktionen zum einfachen Speichern und Teilen von Code und kann daher auch für Zusammenarbeit oder Bildungszwecke sehr nützlich sein.

[GN⁺]

Hacker-News-Kommentare

• Dankesworte vom Erfinder von htmx

  • htmx-Erfinder: Der Erfinder von htmx bedankt sich. Er sagt, es sei sehr ermutigend zu sehen, dass Interesse an seinem Projekt besteht und es genutzt wird.

• Bedenken und Fragen zur Nutzung von htmx

  • Sorge um den Entwicklerpool: Ein Nutzer erwog den Einsatz von htmx, hatte jedoch das Gefühl, dass der Entwicklerpool klein sei und die Einstellung entsprechender Entwickler schwierig werden könnte. Er berichtet von der Erfahrung, dass es einfacher gewesen sei, spezialisierte Frontend-Entwickler einzustellen, die mit dedizierten Frameworks vertraut sind, als spezialisierte Full-Stack-Entwickler zu finden. Entwickler scheuten sich davor, komplexen Code anzufassen, und man wolle nicht, dass Backend-Entwickler zum Engpass werden. Er fragt, ob htmx diese Probleme erkennt und wie man sie lösen will.

• Überlegungen zu htmx und Unterstützung für mobile Apps

  • Unterstützung für mobile Apps: Ein Nutzer schreibt, dass ihm das Konzept von htmx gefällt und er begonnen hat, das zugehörige Buch zu lesen. Gleichzeitig mache er sich Gedanken darüber, dass Frontend und Backend umfangreich neu geschrieben werden müssten, sobald Unterstützung für mobile Apps erforderlich werde. Er kenne hyperview.org, merkt aber an, dass für die Anwendungsfälle, die ihn interessieren, eine react-native-App nicht geeignet sei.

• Meinungen zur Wahl des Editors und zur Fehlerausgabe

  • Editor und Fehlerausgabe: Ein Nutzer weist darauf hin, dass die mobile Unterstützung begrenzt sei, und argumentiert, dass statt Ace Editor Monaco Editor verwendet werden sollte. Es wird jedoch erklärt, dass Monaco auf Mobilgeräten absichtlich nicht funktioniert und deshalb Ace verwendet wird. Ein GitHub-Issue-Link stützt diese Aussage.

• Geteilte Erfahrungen mit htmx und Django

  • htmx und Django im Einsatz: Ein Nutzer verwendet maplibre, Django und htmx zusammen und kündigt an, ein Beispiel hochzuladen, um es mit anderen zu teilen.

• Nutzungserfahrung und Feedback zu htmx

  • Nutzung und Feedback zu htmx: Ein Nutzer hat htmx bei der Arbeit verwendet und bewertet es als gut funktionierend. Er plant, es auch künftig zu verwenden, könnte aber auch eine PHP-basierte Version bauen. Er berichtet, dass beim Einfügen von JSON in das URL-Ladefeld mehrfach Arbeit verloren ging, und erwähnt außerdem das Problem, den Browser für Netzwerkanfragen nicht bereinigen zu können, wofür bereits ein Feature-Request existiert.

• Frage zum technischen Support

  • Unterstützung für ActiveX: Ein Nutzer fragt, ob htmx ActiveX unterstützt.

• Ironischer Kommentar zur Wahl von Entwicklungstools

  • Verwendung von Svelte: Ein Nutzer fragt, ob htmx mit Svelte erstellt wurde. Dazu kommt der spöttische Kommentar, wo die MPA-(Multi-Page-Application)-Puristen seien und wie sie wohl reagieren würden.

• Neugier auf die Entwicklung von Offline-Apps

  • Offline-App-Entwicklung: Ein Nutzer fragt sich, ob jemand mit htmx und HTML über Request-Response Offline-Apps baut und innerhalb eines Service Workers einen virtuellen Server definiert.

• Hinweis auf einen Tippfehler in der Website-Beschreibung

  • Tippfehler-Hinweis: Ein Nutzer weist darauf hin, dass in der Beschreibung auf der Startseite der Website ein Tippfehler steht. Er merkt an, dass "intersepts" zu "intercepts" korrigiert werden sollte.