如何將HTML與Htmx一起使用並減少JavaScript程式碼量

語言: CN / TW / HK

時間 2022-06-23 09:07:11 51CTO 開發

譯者 | 李睿

審校 | 孫淑娟

HTML作為宇宙的中心

眾所周知，全球網際網路得以蓬勃發展在很大程度上歸功於HTML和CSS。Javascript(JS)可以充當HTML和CSS之間的粘合劑，使頁面更具動態性和互動性，但Web程式設計的歷史發展不同。在客戶端渲染和其他類似技術出現之後，使用JS建立Web應用程式變得更加困難。

什麼是Htmx？

Htmx是一個庫，允許使用者使用簡單的標記建立現代且強大的使用者介面。多虧有了它，可以直接從HTML元素執行AJAX請求、觸發CSS轉換、呼叫WebSocket和伺服器傳送的事件。

SSR應用

Htmx的使用促使人們逐漸放棄客戶端渲染（CSR），轉而支援伺服器端渲染（SSR）。服務端渲染（SSR）被認為是最後的手段，只有在需要快速提高效能時才使用。但是，服務端渲染（SSR）可以構建應用程式的整個使用者介面。

Htmx不需要任何其他JS包即可執行，並且與框架和語言無關。因此，它可以與任何伺服器平臺一起使用，例如NodeExpress、RAILS、Django、Phoenix、Laravel等。

重用伺服器上的元件

Htmx允許使用者使用更熟悉的庫重用伺服器端使用者介面（UI）元素；例如，用於Node的Pug或用於RAILS和Django的模板庫。它有助於使HTML變得複雜和動態。

這裡是RentalsListing，一個使用Express.js和HTML構建的演示應用程式。它對統計和動態場景使用相同的部分：

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")

在主頁的列表中，使用了Pug庫中的include來顯示部分內容：

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

每次使用者在網站上搜索租賃房產時，都可以使用相同的部分填充搜尋結果。結果如下所示：

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);
});

伺服器端路由

客戶端路由帶來了一系列問題。例如，在基於雜湊的路由和基於URL的路由之間總是存在一個兩難選擇。由於舊版瀏覽器（如Internet Explorer 11）不支援歷史API，因此在URL中使用片段ID的基於雜湊的路由幾乎總是首選。

大多數JS框架都實現了自己的客戶端路由邏輯。同時，所有框架都使用自己的瀏覽器API，例如window.history。這導致應用程式中出現大量樣板程式碼。

更少的JS程式碼

Htmx的主要優勢在於編寫併發送到瀏覽器的JS程式碼量。與hyperscript一起，該庫允許使用者建立豐富的互動式應用程式，而無需使用JS中的客戶端程式碼：

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

當單頁應用剛開始流行時，社群採用JSON作為資料交換的標準。現在，為了從JSON資料中對HTML進行逆向工程，使用者通常需要處理通過API來自伺服器的大量客戶端資料。API響應通常包含不完整或冗餘的資料。

為了解決這個問題，已經開發了像GraphQL這樣的複雜替代方案，因此使用者只能從伺服器獲取所需的資料。Htmx提供了更好的解決方案：只需將HTML替換為從伺服器接收到的HTML響應，而不再需要客戶端資料。

不再構建/編譯

Htmx的另一個優點是不再採用Web應用程式構建工具。可以改用CDN工具：

HTML 
<!-- Load from unpkg -->
<script src="<http://unpkg.com/[email protected]>"></script>

不再構建是Web應用程式開發的全球趨勢。一方面，ES模組規範已經被所有瀏覽器開發者所接受。另一方面，現在有了Skypack、Snowpack和Vite工具，可以與CDN和ESM方法結合使用。所有這些最終將導致客戶端JavaScript的構建減少。此外，無需安裝數千個npm包並維護複雜的構建配置。

統一程式碼庫

一個應用程式的兩個程式碼庫意味著額外的開發挑戰。特別是，需要同步更新部署、兩次配置構建管道、更新兩個庫中的框架、維護程式碼，並從兩個源執行測試包。

Htmx允許使用者將所有程式碼組合在一個地方：由於渲染在伺服器端進行，因此不需要單獨的介面基礎。從長遠來看，這可以為使用者節省大量時間和費用。此外，開發人員可以更加一致地採取行動，他們不必檢查兩個或更多儲存庫。

行為原則的區域性性（LoB）

LoB原理是由程式設計理論家Richard Gabriel提出的。他指出，所有開發人員都應該努力確保每段程式碼的行為在驗證時是顯而易見的。

Gabriel認為，區域性性對於保持程式碼易於維護至關重要。區域性性是一種特性，它允許程式設計師在看到程式碼的一小部分後就可以瞭解程式碼屬於架構的哪一部分。

它看起來像這樣：

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>

缺乏狀態同步的問題

客戶端狀態管理產生的問題比解決的問題多。這一原則的實現導致客戶端和伺服器端都需要狀態管理。另一種解決方案是將狀態儲存在伺服器上。在這種情況下，客戶端充當虛擬執行器，用於呈現狀態更改。

這與瘦客戶機模式類似，瘦客戶機模式是一種帶有連線到終端伺服器的輕量級作業系統。這些裝置被用來建立第一個用於節省資源的Web應用程式。

Htmx將幫助使用者避免混淆狀態管理網路中的使用者介面（UI）程式碼；例如，雙向資料繫結、單向資料流和反應式資料。

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

「其他文章」