Clay – ไลบรารีเลย์เอาต์ UI

 (nicbarker.com)
2 คะแนน โดย GN⁺ 2024-12-21 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • แนะนำ Clay

    • Clay เป็นไลบรารีจัดวางเลย์เอาต์ UI อัตโนมัติสไตล์ Flexbox ที่เขียนด้วยภาษา C
    • มีไวยากรณ์แบบประกาศและประสิทธิภาพระดับไมโครวินาที
    • ปัจจุบันเลย์เอาต์ของหน้าเว็บนี้เองก็สร้างขึ้นด้วย Clay

  • คุณสมบัติหลัก

    • ประสิทธิภาพสูง

      • รองรับเลย์เอาต์แบบตอบสนองสไตล์ Flexbox
      • ใช้งานได้ใน C/C++ ด้วยไฟล์ .h เพียงไฟล์เดียว และคอมไพล์เป็นไฟล์ .wasm ขนาด 15kb ได้
      • ประกอบด้วยโค้ด C99 ราว 2000 บรรทัด และไม่มี dependency ใด ๆ รวมถึง C standard library
      • ใช้งานร่วมกับเรนเดอเรอร์ได้หลากหลาย เช่น Raylib, WebGL Canvas, HTML
      • ให้เอาต์พุตที่ยืดหยุ่น ซึ่งสามารถนำไปประกอบเข้ากับเอนจินหรือสภาพแวดล้อมแบบกำหนดเองได้ง่าย

    • ไวยากรณ์แบบประกาศ

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

    • ประสิทธิภาพสูง

      • เร็วพอที่จะคำนวณ UI ทั้งหมดใหม่ได้ทุกเฟรม
      • ใช้หน่วยความจำเพียง 3.5mb ด้วยการจัดสรรแบบคงที่และการนำกลับมาใช้ซ้ำ โดยไม่ใช้ malloc/free
      • ทำให้แอนิเมชันและการออกแบบ UI แบบตอบสนองง่ายขึ้น ด้วยการหลีกเลี่ยงเทคนิคเร่งประสิทธิภาพแบบมาตรฐาน

  • อิสระจากเรนเดอเรอร์และแพลตฟอร์ม

    • ส่งออกเป็นอาร์เรย์ที่จัดเรียงแล้วของคำสั่งเรนเดอร์พื้นฐาน เช่น RECTANGLE, TEXT, IMAGE
    • สามารถเขียนเรนเดอเรอร์ของตัวเองได้ด้วยโค้ดเพียงไม่กี่ร้อยบรรทัด หรือใช้ตัวอย่างที่มีให้ เช่น Raylib, WebGL Canvas
    • มี HTML renderer ให้ด้วย และหน้าที่คุณกำลังดูอยู่ตอนนี้ก็เป็นตัวอย่างนั้น

  • เครื่องมือดีบักในตัว

    • มีเครื่องมือดีบักในตัวสไตล์ "Chrome Inspector"
    • สามารถตรวจสอบโครงสร้างลำดับชั้นของเลย์เอาต์และการตั้งค่าได้แบบเรียลไทม์
    • ลองได้ทันทีด้วยการกดปุ่ม "d"

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

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

 
GN⁺ 2024-12-21
ความคิดเห็นจาก Hacker News

  • น่าประทับใจที่สามารถสร้างสิ่งเจ๋ง ๆ ได้ด้วยโค้ดเพียงไม่กี่พันบรรทัด ฉันชอบ CSS Grid มากกว่า Flex เลยได้สร้างไลบรารีเลย์เอาต์ CSS Grid ด้วย Nim ไว้ ตั้งใจว่าจะลองเปรียบเทียบอัลกอริทึมเลย์เอาต์กับ Clay และสงสัยว่าจะสามารถเปิดเผย C interface ได้หรือไม่

    • เหตุผลที่ชอบ CSS Grid คือมันสามารถเลียนแบบรูปแบบลักษณะนี้ได้
    • ลิงก์ GitHub

  • มีปุ่มสลับระหว่าง HTML กับ Canvas แต่บน iOS Safari + Dark Reader หน้า HTML ถูกแปลงเป็นโหมดมืดได้ ส่วนหน้า Canvas ไม่เป็นแบบนั้น ทำให้ความประทับใจลดลง

  • ได้ดูวิดีโอ YouTube ที่ยอดเยี่ยมซึ่งผู้พัฒนาทำขึ้นเองแล้ว น่าประทับใจมาก

  • แนวคิดในการแยกตรรกะ UI ออกจากชุดคำสั่งวาดภาพนั้นมีประโยชน์และยืดหยุ่นมาก เห็นครั้งแรกใน microui และทำให้สามารถใช้ไลบรารีนี้ในเบราว์เซอร์ได้ง่ายด้วย WASM และ Canvas2D

    • ไอเดียที่ทำเลย์เอาต์ใน WASM แล้วเรนเดอร์เป็น HTML นั้นยอดเยี่ยมมาก
    • ลิงก์ microui

  • หลังแอนิเมชัน ข้อความทั้งหมดไม่สามารถเลือกได้ ดูเหมือนว่าโฟกัสจะถูกแย่งไป

  • บนเว็บไซต์ หากคลิกลิงก์ด้วยปุ่มขวาหรือปุ่มกลาง จะทำงานเหมือนคลิกซ้าย

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

  • เจ๋งมากที่ทำได้ด้วยโค้ด C 2000 บรรทัดโดยไม่มี dependency เลย เคยคิดว่าอาจทำให้ปลอดภัยกว่านี้ได้ด้วย Haskell/OCaml

  • ยังมี taffy ที่เขียนด้วย Rust ด้วย และกำลังทำ C bindings อยู่

  • ไม่ใช่นักพัฒนาฝั่งฟรอนต์เอนด์ เลยเข้าใจได้ยากว่าวิธีนี้ดีกว่าการใช้ CSS โดยตรง หรือใช้ CSS framework/ไลบรารีอย่างไร เพราะมี CSS framework อยู่แล้วเป็นร้อย ๆ ตัว และก็ดูเหมือนจะทำหน้าที่แบบเดียวกัน