FastHTML 的基础

ASGI

FastHTML 整合并构建于两个成熟、极其灵活且高性能的技术框架之上：ASGI（在 Uvicorn 和 Starlette 中实现）和 HTMX。

ASGI 是一种小巧但极其聪明的方案，用于简化 Web 通信的基础——HTTP 的工作方式。它将 HTTP 事务的所有不同部分转换为一个基础、定义明确的 Python API：一个单一函数，该函数接收三个参数，提供了对完整 HTTP 规范的访问。

Uvicorn 是 FastHTML 使用的 ASGI 服务器——也就是说，它负责监听 HTTP 消息，并将其转换为 Python ASGI API。然后 Starlette 负责在这个强大的单一函数 ASGI 基础上，通过添加少量函数和类，使其对程序员更方便，从而消除了支持 ASGI 所需的样板代码。作为 FastHTML 用户，你几乎不需要了解任何关于 ASGI/Uvicorn/Starlette 三者组合的知识，只需要知道它在后台为你做了大量工作！

要了解更多关于 Uvicorn 和 Starlette 在 FastHTML 中如何工作的信息，请参阅相关的技术部分。

HTMX

HTML 本身只提供最基本的交互机制：你可以点击链接来“获取”（get）一个 HTML 页面，或者你可以点击表单上的按钮来“提交”（post）表单数据。在任何一种情况下，服务器返回的 HTML 结果都会替换当前页面（称为“整页刷新”）。这些限制从 Web 早期就一直存在。HTMX 是一个通过消除四个关键约束来移除这些限制的库：

页面上的任何元素都可以调用服务器，而不仅仅是链接和表单。
任何事件都可以调用服务器（例如，鼠标悬停、按键、滚动），而不仅仅是点击。
任何 HTTP 方法都可以用来调用服务器，而不仅仅是“get”和“post”方法。
服务器响应可以用来以任何方式修改现有页面，包括删除元素、添加元素或更改元素，而不仅仅是替换整个页面。

HTMX 以前被称为 Intercooler。它现在已经有超过 10 年的历史了——所以它是一项成熟的技术。HTMX/Intercooler 提出了这样一个理念：我们可以在 Web 的基础之上进行构建，而无需牺牲创建现代、交互式 Web 应用程序的能力。没有它，FastHTML 就不可能存在。HTMX 以其表情包而闻名，包括上面的图片，它突显了 HTMX 的方法如何让我们回归到 Web 早期的简洁性（虽然也许现在我们应该把那个表情包更新为 FastHTML 2024，那时我们只有 3 个部分：浏览器、DOM 和一个 python 文件！）

要了解更多关于 HTMX 如何工作以及如何使用它的信息，请参阅 HTMX 技术部分。要了解在实践中使用 HTMX 的好处，请观看这个演讲，它通过一个真实案例研究，讲解了如何使用 HTMX 替换一个复杂大型应用中的 React。它展示了 HTMX 如何让代码量大幅减少，网站速度变得更快，并且通过消除对前端专家的需求，他们能够简化团队结构。

HTTP

所有网页请求都由你的浏览器发出，并由 Web 服务器使用 HTTP 返回。许多 Web 编程系统试图向开发者隐藏这一点，但 FastHTML（以及其底层技术 Uvicorn、Starlette 和 HTMX）没有。通过将这一点呈现出来，意味着你直接与 Web 的基础打交道，而不是通过那些频繁变化且存在漏洞的抽象层。HTTP 的核心是一个简单的文本协议，是所有 Web 通信的基础。它以一个请求开始，例如：

GET / HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

第一行显示这是一个针对根 URL（/）的 GET 请求。接下来的几行是请求头，提供了关于请求的附加信息。

然后服务器会返回一个状态码（这里是 200，表示成功）、响应头和内容，例如：

HTTP/1.1 200 OK
Date: Wed, 08 Jan 2024 23:1:05 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 5
Server: Apache/2.4.51 (Unix)
Connection: close

hello

当你理解了所有 Web 应用程序都像这样通信，并且你的编程框架让你能轻松地与之交互时，你将不受任何限制，可以构建任何东西。话虽如此，直接处理 HTTP 的文本协议并不容易，这就是为什么存在更高级别的 ASGI 协议。它以一种更简单的形式，让 Python 程序员可以访问 HTTP 的所有功能。此外，HTMX 允许浏览器更充分地利用 HTTP。

HTML/CSS/JS

在上一节中，服务器以主体“hello”作为响应。但实际上，如今 Web 服务器的响应通常是 HTML 或 JSON。使用 FastHTML（我们将在 HTMX 技术部分中看到），我们的响应几乎总是 HTML。这里是一个基本的 HTML 页面示例，它有一个头部和一个包含段落（<p> 标签）的主体。

<html>
  <head><title>Example</title></head>
  <body><p>Hello World!</p></body>
</html>

HTML 创建结构，浏览器在内部将 HTML 转换为文档对象模型（DOM）元素树。为了给浏览器中文档的表示添加样式，我们使用 CSS 添加样式。一种方法是在一个 CSS 文件中手动定义样式——例如，这是我们正在为这个网站使用的样式表，其中包含了给上述 HTML 块添加浅灰色边框和背景的 CSS 规则。

在大多数 FastHTML 应用程序中，大部分样式不会手动定义，而是来自像 Bootstrap、DaisyUI 或 Shoelace 这样的 CSS 框架。FastHTML 将这些框架作为 FT 组件轻松提供。

虽然你的应用程序的大部分逻辑通常会用 Python 编写，并通过 FastHTML 在 HTTP 上提供，但你可能希望一些独立的 UI 更新直接在浏览器中发生。为此，你可以编写 JavaScript 并使用 FastHTML 将其添加到网页中。这通常不是必需的，但可以让你的应用程序的某些部分更快、更简洁，或从浏览器的 DOM API 中添加一些便利的功能。例如，我们经常在我们的应用中添加一个带有示例代码的“复制”按钮，这需要使用 DOM API，因此需要添加一点 JavaScript。JavaScript 最初就是为此目的设计的，因此它特别适合为应用程序添加客户端行为。

要学习如何向 FastHTML 添加 JS 库，可以查看一些示例。FastHTML 包含了许多流行 JS 库的模块，例如 Marked.js。要了解这是如何实现的，可以查看 Python 中 MarkdownJS 的七行源代码。