ช่วงหลัง ๆ มีการพูดถึง HTMX เยอะพอสมควร
ก็เลยลองมาศึกษานิดหน่อย แต่พอไปอ่านเอกสารแล้วเยอะน่าดู
เลยลองเขียน program เล่น ๆ เพื่อศึกษาไปดีกว่า
โดยเลือกใช้งาน HTMX กับ Go มาพัฒนา server-side กัน
มาดูว่าทำอย่างไรบ้าง ?
จากที่อ่านเอกสารของ HTMX นั้น
บอกว่าจะทำการส่ง request ไปยัง server-side ให้เลย (AJAX หรือ XHR)
แล้วนำ response มาทำการ render ให้เลย
ดังนั้นก็เลยตั้งโจทย์แรกว่า
ให้ทำการดึงข้อมูลจาก server-side ทุก ๆ 5 วินาทีไปเลย
สามารถเขียนได้ดังนี้
ฝั่ง Frontend ด้วย HTMX
โดยทำการดังข้อมูลผ่าน GET /data
กำหนด interval ใน attribute ชื่อว่า hx-trigger ทำงานแบบ polling
ฝั่ง Backend ด้วยภาษา Go
จากดึงข้อมูลก็ลองทำการ submit form ง่าย ๆ กันหน่อย
มาลองทำการ login ซึ่งฝั่ง backend จะทำการรับ request ผ่าน POST /login
และทำการส่งผลกลับมาคือ
- 200 = Success
- 401 = Unauthorized
สามารถเขียนด้วย HTMX กับ extension response-targets
เพื่อให้ง่ายต่อการแสดงผลการทำงานในแต่ละกรณี
ส่วน code ฝั่ง backend เป็นดังนี้
ผลการทำงาน
ส่วนการจัดเก็บข้อมูลการ login ก็สามารถเขียนได้เลยในฝั่ง backend
ทั้ง cookie หรือ session ไปได้เลย
จากนั้นการตรวจสอบเครื่อง authorize ก็นำไปไว้ที่ middleware ต่อไป
มีตัวอย่างให้ลองศึกษาเพิ่มเติมได้ที่ HTMX Example
ไว้ลองเล่นเพิ่มเติม แล้วจะนำมาเล่าต่อไปครับ
ขอให้สนุกกับการเขียน code
