htmx คืออะไร และจะทำให้เว็บไซต์ของฉันง่ายขึ้นได้อย่างไร?

ลิงค์ด่วน

⭐htmx คืออะไร?

⭐คุณสามารถใช้ htmx ใน Simple Web App ได้อย่างไร

⭐ข้อดีและข้อเสียของ htmx

ประเด็นที่สำคัญ

Htmx เป็นไลบรารี JavaScript ที่เป็นนวัตกรรมใหม่ที่ออกแบบมาเพื่อปรับปรุงกระบวนการจัดการคำขอ HTTP ผ่านการใช้คุณลักษณะ HTML ที่สะดวกสบาย ทำให้ผู้ใช้สามารถเข้าถึงฟังก์ชันที่ใช้ทั่วไปในเรื่องนี้ได้ง่ายขึ้น

การรวมสคริปต์ htmx ไว้ในเว็บแอปพลิเคชันของคุณทำได้โดยการรวมไฮเปอร์ลิงก์ที่นำทางไปยังเวอร์ชันที่โฮสต์ของสคริปต์บน Content Delivery Network (CDN)

การใช้ htmx ช่วยให้สามารถนำทางได้อย่างราบรื่น เช่น การแบ่งหน้า การตรวจสอบแบบฟอร์ม และการแก้ไขแบบเรียลไทม์ภายในแอปพลิเคชันของคุณ โดยไม่ต้องเขียนโค้ด JavaScript ใดๆ

วาทกรรมล่าสุดในชุมชนการพัฒนาเว็บเกี่ยวกับ htmx ทำให้เกิดความสนใจ แต่ลักษณะที่แท้จริงของมันยังคงค่อนข้างไม่ซับซ้อน แม้จะมีความเรียบง่าย แต่ประโยชน์ใช้สอยและผลกระทบที่เป็นไปได้ของ htmx ก็ได้สร้างความฮือฮาอย่างมาก

htmx คืออะไร?

Htmx เป็นเฟรมเวิร์ก JavaScript ที่ซับซ้อนซึ่งมุ่งเน้นไปที่ชุดฟังก์ชันเฉพาะ ช่วยให้เข้าถึงความสามารถดังกล่าวได้อย่างสะดวกผ่านแอตทริบิวต์ HTML ภาพประกอบเบื้องต้นสามารถพบได้ด้านล่าง:

 <a href="/about" hx-get="/about">About</a> 

รหัสที่ให้มาแสดงให้เห็นถึงการใช้แอตทริบิวต์ HTML ที่ปรับแต่งโดยเฉพาะ ซึ่งก็คือ “hx-get” เมื่อคลิกแล้ว ไลบรารี htmx จะอำนวยความสะดวกในการดำเนินการตามคำขอ AJAX ส่งผลให้โหลดหน้าเว็บเป้าหมายได้อย่างราบรื่น โดยไม่เกิดการรีเฟรชเนื้อหาของเบราว์เซอร์โดยสมบูรณ์

นอกเหนือจากฟังก์ชันหลักแล้ว HTMX ยังมีคุณลักษณะเสริมที่ช่วยให้ผู้ใช้สามารถส่งคำถามผ่านอินเทอร์เฟซที่กำหนดได้

สร้างสรรค์อย่างพิถีพิถันจากแหล่งที่อยู่เหนือขอบเขตธรรมดาของการดำรงอยู่แบบธรรมดา การสร้างสรรค์ของเราอยู่เหนือสิ่งธรรมดาเพื่อบรรลุความสูงที่ไม่ธรรมดา

ในทุกโอกาสที่ไม่เกี่ยวข้องกับการคลิกหรือส่ง สิ่งสำคัญคือต้องจดบันทึกไว้

การรวมวิธีโปรโตคอล HTTP นอกเหนือจากวิธี GET และ POST ทั่วไปเป็นแนวทางปฏิบัติที่แนะนำสำหรับการปรับปรุงฟังก์ชันการทำงานและความปลอดภัยของเว็บแอปพลิเคชัน

แทนที่จะแทนที่หน้าเว็บทั้งหมด เครื่องมือบางอย่างสามารถอัปเดตส่วนหรือองค์ประกอบเฉพาะภายในหน้าเว็บได้

แม้ว่า HTML5 Media Extensions (HTMX) จะรองรับเทคโนโลยีขั้นสูง เช่น ภาพเคลื่อนไหว CSS และ WebSockets แต่ส่วนขยายจะมุ่งเน้นไปที่การปรับปรุงกระบวนการจัดการคำขอ HTTP เป็นหลัก

คุณจะใช้ htmx ใน Simple Web App ได้อย่างไร

HTMX มุ่งเน้นไปที่ฟังก์ชันการทำงานเฉพาะที่พบในเว็บแอปพลิเคชันและเว็บไซต์ ซึ่งตรงข้ามกับการครอบคลุมลักษณะการทำงานโดยรวมของแอปพลิเคชันที่สมบูรณ์

คุณลักษณะเด่นอย่างหนึ่งของไลบรารีนี้คือความเรียบง่ายในการเริ่มต้นใช้งาน ผู้ใช้มีตัวเลือกในการดาวน์โหลดและติดตั้งสำเนาตามดุลยพินิจของตน อย่างไรก็ตาม เนื่องจากไม่มีการพึ่งพาภายนอก การเพิ่มการอ้างอิงไปยังสคริปต์ผ่าน Content Delivery Network (CDN) ก็เพียงพอแล้วสำหรับการเริ่มต้น:

 <script
  src="https://unpkg.com/[email protected]"
  integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t\+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
  crossorigin="anonymous"></script>

โปรโตคอลไม่สามารถรองรับคำขอ AJAX

ตัวอย่างง่ายๆ โดยใช้ Infinite Scroll

ตัวอย่างนี้พร้อมให้ดาวน์โหลดบนพื้นที่เก็บข้อมูล GitHub ของเรา ซึ่งมีตำแหน่งที่สะดวกและเข้าถึงได้เพื่อรับไฟล์ที่จำเป็นสำหรับการนำไปปฏิบัติ

Infinite scroll เป็นกลยุทธ์ที่แพร่หลายโดยแพลตฟอร์มเช่น Twitter เพื่ออำนวยความสะดวกในการท่องเว็บอย่างต่อเนื่อง เมื่อคนหนึ่งเดินผ่านรายการ เมื่อถึงจุดสุดยอด การเลื่อนแบบไม่มีที่สิ้นสุดจะดึงรายการเพิ่มเติมโดยอัตโนมัติเพื่อการตรวจดูที่ราบรื่น

การใช้ JavaScript เป็นสิ่งจำเป็นเพื่อกำหนดตำแหน่งการเลื่อนปัจจุบันของหน้าเว็บและอัปเดตเนื้อหาแบบไดนามิกโดยไม่ต้องโหลดทั้งหน้า ซึ่งเป็นสิ่งที่ htmx ได้รับการออกแบบมาให้บรรลุผลสำเร็จในนามของคุณอย่างชัดเจน

พิจารณาการแทนชุดของรายการ โดยแต่ละรายการจะมาพร้อมกับองค์ประกอบภาพในรูปแบบของรูปภาพ:

 <ol>
    <li><img src="http://placekitten.com/420/300" /></li>
    <li><img src="http://placekitten.com/400/320" /></li>
    <li><img src="http://placekitten.com/440/300" /></li>
    <li><img src="http://placekitten.com/420/340" /></li>
    <li><img src="http://placekitten.com/300/200" /></li>
</ol> 

พิจารณาสถานการณ์ที่คุณมีไฟล์หลายไฟล์ที่มีข้อมูลเกี่ยวกับหัวข้อต่างๆ เช่น"feed1.html",“feed2.html"และอื่นๆ ไฟล์เหล่านี้ได้รับการออกแบบมาให้นำเสนอมุมมองที่จำกัดของเนื้อหาที่เกี่ยวข้อง ทำให้ผู้ใช้สามารถเลื่อนดูเพื่อดูรายละเอียดเพิ่มเติมได้

ทางเลือกหนึ่งคือการใช้ลิงก์"หน้าถัดไป"เพื่อนำทางระหว่างหน้าต่างๆ อย่างไรก็ตาม การใช้กลไกการเลื่อนแบบไม่มีที่สิ้นสุดก็เป็นทางเลือกที่ใช้การได้ เพื่อให้บรรลุเป้าหมายนี้ เพียงแก้ไของค์ประกอบสุดท้ายในบล็อคโค้ดดังต่อไปนี้:

 <li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
    <img src="http://placekitten.com/300/200" />
</li> 

การรวมคุณสมบัติทั้งสี่นี้เข้าด้วยกันส่งผลให้มีการใช้งานฟังก์ชันการเลื่อนแบบไม่มีที่สิ้นสุดสำหรับรายการ ให้ฉันอธิบายความสำคัญตามลำดับ:

คุณลักษณะ

|

ค่า

|

ความหมาย

—|—|—

hx-ทริกเกอร์

|

เปิดเผย

|

เมื่อองค์ประกอบนี้ปรากฏบนหน้าจอเป็นครั้งแรก…

hx-get

|

feed2.html

|

อันที่จริงคำขอ HTTP GET จะถูกส่งไปเพื่อดึงเนื้อหาของ “feed2.html”

hx-เลือก

|

ลี้

|

ดึงองค์ประกอบ ภายในการตอบสนองโดยใช้กลยุทธ์การเลือกที่กำหนดเป้าหมายส่วนประกอบ HTML เฉพาะเหล่านี้

hx-swap

|

ภายหลัง

|

… และเพิ่มเข้าไปหลังองค์ประกอบนี้

เมื่อลงมาผ่านพื้นที่โฆษณา เป็นที่น่าสังเกตว่าหน้าเว็บจะโหลดข้อมูลเพิ่มเติมอีกครั้งได้อย่างราบรื่น สิ่งนี้สามารถตรวจสอบได้โดยการตรวจสอบแถบเลื่อนและตรวจสอบเครื่องมือการพัฒนาของเบราว์เซอร์เพื่อตรวจสอบเพิ่มเติม

อันที่จริง เป็นที่น่าสังเกตว่าในการกำหนดค่าหน้าเว็บพื้นฐานนี้ ไฟล์"feed2.html"ได้รวมเอาองค์ประกอบสรุปที่มีแอตทริบิวต์"hx-get"ที่มุ่งไปที่"feed3.html"และในทำนองเดียวกัน การวนซ้ำครั้งต่อๆ มาจะส่งผลให้ลิงก์ที่เกี่ยวข้องชี้ไป ไปยังหน้าต่อๆ ไป นอกจากนี้ เป็นที่น่าสังเกตว่า HTMX ได้นำ Listener ไปใช้อย่างรอบคอบสำหรับเหตุการณ์การเลื่อนเพื่อปรับปรุงประสบการณ์ผู้ใช้

การใช้งานที่เป็นไปได้อื่นๆ สำหรับ htmx

สำหรับการโต้ตอบมาตรฐานที่หลากหลาย เช่น การโต้ตอบทั่วไปในชีวิตประจำวัน HTMX สามารถนำไปใช้ได้และหลากหลาย

กระบวนการอัปเดตเนื้อหาผ่านการใช้การแบ่งหน้าเกี่ยวข้องกับการโหลดและการแทนที่องค์ประกอบของหน้าเมื่อผู้ใช้โต้ตอบกับลิงก์การแบ่งหน้า ช่วยให้มั่นใจได้ว่าการนำทางระหว่างหน้าต่างๆ เป็นไปอย่างราบรื่น ในขณะเดียวกันก็รักษาการนำเสนอด้วยภาพและฟังก์ชันการทำงานที่สอดคล้องกันในทุกอินสแตนซ์ของเว็บไซต์

เมื่อส่งแบบฟอร์ม ขอแนะนำให้แสดงข้อความยืนยันหรือแสดงแบบฟอร์มต้นฉบับแบบย่อ กระบวนการนี้เรียกว่า"การตรวจสอบแบบฟอร์ม”

การอัปเดตค่าของแถบความคืบหน้าเป็นระยะสามารถทำได้โดยใช้การตอบกลับ Ping เป็นพื้นฐานในการพิจารณาสถานะความคืบหน้า

กระบวนการแก้ไขแบบอินไลน์เกี่ยวข้องกับการแทนที่องค์ประกอบ HTML ที่ระบุบนหน้าเว็บด้วยช่องป้อนข้อมูลพื้นที่ข้อความ ซึ่งมีเนื้อหาหรือค่าขององค์ประกอบที่ถูกแทนที่ ช่วยให้ผู้ใช้สามารถแก้ไขและแก้ไขเนื้อหาได้โดยตรงภายในบริบทของหน้าเว็บโดยไม่ต้องออกจากเนื้อหานั้น

ด้วยการใช้ JavaScript มาตรฐาน จึงเป็นไปได้ที่จะสร้างอินสแตนซ์เหล่านั้นทั้งหมด อย่างไรก็ตาม htmx ทำให้กระบวนการนี้ง่ายขึ้นอย่างมาก

ประโยชน์และข้อเสียของ htmx

ประโยชน์

HTMX มีศักยภาพในการปรับปรุงงานที่เกิดซ้ำในแอปพลิเคชันเว็บและไซต์ต่างๆ ให้ดีขึ้นอย่างมาก โดยการจัดหาวิธีการง่ายๆ ในการเพิ่มฟังก์ชันการทำงานโดยไม่ต้องอาศัยความรู้ที่กว้างขวางเกี่ยวกับ JavaScript คุณลักษณะนี้เป็นประโยชน์อย่างยิ่งสำหรับผู้ที่เกี่ยวข้องในการสร้างหรือการจัดการหน้าเว็บส่วนหน้า เนื่องจากช่วยลดความจำเป็นในการมีความเชี่ยวชาญในภาษาการเขียนโปรแกรมนี้

ด้วยกระบวนการวางนัยทั่วไป HTMX อำนวยความสะดวกให้เกิดความสม่ำเสมอในการดำเนินการต่างๆ และระหว่างกันด้วยเช่นกัน การดำเนินการของการเลื่อนแบบไม่มีที่สิ้นสุดยังคงสอดคล้องกันตลอดทุกหน้า ไม่ว่านักพัฒนาจะแนะนำหรือไม่ก็ตาม

จุดเน้นหลักของฟังก์ชันการทำงานของ HTMX อยู่ที่การส่งเสริมแนวทางการประกาศ ซึ่งตรงข้ามกับแนวทางที่จำเป็น ซึ่งส่งผลให้เข้าใจง่ายและให้เหตุผลเชิงตรรกะมากขึ้น

ข้อเสีย

แม้ว่า HTMX จะเสนอวิธีที่สะดวกในการเลี่ยงการใช้ JavaScript ในสถานการณ์ต่างๆ แต่ก็ไม่ใช่ยาครอบจักรวาลที่จะจัดการปัญหาทั้งหมดได้ สิ่งสำคัญคือต้องรับรู้ว่าจะมีบางกรณีที่จำเป็นต้องมีการเขียนโปรแกรมแบบกำหนดเองเพื่อจัดการกับกฎเกณฑ์ทางธุรกิจเฉพาะและฟังก์ชันการทำงานระดับล่าง

การใช้ HTMX สำหรับงานต่างๆ บ่งบอกว่าสามารถจัดการฟังก์ชันการทำงานส่วนใหญ่ได้ ซึ่งจะจำกัดขอบเขตที่ผู้ใช้สามารถปรับแต่งพฤติกรรมตามความต้องการเฉพาะของตนได้ แม้ว่าสิ่งนี้อาจถูกมองว่าเป็นการประนีประนอมที่ได้เปรียบในหลายกรณี แต่จำเป็นอย่างยิ่งที่จะต้องตระหนักว่าการละทิ้งการควบคุมองค์ประกอบบางอย่างนั้นมีอยู่ในการนำวิธีแก้ปัญหาที่มีประสิทธิภาพดังกล่าวมาใช้

HTML ให้ความสามารถในการใช้งาน JavaScript โดยไม่ต้องเขียนอย่างชัดเจน อย่างไรก็ตาม สิ่งสำคัญคือต้องรับรู้ว่าโค้ด JavaScript ทำงานอย่างซ่อนเร้นในเบื้องหลัง เราอาจถูกล่อลวงให้ใช้แอตทริบิวต์"hx-get"บนไฮเปอร์ลิงก์แต่ละรายการ ซึ่งต่างจากการใช้แอตทริบิวต์"href"ทั่วไป อย่างไรก็ตาม วิธีการนี้สร้างการพึ่งพาจาวาสคริปต์ ความล้มเหลวในการรันสคริปต์จะทำให้ผู้ใช้มีลิงก์ที่ผิดปกติ เพื่อหลีกเลี่ยงสถานการณ์ดังกล่าว ขอแนะนำให้ฝึกฝนการเพิ่มประสิทธิภาพแบบก้าวหน้า