HTMX 4 ออกแล้ว, ทำไม Library ที่บอกให้ "เลิกเขียน JavaScript" ถึงแรงในยุค AI

โดย Nokka (นก-กา), นักเขียนอิสระสายเทคโนโลยี ผู้เขียนบทความอธิบายเทคโนโลยีให้คนทั่วไปเข้าใจ 30+ บทความบน dev.to | 30 สิงหาคม 2026

บทความนี้เขียนโดย AI (glm-5.3 via ollama-cloud) ผ่าน Hermes Agent ภายใต้การควบคุมและตรวจสอบคุณภาพโดยมนุษย์, Nokka (นก-กา), อ้างอิงจากประกาศทางการของ HTMX และ Flavio Copes

ก่อนอื่น, ทำความเข้าใจศัพท์

ก่อนเข้าเรื่อง ขอปูศัพท์ 3 คำที่คนอ่านบทความนี้ต้องรู้ก่อน:

• HTMX: JavaScript library ที่ให้ HTML เปลี่ยน state ได้เองโดยไม่ต้องเขียน JavaScript เยอะๆ, ใช้ attribute อย่าง hx-get, hx-post สั่ง request แล้วเอา HTML ที่ server ตอบกลับมาแปะในหน้าเว็บ
• Morph swap: การอัปเดต DOM แบบ "ดัดแปลงให้เข้ารูป" แทนการ "ฉีกทิ้งแล้วแปะใหม่", รักษา focus, input state, วิดีโอที่กำลังเล่น
• Attribute inheritance: การที่ attribute ของ element แม่ "ไหลลง" ไปให้ลูกๆ อัตโนมัติ, แบบเดียวกับ CSS

ถ้าให้อุปมา: ถ้า React เป็น "สร้างบ้านใหม่ทุกครั้งที่ย้ายเฟอร์นิเจอร์ตัวเดียว", HTMX คือ "สั่งเปลี่ยนเฉพาะเฟอร์นิเจอร์ตัวนั้นจากร้าน แล้วเอามาวางแทนที่เดิม" ง่าย เร็ว และไม่ต้องจ้างช่าง (framework) มาดูแลบ้านทั้งหลัง

เกิดอะไรขึ้น: HTMX 4.0.0 ปล่อยแล้ว

เมื่อ 28 ส.ค. 2026 ทีม HTMX ปล่อยเวอร์ชัน 4.0.0, ผลงาน 8 เดือน และเป็น major release ตัวแรกในรอบ 2 ปี [1]

แก่นของ HTMX ไม่เปลี่ยน:

"คุณเพิ่ม attribute ใน HTML → attribute สั่ง HTTP request → server ตอบ HTML → HTMX เอา HTML นั้นไปใส่ในหน้าเว็บ"

แต่สิ่งที่เปลี่ยนคือ "ความชัดเจน", ทีมงานเรียกมันว่า "careful cleanup, not a new framework" (การเก็บกวาดอย่างระมัดระวัง ไม่ใช่ framework ใหม่) [2]

การเปลี่ยนแปลงหลัก 8 ข้อ

1. ฐานใหม่: fetch() แทน XMLHttpRequest

เหตุผลเดิมที่ใช้ XMLHttpRequest คือ backwards compatibility, ตอนนี้ย้ายมาใช้ fetch() ของ browser เต็มตัว [1]

ผล: streaming HTML ง่ายขึ้น + extension ทำงานกับ request ได้เรียบขึ้น (ส่วนใหญ่ user ไม่รู้สึกอะไรเลย)

2. Attribute inheritance ต้อง "ขออนุญาต" แล้ว (เปลี่ยนใหญ่สุด)

เดิม (HTMX 2): attribute ของแม่ไหลลงลูกแบบเงียบๆ

<div hx-confirm="Are you sure?">
  <button hx-delete="/items/1">Delete</button>
</div>

ใหม่ (HTMX 4): ต้องใส่ :inherited ชัดเจน

<div hx-confirm:inherited="Are you sure?">
  <button hx-delete="/items/1">Delete</button>
</div>

ทำไมดี: มอง parent แล้วรู้ทันทีว่า behavior ไหลถึงลูก, ลด "เวทย์มนต์ที่มองไม่เห็น" ที่ต้องจำ [1] [2]

3. Event names เป็นระบบเดียวกันหมด

ทุก event ใช้ pattern htmx:phase:action + error events รวมเป็น htmx:error กับ htmx:response:error [1]

4. History เลิกเก็บ snapshot ใน localStorage

ปัญหาเดิม: HTMX 2 เก็บ DOM snapshot ใน localStorage, แต่ถ้า JavaScript ตัวอื่น (เช่น Alpine.js) เปลี่ยนหน้าเว็บหลังจากนั้น snapshot จะ "เก่า" และ restore แล้ว state ไม่ตรงกัน

ใหม่: กด back แล้ว fetch หน้าใหม่จาก server, ลบ hidden state ไปเยอะ [1] [2]

5. Error responses ถูก swap โดย default

เดิม 4xx/5xx ไม่ถูก swap, ใหม่ swap ทุก response ยกเว้น 204 กับ 304

ข้อดี: server ส่ง validation HTML มากับ status 422 ได้เลย
ข้อควรระวัง: ถ้า error page เดิมไม่ได้ออกแบบมาแปะใน target เล็กๆ, ต้องตรวจตอน upgrade [2]

6. Morph swaps ในตัว

<button hx-get="/profile" hx-target="#profile" hx-swap="outerMorph">
  Refresh profile
</button>

Morph คือ "ดัด DOM ให้เข้ารูป HTML ใหม่" โดยไม่ replace ทุก node, เลยรักษา focus, input state, วิดีโอที่เล่นอยู่ได้ [2]

ข้อแม้: กิน CPU มากกว่า swap ปกติ, ใช้เฉพาะจุดที่ state สำคัญ

7. <hx-partial>, 1 response อัปเดตหลายจุด

<hx-partial hx-target="#messages" hx-swap="beforeend">
  <div>New message</div>
</hx-partial>
<hx-partial hx-target="#message-count">
  <span>5</span>
</hx-partial>

Response เดียว เลือก target ได้หลายจุด, เจตนาชัดในตัว HTML เอง [2]

8. Extension system ใหม่

มี extensions สำเร็จรูป: preloading, file downloads, optimistic updates, SSE, WebSockets, streaming, รวมถึง hx-alpine-compat (สำหรับคนใช้ AHA Stack) และ bundle htmax.js [2]

วิธี Upgrade (สำหรับคนใช้ HTMX 2 อยู่)

ขั้นที่ 1: รัน upgrade checker

npx htmx.org@4 upgrade-check -- ./src

เครื่องมือหา inherited attributes, event names เก่า, API เก่าให้อัตโนมัติ [2]

ขั้นที่ 2: แก้ทีละเรื่อง + ใช้ compat ช่วยได้

• แก้ inheritance + rename events + ตรวจ error responses
• ถ้าอยากค่อยๆ ย้าย: มี extension htmx-2-compat คืน behavior เก่าชั่วคราว [2]

ไม่ต้องรีบ

HTMX 2 ยัง supported และเป็น latest บน npm จนถึงต้นปี 2027, ป้องกันเว็บที่ใช้ CDN URL ไม่มี version จากพังโดยไม่รู้ตัว ถ้าอยากใช้เวอร์ชัน 4 ต้องสั่งเจาะจง: npm install htmx.org@4 [1]

ทำไม HTMX ถึง "สวนทาง" และน่าสนใจในยุค AI

นี่คือมุมที่ผมอยากเน้นที่สุด:

เมื่อ AI coding agent เขียน UI ได้ทั้ง React และ HTMX, คำถามจึงไม่ใช่ "อะไรแรงกว่า" แต่คือ "โค้ดแบบไหนที่มนุษย์อ่านแล้วเข้าใจ และ AI สร้างแล้วไม่กลายเป็น slop", และ HTML + attributes ที่ประกาศ intent ชัดเจน (เหมือน :inherited ใหม่นี้แหละ) คือคำตอบที่ HTMX เดินมาตลอด

สิ่งที่ผมชอบที่สุดใน release นี้คือประโยคของทีมเอง: พวกเขาออกแบบ HTMX-based applications ให้เป็น "100-year web services", เว็บที่อยู่ได้อีกร้อยปี [1]

ข้อควรระวัง: มุมที่ต้องสมดุล

สรุปมุมมองของผม

ผมมองว่า HTMX 4 คือ release ที่ "เป็นผู้ใหญ่", แทนที่จะเพิ่ม feature มั่วๆ เพื่อแข่งกับ framework ใหญ่ พวกเขาเลือก "ทำให้สิ่งที่มีอยู่ชัดเจนขึ้น" (explicit inheritance, ระเบียบ event, ลบ hidden state)

และมันสอดคล้องกับสิ่งที่ผมเขียนเรื่อง de-slop UI มาก่อนหน้านี้: ปัญหาของ UI ยุค AI ไม่ใช่ "ทำไมาไม่ได้" แต่คือ "โค้ดที่มองไม่เห็นเวทย์มนต์", HTMX 4 ลบเวทย์มนต์ (implicit behavior) ออกทีละชิ้น และนั่นคือทิศทางเดียวกับที่วิศวกรฝั่ง Ref.tools บอกไว้: "remove the agent's litter"

ถ้าคุณเบื่อ JS framework หนักๆ หรืออยากลองทางที่ server คือ source of truth, HTMX 4 มาถูกเวลาเลยครับ

คุณเคยใช้ HTMX หรือเว็บแบบ HTML-first (Astro, AHA Stack) ไหมครับ? หรือยังติดอยู่กับ SPA framework? คอมเมนต์แลกเปลี่ยนกันได้ครับ

ถ้าชอบบทความแนว web development แบบนี้ ติดตาม Nokka ได้ที่ dev.to/sarantoon

แหล่งอ้างอิง

[1] HTMX. "htmx 4.0.0 has been released!". 2026. https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released

[2] Copes, Flavio. "HTMX 4 is here". 2026. https://flaviocopes.com/htmx-4/

บทความนี้วิเคราะห์จากประกาศทางการของ HTMX และบทวิเคราะห์ของ Flavio Copes ข้อมูล ณ 30 สิงหาคม 2026 Nokka