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 เป็นระบบเดียวกันหมด

HTMX 2	HTMX 4
htmx:beforeRequest	htmx:before:request
htmx:afterRequest	htmx:after:request
htmx:beforeSwap	htmx:before:swap
htmx:afterSwap	htmx:after:swap
htmx:configRequest	htmx:config:request

ทุก 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

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

กระแสหลักวันนี้	HTMX เลือกทางไหน
AI agent สร้าง UI ด้วย React + framework ใหญ่	HTML-first, ไฟล์เดียว 14KB
Client-side state ซับซ้อน	Server เป็น source of truth
Build tools + bundlers + dependencies เยอะ	ไม่ต้อง build อะไรเลย
"เขียน JavaScript น้อยลง" ด้วย AI	"เขียน JavaScript น้อยลง" ด้วย HTML เลย

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

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

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

ข้อดี	ข้อควรระวัง
Cleanup อย่างจริงจัง ไม่ใช่เปลี่ยนเกม	Inheritance เปลี่ยน, โค้ดเก่าที่พึ่ง implicit จะพัง
Upgrade checker + compat extension ช่วยได้จริง	Event names เปลี่ยนหมด, ต้อง rename ทุกจุดที่ฟัง event
HTMX 2 ยังใช้ได้ถึง 2027	Morph swaps กิน CPU, อย่าใช้เป็น default

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

ผมมองว่า 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