Programming
Htmx Modern Web Without Javascript
Htmx Modern Web Without Javascript คืออะไร / ทำไมถึงสำคัญ
น้องๆ เคยเจอปัญหาเว็บอืดๆ หน่วงๆ มั้ย? สมัยผมทำร้านเน็ต SiamCafe นี่เจอบ่อยมาก! (ย้อนไป 20 กว่าปีก่อนนะ) ยิ่งเว็บไหนใช้ Javascript เยอะๆ ยิ่งหนักเครื่องลูกค้า (สมัยนั้นสเปคคอมฯ ไม่แรงเท่าตอนนี้ไง)
Htmx เนี่ยแหละคือทางออก! มันเป็น Library ที่ช่วยให้เราสร้าง Web Application ที่ดู "Modern" ได้ โดยแทบไม่ต้องเขียน Javascript เลย! (หรือเขียนน้อยมากๆ) หลักการง่ายๆ คือ ส่ง Attribute พิเศษไปกับ HTML Element แล้วให้ Htmx จัดการ Request/Response ให้เอง
ทำไมมันถึงสำคัญ? เพราะมันลดความซับซ้อนในการพัฒนาเว็บไปเยอะ! น้องๆ ไม่ต้องวุ่นวายกับ Framework Javascript ใหญ่ๆ อย่าง React, Angular หรือ Vue.js ก็สร้างเว็บเจ๋งๆ ได้ แถมยังช่วยลดภาระของ Browser Client ลงไปอีกด้วย
พื้นฐานที่ต้องรู้
HTML & HTTP Basics
อันนี้สำคัญสุดๆ! น้องๆ ต้องแม่น HTML, HTTP Method (GET, POST, PUT, DELETE), Status Code (200 OK, 404 Not Found, 500 Internal Server Error) พวกนี้ก่อนเลย สมัยผมหัดเขียนเว็บใหม่ๆ ก็เริ่มจาก HTML นี่แหละ SiamCafe Blog มีบทความ HTML พื้นฐานเยอะแยะ ลองไปอ่านดู
HTTP Method เนี่ย เปรียบเหมือน "คำสั่ง" ที่เราส่งไปให้ Server ส่วน Status Code คือ "ผลลัพธ์" ที่ Server ตอบกลับมา
CSS (พอประมาณ)
CSS ก็สำคัญนะ! เพราะมันช่วยให้เว็บเราสวยงาม น่าใช้ แต่ไม่ต้องเน้น CSS Framework มากก็ได้ แค่เข้าใจหลักการพื้นฐานก็พอ เช่น Selector, Box Model, Flexbox พวกนี้
Server-Side Language (อะไรก็ได้)
Htmx ทำงานร่วมกับ Server-Side Language อะไรก็ได้! PHP, Python, Node.js, Java, Go... เลือกที่น้องๆ ถนัดเลย สมัยผมทำ SiamCafe ก็ใช้ PHP เป็นหลัก เพราะหาง่าย เรียนง่าย
วิธีใช้งาน / เริ่มต้นยังไง
ง่ายมากๆ! แค่ Include Htmx Library ใน HTML ของเรา แค่นั้นเอง!
<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9WDvJx3s+WO+SzlKMhq1qU7RsLuH6OGltvgdcQk" crossorigin="anonymous"></script>
จากนั้นก็ใส่ Attribute พิเศษของ Htmx ไปใน HTML Element ที่เราต้องการ
ขั้นตอนปฏิบัติจริง
Get Data จาก Server ด้วย hx-get
สมมติว่าเราต้องการดึงข้อมูลจาก Server แล้วแสดงผลใน Element ที่มี ID ว่า "result" เราจะทำแบบนี้
<button hx-get="/api/data" hx-target="#result">Get Data</button>
<div id="result"></div>
เมื่อคลิกปุ่ม `hx-get="/api/data"` จะส่ง GET Request ไปที่ `/api/data` แล้ว Response ที่ได้จาก Server จะถูกนำไปใส่ใน Element ที่มี ID ว่า `result`
Post Data ไปยัง Server ด้วย hx-post
ถ้าต้องการส่งข้อมูลไป Server (เช่น Form) เราจะใช้ `hx-post`
<form hx-post="/api/submit" hx-target="#result">
<input type="text" name="name">
<button>Submit</button>
</form>
<div id="result"></div>
Form นี้จะส่ง POST Request ไปที่ `/api/submit` โดยมีข้อมูลจาก Input Field ชื่อ `name` ไปด้วย Response ที่ได้จะถูกนำไปใส่ใน Element ที่มี ID ว่า `result`
Trigger Event อื่นๆ ด้วย hx-trigger
`hx-trigger` ช่วยให้เรากำหนด Event ที่จะ Trigger Htmx Request ได้ เช่น
<div hx-get="/api/update" hx-trigger="every 5s">
This will update every 5 seconds
</div>
Code นี้จะส่ง GET Request ไปที่ `/api/update` ทุกๆ 5 วินาที
เปรียบเทียบกับทางเลือกอื่น
แน่นอนว่า Htmx ไม่ใช่ทางเลือกเดียวในการสร้าง Modern Web Application ยังมี Framework Javascript อื่นๆ อีกมากมาย เช่น React, Angular, Vue.js
แต่ Htmx มีข้อดีคือ มันง่ายกว่า! น้องๆ ไม่ต้องเรียนรู้ Concept ที่ซับซ้อนของ Framework เหล่านั้น ก็สร้างเว็บเจ๋งๆ ได้
| Feature | Htmx | React | Angular | Vue.js |
|---|---|---|---|---|
| Learning Curve | ต่ำ | ปานกลาง | สูง | ปานกลาง |
| Complexity | ต่ำ | ปานกลาง | สูง | ปานกลาง |
| Javascript Required | น้อยมาก | เยอะ | เยอะ | เยอะ |
| Bundle Size | เล็ก | ใหญ่ | ใหญ่ | ปานกลาง |
| เหมาะกับ | Simple Apps, Progressive Enhancement | Complex Apps, SPAs | Enterprise Apps | Progressive Enhancement, SPAs |
สรุปคือ ถ้าโปรเจกต์น้องๆ ไม่ได้ซับซ้อนมาก Htmx คือตัวเลือกที่ดีมากๆ ครับ ลองเอาไปใช้ดูนะ SiamCafe Blog มีบทความอื่นๆ เกี่ยวกับ Web Development อีกเยอะเลย
Best Practices / เคล็ดลับจากประสบการณ์
เอาล่ะน้องๆ หลังจากที่เราพอรู้จัก Htmx กันแล้ว คราวนี้มาดูเคล็ดลับที่พี่ใช้จริงตอนทำโปรเจกต์กันบ้างดีกว่า สมัยพี่ทำร้านเน็ตฯ เนี่ย เรื่องความเร็วและความเสถียรสำคัญสุดๆ เพราะลูกค้าทุกคนอยากเล่นเกมลื่นๆ ไม่มีใครอยากรอโหลดนาน
Htmx ช่วยลดภาระของ Browser ได้เยอะมาก แต่ถ้าเราใช้ไม่ถูกวิธี มันก็อาจจะกลายเป็นดาบสองคมได้เหมือนกันนะ
3-4 เทคนิคที่ใช้ได้จริง
1. เลือกใช้ hx-trigger ให้เหมาะสม
hx-trigger คือตัวกำหนดว่าเมื่อไหร่ที่เราจะส่ง request ไปยัง server ตัวอย่างเช่น
<button hx-post="/submit" hx-trigger="click">Submit</button>
อันนี้คือส่ง request ไปที่ /submit เมื่อคลิกปุ่ม แต่บางทีเราอาจจะไม่ต้องรอให้คลิกก็ได้ เช่น
<input type="text" hx-post="/search" hx-trigger="keyup delay:500ms">
อันนี้จะส่ง request ไปที่ /search ทุกครั้งที่มีการพิมพ์ แต่จะรอ 500ms หลังจากพิมพ์เสร็จ เพื่อไม่ให้ส่ง request ถี่เกินไป เทคนิคนี้ใช้ได้ดีกับการทำ autocomplete หรือ live search
2. ใช้ hx-swap ให้ฉลาด
hx-swap คือตัวกำหนดว่าเราจะเอา response ที่ได้จาก server ไปแทนที่อะไรใน DOM ตัวอย่างเช่น
<div id="result" hx-get="/data" hx-swap="innerHTML"></div>
อันนี้คือเอา response จาก /data ไปแทนที่ทุกอย่างใน <div id="result"> แต่ถ้าเราอยากจะแทนที่แค่บางส่วน เราก็สามารถใช้ outerHTML หรือ beforebegin, afterend ได้
สมัยพี่ทำร้านเน็ตฯ เคยเจอเคสที่ลูกค้า complain ว่าเว็บมันกระพริบบ่อยมาก เพราะเราใช้ innerHTML กับ element ที่ใหญ่เกินไป พอเปลี่ยนมาใช้ outerHTML กับ element ที่เล็กลง ปัญหาก็หายไปเลย
3. Cache ให้เป็น
Htmx ไม่ได้จัดการเรื่อง cache ให้เราโดยอัตโนมัติ แต่เราสามารถใช้ HTTP cache header หรือ local storage ใน Browser ช่วยได้
ถ้าข้อมูลไม่ค่อยมีการเปลี่ยนแปลง เราก็สามารถตั้ง Cache-Control header ใน server ให้ Browser cache ข้อมูลไว้ได้เลย แต่ถ้าข้อมูลมีการเปลี่ยนแปลงบ่อย เราอาจจะต้องใช้ local storage หรือ session storage เก็บข้อมูลบางส่วนไว้ เพื่อลดจำนวน request ที่ต้องส่งไปที่ server
4. ใช้ hx-indicator แสดง loading state
เวลาเราส่ง request ไปที่ server มันอาจจะต้องใช้เวลาสักพัก กว่า response จะกลับมา ถ้าเราไม่แสดง loading state ให้ผู้ใช้เห็น เค้าอาจจะคิดว่าเว็บมันค้าง
<button hx-post="/submit" hx-trigger="click" hx-indicator="#loading">
Submit
<img id="loading" src="loading.gif" />
</button>
hx-indicator จะแสดง element ที่เรากำหนด (ในที่นี้คือ <img id="loading">) ในระหว่างที่กำลังส่ง request
สมัยพี่ทำร้านเน็ตฯ พี่จะใช้ animated GIF เล็กๆ เป็น loading indicator เพราะมันดูดีกว่า text "Loading..." เฉยๆ เยอะเลย
FAQ คำถามที่พบบ่อย
Htmx เหมาะกับ project แบบไหน?
Htmx เหมาะกับ project ที่ต้องการความเร็วและความเรียบง่าย ไม่ต้องการใช้ Javascript framework ขนาดใหญ่ แต่ก็ต้องการ interactivity ในระดับหนึ่ง
Htmx แทนที่ Javascript ได้ทั้งหมดเลยไหม?
ไม่ Htmx ช่วยลดปริมาณ Javascript ที่เราต้องเขียนได้ แต่ไม่ได้แทนที่ Javascript ทั้งหมด ถ้าเราต้องการทำอะไรที่ซับซ้อนมากๆ เราก็ยังต้องใช้ Javascript อยู่ดี
Htmx ยากไหม?
ไม่ยาก Htmx ใช้งานง่ายมาก เรียนรู้ได้เร็ว ถ้าเรามีความรู้พื้นฐาน HTML อยู่แล้ว ก็สามารถเริ่มใช้งาน Htmx ได้เลย
Htmx มีข้อเสียอะไรบ้าง?
ข้อเสียของ Htmx คือมันอาจจะทำให้ code HTML ของเราดูรก เพราะ attribute เยอะ แต่เราสามารถใช้ code editor ที่ support Htmx ช่วยได้
สรุป
Htmx เป็นเครื่องมือที่น่าสนใจมาก สำหรับคนที่ต้องการสร้าง web application ที่เร็วและเรียบง่าย มันช่วยลดปริมาณ Javascript ที่เราต้องเขียน และทำให้ code ของเราอ่านง่ายขึ้น
ลองเอาไปใช้ดูนะน้องๆ แล้วจะรู้ว่า Htmx มันเจ๋งจริง iCafeForex ก็ใช้ Htmx นะเออ
อย่าลืมแวะไปอ่านบทความอื่นๆ ใน SiamCafe Blog ด้วยนะ มีเรื่อง IT สนุกๆ อีกเยอะเลย
