譯者 | 布加迪

審校 | 重樓

HTML讓您可以使用擴(kuò)展的HTML語法而不是JavaScript來實(shí)現(xiàn)交互性。HTMX直接在標(biāo)記中為您提供了HTTP交互，它支持其他許多交互要求，無需借助JavaScript。這個(gè)有意思的想法最終可能會(huì)影響Web前端的工作方式。不妨看看如何使用HTMX以及什么讓它如此引人注目。

HTMX簡介

HTMX已經(jīng)存在了一段時(shí)間，但它一直是比較低調(diào)的項(xiàng)目。它最近被GitHub Accelerator接受可能會(huì)改變這一切。其基本想法是拿來需要模板JavaScript和HTML交互的常見用例，徑直使用HTML語法，無需借助JavaScript。許多交互使用HTMX變成了聲明式交互。

這聽起來大有希望，是不是?每個(gè)Web開發(fā)人員都知道有許多常見的樣板案例。HTMX的開發(fā)者Carson Gross表示，他希望“完成HTML作為一種超文本，增強(qiáng)它的表現(xiàn)力，使它成為更高級(jí)的現(xiàn)代Web應(yīng)用程序之外的一種頗有競爭力的選擇。”

要快速體驗(yàn)一下，請(qǐng)看這個(gè)HTMX演示。大致來說，我們點(diǎn)擊一個(gè)按鈕來編輯用戶對(duì)象上的字段。數(shù)據(jù)實(shí)際上被PUT(放入)到后端端點(diǎn)。您可以在圖1中看到演示，請(qǐng)注意點(diǎn)擊Show后底部框中的網(wǎng)絡(luò)交互。

圖1. 表單演示：HTMX

通常，這一切都需要某種JavaScript，無論您使用什么框架。HTMX將交互轉(zhuǎn)變?yōu)閮蓚€(gè)標(biāo)記塊：一個(gè)用于顯示UI，另一個(gè)用于編輯UI，如代碼片段1所示。

代碼片段1：HTMX中的用戶更新

<div hx-target="this" hx-swap="outerHTML">
    <div><label>First Name</label>: Joe</div>
    <div><label>Last Name</label>: Blow</div>
    <div><label>Email</label>: joe@blow.com</div>
    <button hx-get="/contact/1/edit" class="btn btn-primary">
    Click To Edit
    </button>
</div>
<!-- The edit: -->
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">Submit</button>
  <button class="btn" hx-get="/contact/1">Cancel</button>
</form>

如果您查看代碼片段1中的標(biāo)記，就很容易看出具體發(fā)生了什么：hx-swap屬性在編輯之前為div提供了HTML，而outerHTML告訴框架它如何與其中的動(dòng)態(tài)內(nèi)容相關(guān)聯(lián)。可編輯版本作為含有x-put屬性的表單元素出現(xiàn)，該屬性標(biāo)識(shí)PUT HTML方法以及要使用的端點(diǎn)。

問題變成了如何在不借助任何JavaScript的情況下實(shí)現(xiàn)這種“交換”和隨后的PUT?答案很簡單：它為編輯標(biāo)記使用HTML的服務(wù)器端呈現(xiàn)，并將表單編組抽象到框架中。JavaScript仍然在幕后工作。實(shí)際上，我們得到了一種粒度更細(xì)的HTML語法，它可以只加載頁面部分而不是整個(gè)頁面，并可以提交Ajax請(qǐng)求。

這是實(shí)際DRY原理的一個(gè)有趣的例子。即使是像React這樣的技術(shù)，也有一定數(shù)量的樣板代碼將信息從一種形式轉(zhuǎn)換為另一種形式。當(dāng)然，HTMX沒有完全消除這種情況，但它已經(jīng)將工作轉(zhuǎn)移到服務(wù)器上。

服務(wù)器端HTMX

現(xiàn)在不妨考慮服務(wù)器端。許多服務(wù)器端技術(shù)都使用了HTMX，因?yàn)檎鏕ross所說，HTMX“與后端無關(guān)”。它不在乎您使用什么后端，只要它生成HTML就行。”為了大致了解它是如何工作的，不妨看一個(gè)使用Express的TODO示例以及Pug HTML模板引擎。這個(gè)示例是經(jīng)典TODO應(yīng)用程序的實(shí)現(xiàn)。

首先，使用以下命令從Express輸出現(xiàn)有的待辦事項(xiàng)：

res.render('index', { todos: filteredTodos, filter, itemsLeft: getItemsLeft() 
});

該命令使用內(nèi)存中的待辦事項(xiàng)集合，并使用典型格式的Pug模板來呈現(xiàn)它們，只不過它含有驅(qū)動(dòng)HTMX交互的特殊hx-屬性。比如說，代碼片段2顯示了POST新待辦事項(xiàng)的表單。

代碼片段2. 擁有HTMX屬性的表單POST

form(hx-post="/todos", hx-target="#todo-list", hx-swap="afterbegin", _="on htmx:afterOnLoad set #txtTodo.value to ''")
  input#txtTodo.new-todo(name="todo",placeholder='What needs to be done?', autofocus='')

您可以在這里(https://htmx.org/docs/#swapping)看到afterbegin屬性如何將新內(nèi)容放在列表中它所屬的位置的。on htmx腳本是Hyperscript的一個(gè)例子，Hyperscript是一種簡化的腳本語言。它經(jīng)常與HTMX結(jié)合使用，但嚴(yán)格來說并不是HTMX的一部分，也不是需要它才能使用HTMX。實(shí)際上，這里使用on htmx來處理在創(chuàng)建新待辦事項(xiàng)之后設(shè)置輸入表單的值。

另一個(gè)示例是，代碼片段3顯示了用于待辦事項(xiàng)編輯的Pug模板。

代碼片段3. 在PUG中編輯服務(wù)器端模板

form(hx-post="/todos/update/" + todo.id)
      input.edit(type="text", name="name",value=todo.name)

在代碼片段3中，標(biāo)記使用hx-post屬性指示將編輯后的待辦事項(xiàng)的JSON發(fā)送到何處。從這些示例中得出的結(jié)論是我在前面提到的：服務(wù)器負(fù)責(zé)提供HTML(用HTML標(biāo)記裝飾)，采用適當(dāng)大小的塊，以填充前端用于各種交互所需的屏幕的不同部分。HTMX客戶端將根據(jù)屬性將它們放置在本該所屬的位置，還將處理這項(xiàng)任務(wù)：發(fā)送適當(dāng)?shù)臄?shù)據(jù)供服務(wù)使用。

負(fù)責(zé)接收數(shù)據(jù)的端點(diǎn)可以像典型端點(diǎn)一樣操作，不同之處在于響應(yīng)應(yīng)該是必需的HTMX。比如，在代碼片段4中，您可以看到Express服務(wù)器如何處理POST以創(chuàng)建新的待辦事項(xiàng)。

代碼片段4. 處理待辦事項(xiàng)創(chuàng)建

app.post('/todos', (req, res) => {
  const { todo } = req.body;
  const newTodo = { 
        id: uuid(),
    name: todo, 
        done: false 
  };
    todos.push(newTodo);
  let template = pug.compileFile('views/includes/todo-item.pug');
  let markup = template({ todo: newTodo});
  template = pug.compileFile('views/includes/item-count.pug');
    markup  += template({ itemsLeft: getItemsLeft()});
    res.send(markup);
});

代碼片段4是一個(gè)典型的POST主體處理程序，它從表單數(shù)據(jù)中獲取值，并用它創(chuàng)建一個(gè)新的業(yè)務(wù)對(duì)象(newTodo)。然而，它隨后使用這些值來填充Pug模板，并將其發(fā)回給客戶端，以便用作插入到前端上的Todo列表。

服務(wù)器端技術(shù)的其他例子包括在Java界結(jié)合使用HTMX和Spring Boot與Thymeleaf，在Python界結(jié)合使用Spring Boot和Django。

使用HTMX的客戶端模板

這種模式的另一種變體得到HTMX的支持，它使用客戶端模板。這一層在客戶機(jī)中運(yùn)行，接收來自服務(wù)器的JSON，并在服務(wù)器上進(jìn)行標(biāo)記翻譯。當(dāng)我向Gross詢問如何使用帶有JSON的可充分利用REST的服務(wù)時(shí)，他指出可以使用客戶端模板來實(shí)現(xiàn)，但要注意的是REST通常被誤解了。

那么一個(gè)相反的問題是，我們?nèi)绾蜗蚍?wù)器提交JSON而不是默認(rèn)的表單編碼?再說一次，這有一個(gè)相應(yīng)的擴(kuò)展，即JSON-ENC。

結(jié)論

考慮HTMX會(huì)引發(fā)一大堆想法同時(shí)出現(xiàn)。結(jié)果是，這個(gè)概念與項(xiàng)目本身一樣有益。作為一個(gè)成熟的項(xiàng)目，HTMX可能不會(huì)像現(xiàn)在這樣精確地工作，但它已經(jīng)證明了具有重大影響力。最引人注目的是這個(gè)想法：處理所有這些非常常見的Ajax風(fēng)格的請(qǐng)求，這通常意味著使用fetch()或類似的東西，僅僅只有HTML屬性。這樣更簡單、更干凈，而且所有東西都放在一個(gè)地方。標(biāo)記具體做什么一目了然。

我對(duì)服務(wù)器端標(biāo)記生成比較矛盾。開發(fā)人員習(xí)慣于為此目的處理JSON，引入標(biāo)記只是為客戶端創(chuàng)建添加了一個(gè)步驟。我們已經(jīng)看到了許多服務(wù)器端方法，它們似乎總是混淆HTML、JavaScript和CSS這個(gè)強(qiáng)大的組合，而這個(gè)組合最終將繼續(xù)笑到最后。也許這一回會(huì)有所不同，這里存在明顯的鐘擺效應(yīng)。

當(dāng)然，還有客戶端模板選項(xiàng)，它使服務(wù)器成為一個(gè)熟悉的JSON發(fā)射器(emitter)。我試著想象它在一個(gè)大型軟件項(xiàng)目中會(huì)如何工作。它會(huì)降低大規(guī)模項(xiàng)目的總體復(fù)雜性嗎?

Gross對(duì)復(fù)雜性有其自己的看法，他的想法在HTMX的設(shè)計(jì)中得到了體現(xiàn)。這項(xiàng)技術(shù)希望通過將超文本重新作為Web應(yīng)用程序的狀態(tài)機(jī)制來達(dá)到簡化的目的。這個(gè)示例(表明了這個(gè)想法具體是如何實(shí)現(xiàn)的。使用JSON作為協(xié)議，意味著使客戶端更智能、更復(fù)雜，并且使架構(gòu)少一點(diǎn)自我描述。

也許它完全行得通。如果我們通過擴(kuò)展底層語言HTML以實(shí)際處理現(xiàn)代需求(就像Ajax那樣)、避免固有的復(fù)雜性，有望回到更簡單的時(shí)代。標(biāo)記將再次成為中心數(shù)據(jù)描述符，足以描述UI以及線上的數(shù)據(jù)。

原文標(biāo)題：Intro to HTMX: Dynamic HTML without JavaScript，作者：Matthew Tyson