htmz - เฟรมเวิร์ก HTML ขนาดจิ๋วมาก

 (leanrada.com)
21 คะแนน โดย GN⁺ 2024-02-21 | 3 ความคิดเห็น | แชร์ทาง WhatsApp
  • ไมโครเฟรมเวิร์ก HTML แบบมินิมัลลิสต์ที่ช่วยให้สร้างเว็บยูสเซอร์อินเทอร์เฟซแบบโมดูลาร์และไดนามิกได้ด้วยวิธีที่เรียบง่ายเหมือน plain HTML
  • ทำงานเพียงอย่างเดียวเท่านั้น: สามารถโหลดทรัพยากร HTML จากทุกองค์ประกอบบนหน้าได้
    • ทำให้สามารถแทนที่ชิ้นส่วนของหน้าได้ โดยเปิดทางให้อัปเดตเฉพาะบางส่วนของหน้าเท่านั้น
  • มีขนาดรวมเพียง 166 ไบต์ ใช้แค่ HTML ล้วน ไม่มี dependency และไม่ต้องใช้ JS bundle, แบ็กเอนด์, แอททริบิวต์พิเศษ, DSL หรือ custom element
  • ใช้การโต้ตอบกับ DOM จริง โดยไม่ใช้ VDOM, click listener, AJAX, fetch เป็นต้น
  • แค่เพิ่ม inline HTML snippet ที่เป็น iframe ก็เสร็จ
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>

วิธีใช้งานพื้นฐาน

  • การใช้ htmz ต้องมีไฮเปอร์ลิงก์ (หรือ form) ที่มีแอททริบิวต์ href ซึ่งชี้ไปยัง URL ของทรัพยากร (หรือ action ของ form) และมีตัวเลือก ID ปลายทาง
  • แม้จะดูเหมือนเป็นการนำ URL fragment มาใช้ซ้ำเป็นตัวเลือก ID ปลายทาง แต่ในบริบทนี้ URL fragment ไม่ได้ถูกใช้เพื่อจุดประสงค์อื่น จึงสามารถนำกลับมาใช้ได้

มันทำอะไรแน่?

  • htmz มอบความสามารถเพียงอย่างเดียวคือทำให้สามารถโหลดทรัพยากร HTML ภายในองค์ประกอบใดก็ได้บนหน้า
  • แนวคิดนี้ไม่ใช่เรื่องใหม่ และการแบ่งเว็บเพจออกเป็นส่วนที่รีโหลดได้อย่างอิสระก็มีมาตั้งแต่ช่วงกลางทศวรรษ 1990
  • htmz คือการทำให้ HTML frame เป็นแนวคิดทั่วไปขึ้น โดยสามารถโหลดทรัพยากร HTML ได้จากองค์ประกอบใดก็ได้ในหน้า

การใช้งานขั้นสูง

  • ปัจจุบันใน HTML5 มีเพียงองค์ประกอบ <a> และ <form> เท่านั้นที่สามารถระบุและเรียกใช้ htmz เป็นเป้าหมายได้
  • สามารถใช้องค์ประกอบ <base> เพื่อกำหนดให้ htmz เป็นเป้าหมายเริ่มต้นสำหรับลิงก์แบบ relative ทั้งหมดได้
  • หากต้องการใช้ค่า target จริง ผู้ใช้สามารถใช้แฮ็กที่เขียนตัวเลือก ID ปลายทางลงในแอททริบิวต์ target ได้โดยตรง

สคริปต์ / การโต้ตอบ

  • หากต้องการการโต้ตอบมากขึ้น ก็สามารถใช้ JavaScript ซึ่งเป็นภาษาสคริปต์คู่หูของ htmz ได้
  • htmz ไม่ได้กีดกันการเขียน JS หรือการใช้ไลบรารี UI และยังคงสามารถส่งค่าฟอร์มด้วยฟอร์ม HTTP ปกติผ่าน htmz ได้

การขยายความสามารถ

  • หากต้องการตัวเลือกขั้นสูง การจัดการข้อผิดพลาด หรือหลายเป้าหมาย นักพัฒนาสามารถขยายเพิ่มได้ตามต้องการ

FAQ

  • htmz คือ iframe ที่มีชื่อว่า htmz และทำงานโดยเรียก htmz ผ่านการโหลด URL ด้วย iframe
  • htmz ทำหน้าที่เป็น proxy target โดยส่งต่อการตอบกลับไปยังเป้าหมายที่ระบุไว้
  • htmz ไม่ได้ parse DOM อย่างต่อเนื่อง ไม่ค้นหาแอททริบิวต์หรือไวยากรณ์พิเศษ และไม่ผูก listener เข้ากับ DOM
  • htmz เป็น HTML microframework ที่ใช้ JS เพียงเล็กน้อยที่สุด
  • htmz เป็น snippet และย่อมาจาก 'Html with Targeted Manipulation Zones'
  • โปรเจกต์นี้เริ่มต้นขึ้นจากการตอบสนองต่อ htmx และเป็นการทดลองว่าเราจะทำฟังก์ชันแบบ load-link-target บนเว็บยุคปัจจุบันได้โดยไม่ใช้ htmx หรือไม่
  • แม้ htmz จะมีขนาดเล็กมาก แต่ก็ให้ความรู้สึกทรงพลัง โดยข้อจำกัดหลักคือหนึ่งการตอบกลับจะมีปลายทางได้เพียงหนึ่งเดียว

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

  • แนวทางที่น่าสนใจ: htmz นำเสนอแนวทางที่ช่วยลดความซับซ้อนของเฟรมเวิร์กในการพัฒนาเว็บ และใช้ HTML ล้วนในการสร้างเว็บอินเทอร์เฟซ นั่นทำให้การพัฒนาเว็บเข้าถึงได้ง่ายแม้สำหรับวิศวกรซอฟต์แวร์ระดับเริ่มต้น
  • ความสมดุลระหว่างประสิทธิภาพกับความเรียบง่าย: ขนาดที่เบามากเพียง 166 ไบต์และโครงสร้างที่ไม่มี dependency สามารถช่วยยกระดับประสิทธิภาพของเว็บเพจได้อย่างมาก อีกทั้งยังให้ความเรียบง่ายที่ทำให้สร้างเว็บเพจที่มีประสิทธิผลได้โดยไม่ต้องเรียนรู้เฟรมเวิร์ก JavaScript ที่ซับซ้อน
  • อนาคตของการพัฒนาเว็บ: htmz มอบมุมมองที่น่าสนใจต่ออนาคตของการพัฒนาเว็บ โดยแสดงให้เห็นว่าวิวัฒนาการของมาตรฐานและเทคโนโลยีเว็บสามารถมอบเครื่องมือที่เรียบง่ายและมีประสิทธิภาพยิ่งขึ้นให้แก่นักพัฒนาได้อย่างไร

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

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

 
joyfui 2024-03-06

ว้าว อันนี้แหวกแนวดีนะครับ 555 ในลิงก์เขาบอกว่าตัวเองไม่ใช่ทั้งไลบรารีหรือเฟรมเวิร์ก เป็นแค่ snippet เฉยๆ... ฮ่า
 
savvykang 2024-02-21

การใช้งานขั้นสูง: ใน HTML5 ปัจจุบัน ดูเหมือนว่าจะมีเพียงองค์ประกอบ <a> และ <form> เท่านั้น -> ใน HTML5 ปัจจุบัน มีเพียงองค์ประกอบ <a> และ <form> เท่านั้น
ดูเหมือนว่ายังไม่ได้ใช้การ escape HTML
 
GN⁺ 2024-02-21
ความคิดเห็นบน Hacker News

  • สรุปความคิดเห็นแรก:

    • ตอบรับเชิงบวกต่อแนวคิดการใช้ iframe แบบตั้งชื่อและฟอร์มที่ระบุ target สำหรับหน้าที่เรนเดอร์จากฝั่งเซิร์ฟเวอร์และวิดเจ็ตที่มีการจำกัดขอบเขตสไตล์
    • htmz ดูเหมือนจะนำแนวคิดนี้ไปทำได้ดี
    • เน้นว่าไม่ควรละทิ้งไอเดียที่ดี แต่ควรมุ่งที่ความสมบูรณ์และความยอดเยี่ยม พร้อมทั้งสื่อสารไอเดียให้ดี
    • มองว่าเป็นการแฮ็กที่ยอดเยี่ยมซึ่งแสดงให้เห็นว่าเบราว์เซอร์สามารถรองรับ SPA ได้โดยพื้นฐาน
    • เป็นเดโมที่ยอดเยี่ยมจากคนที่เข้าใจแพลตฟอร์มอย่างลึกซึ้ง
    • เห็นว่าเว็บแบบวานิลลาควรเรียบง่ายและทรงพลัง
    • ประเมินในเชิงบวกต่อการใช้ประโยชน์จากองค์ประกอบที่เว็บมีอยู่ให้ได้มากที่สุด
    • ชื่นชมทักษะการสื่อสารและการตลาดของผู้สร้าง

  • สรุปความคิดเห็นที่สอง:

    • เป็นการแฮ็กที่แสดงให้เห็นว่าเบราว์เซอร์สามารถรองรับ SPA ได้โดยพื้นฐาน
    • ต้องการเพียงแอตทริบิวต์เพิ่มอีกไม่กี่ตัวเพื่อหลีกเลี่ยง iframe
    • อาจมีประโยชน์ในการพิสูจน์ประเด็นมากกว่าจะเป็นเครื่องมือใช้งานจริง
    • ชี้ว่ามันซับซ้อนเกินไปเมื่อเทียบกับสิ่งที่ htmx มอบให้

  • สรุปความคิดเห็นที่สาม:

    • แชร์ประสบการณ์พัฒนาไคลเอนต์อีเมลแบบ HTML ราวปี 2001
    • ใช้ iframe ที่ซ่อนอยู่เพื่อโหลดข้อมูลจากเซิร์ฟเวอร์และจัดการ DOM
    • ตอนนั้นการรองรับของเบราว์เซอร์ยังไม่เพียงพอ แต่กลไกพื้นฐานเหมือนเดิม
    • ประเมินในเชิงบวกที่มันถูกทำเป็นแพ็กเกจขนาดกะทัดรัดโดยแทบไม่ต้องพึ่งไลบรารีมากมาย
    • มองว่าอาจเหมาะกับกรณีใช้งานส่วนใหญ่เมื่อเทียบกับเฟรมเวิร์กฝั่งฟรอนต์เอนด์อย่าง React ที่นิยมใช้กันในปัจจุบัน

  • สรุปความคิดเห็นที่สี่:

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

  • สรุปความคิดเห็นที่ห้า:

    • ชื่นชมว่าเป็นเดโมที่ยอดเยี่ยมจากคนที่เข้าใจแพลตฟอร์มอย่างแท้จริง
    • แม้มีโอกาสใช้งานจริงต่ำ แต่ก็ยังมองว่ายอดเยี่ยม

  • สรุปความคิดเห็นที่หก:

    • เสนอว่าลบ this. ออกจาก inline event listener เพื่อให้ขนาดโค้ดเล็กลงได้อีก
    • ให้ทิปว่าสามารถประหยัดได้ 10 ไบต์ในสไนเป็ต

  • สรุปความคิดเห็นที่เจ็ด:

    • ชี้ว่าการใช้ target อาจไม่เสื่อมสภาพอย่างสง่างามแบบ htmx เมื่อปิดใช้งาน JS
    • แสดงมุมมองเชิงอุดมคติเกี่ยวกับสถานการณ์ที่ปิดใช้งาน JS

  • สรุปความคิดเห็นที่แปด:

    • ชี้ว่าการนำ <slot> มาใช้ซ้ำในลักษณะนี้เป็นไอเดียที่ไม่ดี
    • ในเบราว์เซอร์ <slot> มีพฤติกรรมที่เฉพาะเจาะจงมาก และไม่ว่าไลบรารีจะทำอะไร มันจะถูกแทนที่ด้วยลูกของ host element
    • ระบุว่าในกรณีลักษณะนี้มีองค์ประกอบ <output> อยู่แล้ว

  • สรุปความคิดเห็นที่เก้า:

    • ชี้ว่าส่วนเดโมยังต้องปรับปรุง
    • เมื่อคลิก "แท็บ" เพื่อเปลี่ยนโค้ดตัวอย่าง จะมีการเพิ่ม history event แต่ URL ไม่อัปเดต
    • วิจารณ์ว่าการอ้างว่าเป็น "แค่ HTML" นั้นกำลังละเมิดกฎพื้นฐานของเว็บ/UX

  • สรุปความคิดเห็นที่สิบ:

    • ทำให้นึกถึง pjax ซึ่งคล้ายกัน แต่ pjax ใช้ XHR แทน iframe และใช้ pushState โดยปริยายเพื่อให้ปุ่มย้อนกลับทำงานได้