</> htmx in 5 minutes

</> htmx เป็น library ที่ช่วยให้เราสามารถใช้ AJAX, CSS Transitions, WebSockets และ SSE ได้โดยตรงผ่าน HTML

ถ้าให้เล่าแบบง่ายๆก็คือ แทนที่เราจะไปเขียน Framework อย่าง ReactJS, Vue หรือ Angular เราสามารถทำงานง่ายๆผ่านการใช้ htmx ซึ่งส่วนใหญ่จะเขียนในรูป html, js และ css อย่างละนิดอย่างละหน่อย ยกตัวอย่างเช่น ถ้าเราต้องการจะให้หน้า web ไปยิง API สักเส้น แล้วรับค่า json กลับมาแสดง ก็สามารถทำได้

ผมจะลองยกตัวอย่างการใช้งานง่ายๆที่ทุกคนน่าจะทำตามได้
เริ่มจากการสร้างไฟล์มา 2 files

1. index.html
2. hello.html

index.html

<script src="https://unpkg.com/htmx.org@2.0.3"></script>
<button hx-get="/hello.html" hx-swap="outerHTML" hx-target="#content">
    Click Me
</button>

<div id="content">replace here</div>

hello.html

<div id="content">
Hello
</div

ที่เหลือก็ลองทดสอบ โดยผมจะใช้ Live Server นะครับ ใครติดตั้งแล้วก็เปิด Command Palette แล้วเลือก Live Server: Open with Live Server

โดยปกติมันก็จะเปิด browser ขึ้นมาให้เราเลยที่ 127.0.0.1:5500/index.html

เราก็จะเห็นปุ่มแบบนี้

ทดลองกดปุ่ม Click Me ก็จะเห็นข้อความ Hello มาแทน replace here

โดยเมื่อดูจากโค้ดที่เราเขียนมันเริ่มจากการ include ตัว htmx script เข้ามาก่อน ทีนี้ใน tag button เราเพิ่ม hx-get เข้าไปเพื่อบอกมันว่า เมื่อกดปุ่มให้ไปเรียก http request หาอะไร โดยในที่นี้เราเอาง่ายสุด แทนที่จะไปยิง API เราก็แค่เรียกไปที่ html ตัวหนึ่ง

hx-swap ตัวนี้เราบอกมันว่า เมื่อได้ผลลัพธ์มาแล้ว จะให้ไปสลับตำแหน่งกับจุดหมายปลายทางแบบไหน โดยเราใส่ไปว่า outerHTML หมายความว่า id ปลายทางทั้งก้อนจะถูกแทนที่ด้วย response เลย และสุดท้าย
hx-target ก็คือ id ปลายทางที่่เราจะเอา response ไปแสดงนั่นเอง

ทีนี้ ถ้าเรามาลองแก้ hx-swap เป็น innerHTML ดู มันจะเปลี่ยนเป็นการนำเอา response มาแทนที่ของที่อยู่ใน id ปลายทาง โดยที่ tag ของ id ปลายทางจะยังคงอยู่
เราก็ลองไปเปลี่ยนไฟล์ hello.html อีกนิด โดยไปลบ html tag ออก ให้เหลือแค่ข้อความอย่างเดียว แล้วทดลองใหม่ ก็จะเห็นว่ามันก็แสดงผลเหมือนเดิม

การใช้งานนี้เป็นแบบเริ่มต้น เดี๋ยวคราวหน้าเราจะมาลองยิง API แล้วรับส่งข้อมูลแบบ json กันดูครับ