本地優先級 HTMX pt1

概述

網路上有一種常見的說法，事情已經變得更糟，而且還在繼續變得更糟。每個網站上都有大量可怕的跳轉加載廣告，每個搜尋引擎都會在您的搜尋結果前面拋出蹩腳的人工智慧摘要，每個網站/網路應用程式似乎都變得越來越慢。我無法為所有這些問題提供解決方案，但我可以為網站和網頁應用程式設計指出一個更好的範例。此範例是本地優先。

本地優先是 Web 應用程式的設計原則，其中 UI 和資料位於同一位置，資料的變更與遠端伺服器同步。本地優先應用程式感覺敏捷且高效能，因為它們不需要使用者操作和呈現操作結果之間的網路 RTT。我建議嘗試使用 Linear.app 來體驗一流的本地第一應用程式的感覺。我不會花太多時間試圖說服人們相信糟糕的網路應用程式 - 因為如果你無知而快樂，我不想破壞這種幸福。

如果您熟悉 Jira 或 Github 問題，您應該能夠立即看出本地優先應用程式的差異有多明顯。 Jira 很慢，因為據我所知，它只是慢並且它加載大量數據很慢，如果你點擊離開然後返回，你必須重新加載所有數據再次相同的數據。 Github 是一個 SSR Web 應用程序，這意味著 html 在伺服器上生成，然後發送給您。這意味著任何互動通常都需要瀏覽器和伺服器之間的完整往返，這通常非常明顯。諷刺的是，根據我的經驗，Github 緩慢的 SSR 表現比 Jira 好得多——它們做不同的事情，但天哪，我討厭使用 Jira。我只希望有一天我能夠在工作中使用 Linear，並且它會像今天一樣快。

我將在這裡暫停並澄清一下，如果實施不當，幾乎任何應用程式架構最終都會變得非常緩慢。我強烈認為我們每天訪問的大多數網站、網路應用程式等都實施得很差。在所有這些不同的架構（傳統 SPA、SSR 等）中可以採用多種技術，但在效能方面，本地優先作為架構提供了最大的優勢。

模因驅動的開發

這比我預想的要嚴重，所以讓我們深入研究一些 Meme 驅動開發 (MDD)。讓我們進入本文的正題，談談Local First HTMX.

HTMX 是......嗯，一個迷因，也可能很嚴重，我不確定是否有人真正知道。 HTMX 是一個反 javascript 的 javascript 前端框架/函式庫（idk 前端人們非常寬鬆地使用這些術語）。更重要的是，它是一個非常好的模因，這是 MDD 的關鍵。所以我想我應該先將 HTMX 和 local 結合起來，創造出一些真正可怕但美麗的東西。我不一定推薦這種方法，但我很高興分享我為創建第一個 Local First HTMX Todo 應用程式所做的工作。

HTMX 不是正確的框架，但也許是

HTMX 的目標是簡化前端開發，同時仍保持良好的互動性。 HTMX 的整體想法是，您的 HTML 將由後端渲染 - 類似於伺服器端渲染。技術術語是超媒體作為 HATEOS 的狀態引擎。如果您還記得 SSR（每次互動都需要到伺服器的 RTT）有效能問題，並且可能導致網站感覺緩慢（很難對抗光速）。如果你只是加入一些互動性，它就可以發揮作用。但這是 Local First HTMX 的關鍵思想 - 您不必在後端渲染 HTML。您可以建立一個“伺服器”並將其編譯為WASM並在瀏覽器中運行。這將為您提供一流的 Javascript Local First SPA 的所有敏捷性，而無需任何 JS——更不用說 JS。我們的目標不是避免 JS，而是擁有一個更簡單的應用程式。

架構概述

回顧一下，我們正在透過將 SSR 程式碼編譯為 WASM 然後在 Service Worker 中執行來建立本機優先 HTMX 應用程式。讓我簡短且可能不正確地解釋一些有關瀏覽器的事情。有一個主線程，這是 JS 和 HTML 內容通常發生的地方。主執行緒可以存取 DOM 並且可以實際渲染內容。瀏覽器添加了許多功能，但我想提兩個。第一個是 Web Worker，它允許您在具有有限權限（無法存取 DOM）的不同執行緒中執行程式碼。第二個是 Service Worker - 它類似於 Web Worker，但有一個重要的區別。服務工作者可以設定為攔截所有 fetch 請求。

Service Worker 可以透過代理它們、查看快取或處理請求本身來對它們執行所需的操作。這就是我想要利用的 - 我想要代理所有獲取請求，並可以選擇渲染 HTML 並將其發回。

基本的 HTMX 請求看起來像這樣

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

通常這會向伺服器發送 HTTP 請求，但我們希望在 Service Worker 中攔截此請求，處理請求並傳回 HTML。然後，在後台，服務工作執行緒可以與伺服器同步數據，同時維護其本機資料儲存。在後續文章中，我將回顧我如何做到這一點的實作細節、我遇到的一些問題，然後再討論一些進一步的想法。

敬請期待。

以上是本地優先級 HTMX pt1的詳細內容。更多資訊請關注PHP中文網其他相關文章！