Hotwire: เทคโนโลยี HTML over the wire

 (hotwired.dev)
2 คะแนน โดย GN⁺ 2024-06-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

HTML over the wire

Hotwire เป็นแนวทางทางเลือกในการสร้างเว็บแอปพลิเคชันสมัยใหม่ โดยส่ง HTML แทน JSON เพื่อลดการใช้ JavaScript ให้เหลือน้อยที่สุด แนวทางนี้ช่วยให้โหลดหน้าแรกได้รวดเร็ว คงการเรนเดอร์เทมเพลตไว้ที่ฝั่งเซิร์ฟเวอร์ และมอบประสบการณ์การพัฒนาที่เรียบง่ายและมีประสิทธิภาพมากขึ้น

เนื้อหาหลัก

  • โหลดหน้าแรกได้รวดเร็ว: เพิ่มความเร็วในการโหลดเริ่มต้นด้วยการส่ง HTML
  • การเรนเดอร์เทมเพลตบนเซิร์ฟเวอร์: เรนเดอร์เทมเพลตบนเซิร์ฟเวอร์โดยไม่ต้องพึ่งโค้ด JavaScript ฝั่งไคลเอนต์ที่ซับซ้อน
  • ประสบการณ์การพัฒนาที่มีประสิทธิภาพ: มอบสภาพแวดล้อมการพัฒนาที่เรียบง่ายและมีประสิทธิภาพมากขึ้นในหลายภาษาโปรแกรม
  • เฟรมเวิร์กจากทีม 37signals: สามารถใช้เฟรมเวิร์กที่ออกแบบโดยทีม 37signals ผู้พัฒนา HEY ได้

ความเห็นของ GN⁺

  • เพิ่มประสิทธิภาพการพัฒนา: การลดการใช้ JavaScript ช่วยให้นักพัฒนาสร้างเว็บแอปพลิเคชันได้ง่ายขึ้น
  • อาจเพิ่มภาระให้เซิร์ฟเวอร์: เนื่องจากมีการเรนเดอร์เทมเพลตบนเซิร์ฟเวอร์ ภาระของเซิร์ฟเวอร์อาจเพิ่มขึ้น
  • การเปรียบเทียบกับ SPA เดิม: ควรพิจารณาข้อดีข้อเสียเมื่อเทียบกับ single-page application (SPA) แบบดั้งเดิม
  • รองรับหลายภาษา: สามารถใช้งานได้กับหลายภาษาโปรแกรม จึงมีความยืดหยุ่นสูง
  • ข้อควรพิจารณาในการนำเทคโนโลยีมาใช้: ควรตรวจสอบความเข้ากันได้กับระบบเดิมและประเด็นด้านประสิทธิภาพล่วงหน้า

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-06-03
ความคิดเห็นบน Hacker News
  • ในฐานะผู้ใช้เว็บแอป Hey ประสบการณ์บนการเชื่อมต่อที่ช้านั้นไม่ค่อยดี อาจเป็นปัญหาจากนักพัฒนาที่ไม่ได้เพิ่มสถานะการโหลดหรือสถานะข้อผิดพลาด หรืออาจเกิดจากความซับซ้อนหรือบั๊กก็ได้
  • htmx ให้ความสามารถผ่านไฟล์ JavaScript เพียงไฟล์เดียว และมักใช้ร่วมกับแบ็กเอนด์ Go มีความยืดหยุ่นจนน่าอยากลอง
  • เดิมทีมีมุมมองเชิงลบต่อ Hotwire/Livewire แต่ตอนนี้เข้าใจแล้วว่ามันขึ้นอยู่กับบริบท เพราะไม่ได้เขียนแอปแบบไฮเปอร์มีเดีย จึงเพิ่งตระหนักถึงจุดนี้หลังกลับไปอ่านบทความ htmx และ REST อีกครั้ง
  • ถ้ากำลังมองหาสิ่งที่คล้ายกันใน PHP/Laravel ขอแนะนำ Livewire สำหรับโปรเจ็กต์ที่ซับซ้อนจะใช้ React แต่การเขียนทุกอย่างด้วย Blade/PHP ได้ทั้งหมดก็ให้ความรู้สึกสดใหม่
  • เป็นวิธีที่ทำ PWA ได้ง่าย และเน้นนักพัฒนาเป็นศูนย์กลางมากกว่าเมื่อเทียบกับ React/Vue/Svelte ประเด็นการแข่งขันอยู่ที่ว่าจะผสานกับเฟรมเวิร์กแบ็กเอนด์ได้ดีแค่ไหน
  • มีการแชร์ลิงก์บทสนทนา HN จากปี 2020
  • ย้อนนึกถึงแนวทางที่เคยใช้ในปี 2005 หรือ 2006 โดยดักจับการคลิก เพิ่มพารามิเตอร์ แล้วส่งคืนบางส่วนของ HTML ที่เรนเดอร์แล้ว
  • สำหรับเว็บแอปที่ไม่ต้องการฟรอนต์เอนด์ที่โต้ตอบสูงมาก Turbo และ Stimulus ช่วยลดสิ่งที่นักพัฒนาใหม่ต้องเรียนรู้
  • มีการทำไอเดียที่มินิมัลกว่านี้ชื่อ Swap JS ไว้เมื่อ 2 ปีก่อน และมันทำงานได้ดีในบางโปรเจ็กต์
  • ช่วงหลังมีการถกเถียงเกี่ยวกับ Hotwire และ Rails จากโพสต์ออนไลน์ที่บอกว่าโมดัลของ Hey ช้า โดย DHH อ้างว่าวิดีโอต้นฉบับเป็นตัวจำกัดความเร็ว ขณะที่คนอื่นวิจารณ์ว่า Hotwire พึ่งพาเครือข่ายมากเกินไป