Local First HTMX pt1

Überblick

Im Internet wird häufig behauptet, dass die Dinge schlimmer geworden sind und immer schlimmer werden. Auf jeder Website gibt es eine Vielzahl schrecklicher, schnell ladender Anzeigen, jede Suchmaschine wirft eine beschissene KI-Zusammenfassung vor Ihr Suchergebnis, jede Website/Webanwendung scheint immer langsamer geworden zu sein. Für all das kann ich keine Lösung anbieten, aber ich kann ein besseres Paradigma für das Design von Websites und Web-Apps aufzeigen. Dieses Paradigma ist lokal zuerst.

Local First ist ein Designprinzip für Web-Apps, bei dem die Benutzeroberfläche und die Daten am selben Ort sind und Änderungen an den Daten mit dem Remote-Server synchronisiert werden. Lokale First-Apps fühlen sich schnell und leistungsstark an, da sie keine Netzwerk-RTT zwischen der Aktion eines Benutzers und dem Rendern des Ergebnisses der Aktion erfordern. Ich empfehle, mit linear.app herumzuspielen, um zu erfahren, wie sich eine erstklassige lokale First-App anfühlt. Ich werde nicht viel Zeit damit verbringen, von schlechten Web-Apps zu überzeugen – denn wenn Sie unwissend und glücklich sind, möchte ich Ihnen dieses Glück nicht verderben.

Wenn Sie mit Jira- oder Github-Problemen vertraut sind, sollten Sie sofort erkennen können, welchen großen Unterschied eine lokale erste App machen kann. Jira ist langsam, weil es meines Wissens einfach langsam ist und viele Daten langsam lädt. Wenn man wegklickt und dann zurückgeht, muss man das alles neu laden nochmal die gleichen Daten. Github ist eine SSR-Webanwendung, was bedeutet, dass der HTML-Code auf dem Server generiert und dann an Sie gesendet wird. Das bedeutet, dass jede Interaktion normalerweise einen vollständigen Roundtrip zwischen Ihrem Browser und dem Server erfordert, was normalerweise sehr auffällig ist. Ironischerweise schneidet Githubs langsamer SSR meiner Erfahrung nach viel besser ab als Jira – sie machen unterschiedliche Dinge, aber meine Güte, ich hasse es, Jira zu verwenden. Ich kann nur hoffen, dass ich Linear eines Tages auch bei der Arbeit nutzen kann und es genauso schnell ist wie heute.

Ich mache hier eine Pause und stelle nur klar, dass fast jede App-Architektur bei schlechter Implementierung äußerst langsam sein kann. Ich behaupte mit Nachdruck, dass die meisten Websites, Webanwendungen usw., die wir täglich besuchen, schlecht implementiert sind. Es gibt eine Vielzahl von Techniken, die in all diesen unterschiedlichen Architekturen eingesetzt werden können (traditionelles SPA, SSR usw.), aber „Local First“ bietet als Architektur den größten Vorteil, wenn es um die Leistung geht.

Meme-gesteuerte Entwicklung

Das war ernster, als ich es beabsichtigt hatte, also lasst uns in etwas Meme Driven Development (MDD) eintauchen. Kommen wir zum Hauptteil dieses Beitrags und sprechen über Local First HTMX.

HTMX ist... nun ja, ein Meme und möglicherweise auch ernst, ich bin mir nicht sicher, ob es jemand wirklich weiß. HTMX ist ein Anti-Javascript-Javascript-Frontend-Framework/eine Javascript-Frontend-Bibliothek (IDK-Frontend-Leute verwenden diese Begriffe sehr locker). Noch wichtiger ist, dass es ein wirklich gutes Meme ist und das ist der Schlüssel zu MDD. Deshalb dachte ich, ich sollte zuerst HTMX und Local kombinieren, um etwas wirklich Schreckliches und doch Schönes zu schaffen. Ich empfehle diesen Ansatz nicht unbedingt, aber ich freue mich, Ihnen mitteilen zu können, was ich getan habe, um die erste Local First HTMX Todo-App zu erstellen.

HTMX ist nicht das richtige Framework, aber vielleicht doch

HTMXs Ziel ist es, die Frontend-Entwicklung zu vereinfachen und gleichzeitig ein gutes Maß an Interaktivität aufrechtzuerhalten. Die Grundidee von HTMX besteht darin, dass Ihr HTML vom Backend gerendert wird – à la Server Side Rendering. Der Fachbegriff lautet Hypermedia als Zustandsmotor von HATEOS. Wenn Sie sich erinnern, dass SSR (das für jede Interaktion eine RTT zum Server benötigt) Leistungsprobleme hat und dazu führen kann, dass sich Websites träge anfühlen (es ist schwer, gegen die Lichtgeschwindigkeit anzukämpfen). Wenn Sie nur etwas Interaktivität einstreuen, kann es funktionieren. Aber und das ist die Kernidee von Local First HTMX – Sie müssen den HTML-Code nicht im Backend rendern. Sie können einen „Server“ erstellen, ihn zu WASM kompilieren und im Browser ausführen. Dies würde Ihnen die Schnelligkeit eines erstklassigen Javascript Local First SPA ohne JS – geschweige denn mit JS – bieten. Das Ziel besteht nicht darin, JS zu vermeiden, sondern eine einfachere App zu haben.

Architekturübersicht

Um es noch einmal zusammenzufassen: Wir erstellen eine Local First HTMX-App, indem wir unseren SSR-Code in WASM kompilieren und ihn dann in einem Service Worker ausführen. Lassen Sie mich kurz und möglicherweise falsch ein paar Dinge über Browser erklären. Es gibt einen Hauptthread, in dem normalerweise Ihre JS- und HTML-Sachen passieren. Der Hauptthread hat Zugriff auf das DOM und kann tatsächlich Inhalte rendern. Browser haben viele Funktionen hinzugefügt, aber ich möchte zwei erwähnen. Der erste sind Web-Worker, mit denen Sie Code in einem anderen Thread ausführen können, der über eingeschränkte Berechtigungen verfügt (kein Zugriff auf das DOM). Der zweite ist ein Service-Worker – der einem Web-Worker ähnelt, aber einen wichtigen Unterschied aufweist. Ein Servicemitarbeiter kann so konfiguriert werden, dass er alle Abrufanfragen abfängt.

Der Servicemitarbeiter kann mit ihnen machen, was er will, indem er ihnen Proxys sendet, den Cache durchsucht oder die Anfrage selbst bearbeitet. Das ist es, was ich ausnutzen möchte – ich möchte alle Abrufanfragen weiterleiten und optional HTML rendern und zurücksenden.

Eine einfache HTMX-Anfrage sieht in etwa so aus

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button>

Normalerweise würde dies eine HTTP-Anfrage an den Server senden, aber wir möchten diese Anfrage im Service Worker abfangen, die Anfrage bearbeiten und HTML zurückgeben. Dann kann der Servicemitarbeiter im Hintergrund Daten mit dem Server synchronisieren und gleichzeitig seinen lokalen Datenspeicher verwalten. In einem Folgebeitrag werde ich die Implementierungsdetails besprechen, wie ich das gemacht habe, einige Probleme, auf die ich gestoßen bin, und dann über einige weitere Ideen sprechen.

Bleiben Sie dran.

Das obige ist der detaillierte Inhalt vonLocal First HTMX pt1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!