本地优先 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 Workers，它允许您在具有有限权限（无法访问 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中文网其他相关文章！