譯者 | 李睿

審校 | 孫淑娟

HTML作為宇宙的中心  

眾所周知，全球互聯(lián)網(wǎng)得以蓬勃發(fā)展在很大程度上歸功于HTML和CSS。Javascript(JS)可以充當(dāng)HTML和CSS之間的粘合劑，使頁(yè)面更具動(dòng)態(tài)性和交互性，但Web編程的歷史發(fā)展不同。在客戶端渲染和其他類似技術(shù)出現(xiàn)之后，使用JS創(chuàng)建Web應(yīng)用程序變得更加困難。  

什么是Htmx？  

Htmx是一個(gè)庫(kù)，允許用戶使用簡(jiǎn)單的標(biāo)記創(chuàng)建現(xiàn)代且強(qiáng)大的用戶界面。多虧有了它，可以直接從HTML元素執(zhí)行AJAX請(qǐng)求、觸發(fā)CSS轉(zhuǎn)換、調(diào)用WebSocket和服務(wù)器發(fā)送的事件。  

SSR應(yīng)用  

Htmx的使用促使人們逐漸放棄客戶端渲染（CSR），轉(zhuǎn)而支持服務(wù)器端渲染（SSR）。服務(wù)端渲染（SSR）被認(rèn)為是最后的手段，只有在需要快速提高性能時(shí)才使用。但是，服務(wù)端渲染（SSR）可以構(gòu)建應(yīng)用程序的整個(gè)用戶界面。  

Htmx不需要任何其他JS包即可運(yùn)行，并且與框架和語(yǔ)言無(wú)關(guān)。因此，它可以與任何服務(wù)器平臺(tái)一起使用，例如NodeExpress、RAILS、Django、Phoenix、Laravel等。  

重用服務(wù)器上的組件  

Htmx允許用戶使用更熟悉的庫(kù)重用服務(wù)器端用戶界面（UI）元素；例如，用于Node的Pug或用于RAILS和Django的模板庫(kù)。它有助于使HTML變得復(fù)雜和動(dòng)態(tài)。  

這里是RentalsListing，一個(gè)使用Express.js和HTML構(gòu)建的演示應(yīng)用程序。它對(duì)統(tǒng)計(jì)和動(dòng)態(tài)場(chǎng)景使用相同的部分：

HTML 
ul.results
  each rental in rentals
    li
      article.rental
        button.image(type="button", _="on click toggle .large then if #view-caption.textContent === 'View Larger' then set #view-caption.textContent to 'View Smaller' else set #view-caption.textContent to 'View Larger'")
          img(src=rental.attributes.image, alt='An image of ' + rental.attributes.title)
          small#view-caption View Larger
        .details
          h3
            a(href='/rentals/' + rental.id) #{rental.attributes.title}
          .detail.owner
            span Owner:
            | #{rental.attributes.owner}
          .detail.type
            span Type:
            | #{rental.attributes.category}
          .detail.location
            span Location:
            | #{rental.attributes.city}
          .detail.bedrooms
            span Bedrooms:
            | #{rental.attributes.bedrooms}
        .map
          img(alt='A map of ' + rental.attributes.title, src=rental.mapbox, width="150",height="150")

在主頁(yè)的列表中，使用了Pug庫(kù)中的include來(lái)顯示部分內(nèi)容：

HTML 
extends layout
block content
  .jumbo
    .right
    h2 Welcome to Super Rentals!
    p We hope you find exactly what you're looking for in a place to stay.
    a.button(href="/about") About Us
  .rentals
    label
      span Where would you like to stay?
      input.light(type="text", name="search",
       hx-post="/search" ,
       hx-trigger="keyup changed delay:500ms" ,
       hx-target=".results" ,
       hx-indicator=".htmx-indicator")

include includes/rental-list.pug

每次用戶在網(wǎng)站上搜索租賃房產(chǎn)時(shí)，都可以使用相同的部分填充搜索結(jié)果。結(jié)果如下所示：

JavaScript 
app.post('/search', (req, res) => {
  const { search } = req.body;

  const results = _rentals.data.filter(r => {
    const _search = search.toLowerCase();
    const _title = r.attributes.title.toLowerCase();
    return _title.includes(_search);
  });
  const template  = pug.compileFile('views/includes/rental-list.pug');
  const markup = template({ rentals: results });
  res.send(markup);
});

服務(wù)器端路由  

客戶端路由帶來(lái)了一系列問(wèn)題。例如，在基于散列的路由和基于URL的路由之間總是存在一個(gè)兩難選擇。由于舊版瀏覽器（如Internet Explorer 11）不支持歷史API，因此在URL中使用片段ID的基于哈希的路由幾乎總是首選。  

大多數(shù)JS框架都實(shí)現(xiàn)了自己的客戶端路由邏輯。同時(shí)，所有框架都使用自己的瀏覽器API，例如window.history。這導(dǎo)致應(yīng)用程序中出現(xiàn)大量樣板代碼。  

更少的JS代碼  

Htmx的主要優(yōu)勢(shì)在于編寫(xiě)并發(fā)送到瀏覽器的JS代碼量。與hyperscript一起，該庫(kù)允許用戶創(chuàng)建豐富的交互式應(yīng)用程序，而無(wú)需使用JS中的客戶端代碼：

HTML 
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
</button>

當(dāng)單頁(yè)應(yīng)用剛開(kāi)始流行時(shí)，社區(qū)采用JSON作為數(shù)據(jù)交換的標(biāo)準(zhǔn)。現(xiàn)在，為了從JSON數(shù)據(jù)中對(duì)HTML進(jìn)行逆向工程，用戶通常需要處理通過(guò)API來(lái)自服務(wù)器的大量客戶端數(shù)據(jù)。API響應(yīng)通常包含不完整或冗余的數(shù)據(jù)。  

為了解決這個(gè)問(wèn)題，已經(jīng)開(kāi)發(fā)了像GraphQL這樣的復(fù)雜替代方案，因此用戶只能從服務(wù)器獲取所需的數(shù)據(jù)。Htmx提供了更好的解決方案：只需將HTML替換為從服務(wù)器接收到的HTML響應(yīng)，而不再需要客戶端數(shù)據(jù)。  

不再構(gòu)建/編譯  

Htmx的另一個(gè)優(yōu)點(diǎn)是不再采用Web應(yīng)用程序構(gòu)建工具。可以改用CDN工具：

HTML 
<!-- Load from unpkg -->
<script src="<https://unpkg.com/htmx.org@1.3.3>"></script>

不再構(gòu)建是Web應(yīng)用程序開(kāi)發(fā)的全球趨勢(shì)。一方面，ES模塊規(guī)范已經(jīng)被所有瀏覽器開(kāi)發(fā)者所接受。另一方面，現(xiàn)在有了Skypack、Snowpack和Vite工具，可以與CDN和ESM方法結(jié)合使用。所有這些最終將導(dǎo)致客戶端JavaScript的構(gòu)建減少。此外，無(wú)需安裝數(shù)千個(gè)npm包并維護(hù)復(fù)雜的構(gòu)建配置。  

統(tǒng)一代碼庫(kù)  

一個(gè)應(yīng)用程序的兩個(gè)代碼庫(kù)意味著額外的開(kāi)發(fā)挑戰(zhàn)。特別是，需要同步更新部署、兩次配置構(gòu)建管道、更新兩個(gè)庫(kù)中的框架、維護(hù)代碼，并從兩個(gè)源運(yùn)行測(cè)試包。  

Htmx允許用戶將所有代碼組合在一個(gè)地方：由于渲染在服務(wù)器端進(jìn)行，因此不需要單獨(dú)的接口基礎(chǔ)。從長(zhǎng)遠(yuǎn)來(lái)看，這可以為用戶節(jié)省大量時(shí)間和費(fèi)用。此外，開(kāi)發(fā)人員可以更加一致地采取行動(dòng)，他們不必檢查兩個(gè)或更多存儲(chǔ)庫(kù)。  

行為原則的局部性（LoB）

LoB原理是由編程理論家Richard　Gabriel提出的。他指出，所有開(kāi)發(fā)人員都應(yīng)該努力確保每段代碼的行為在驗(yàn)證時(shí)是顯而易見(jiàn)的。  

Gabriel認(rèn)為，局部性對(duì)于保持代碼易于維護(hù)至關(guān)重要。局部性是一種特性，它允許程序員在看到代碼的一小部分后就可以了解代碼屬于架構(gòu)的哪一部分。  

它看起來(lái)像這樣：  

HTML 
The behaviour of a code unit should be as obvious as possible by looking only at that unit of code
<div hx-get="/clicked">Click Me</div>

缺乏狀態(tài)同步的問(wèn)題  

客戶端狀態(tài)管理產(chǎn)生的問(wèn)題比解決的問(wèn)題多。這一原則的實(shí)現(xiàn)導(dǎo)致客戶端和服務(wù)器端都需要狀態(tài)管理。另一種解決方案是將狀態(tài)存儲(chǔ)在服務(wù)器上。在這種情況下，客戶端充當(dāng)虛擬執(zhí)行器，用于呈現(xiàn)狀態(tài)更改。

這與瘦客戶機(jī)模式類似，瘦客戶機(jī)模式是一種帶有連接到終端服務(wù)器的輕量級(jí)操作系統(tǒng)。這些設(shè)備被用來(lái)創(chuàng)建第一個(gè)用于節(jié)省資源的Web應(yīng)用程序。  

Htmx將幫助用戶避免混淆狀態(tài)管理網(wǎng)絡(luò)中的用戶界面（UI）代碼；例如，雙向數(shù)據(jù)綁定、單向數(shù)據(jù)流和反應(yīng)式數(shù)據(jù)。

原文標(biāo)題：??Removing JavaScript: How To Use HTML With Htmx and Reduce the Amount of Code??，作者：Alexey Shepelev