Oat - ไลบรารี UI แบบ semantic HTML·CSS·JS ที่เบาเป็นพิเศษและไม่มี dependency เลย

 (oat.ink)
3 คะแนน โดย GN⁺ 2026-02-16 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ไลบรารีคอมโพเนนต์ UI น้ำหนักเบามากที่สร้างบน HTML และ CSS โดยมีโครงสร้างที่ไม่มีขั้นตอน build หรือการพึ่งพาเฟรมเวิร์กใด ๆ เลย
  • ประกอบด้วยเพียง CSS 6KB และ JS 2.2KB (หลังบีบอัดและ gzip) ทำให้สามารถใช้องค์ประกอบ UI หลักที่จำเป็นสำหรับเว็บแอปพลิเคชันได้ทันที
  • จัดสไตล์ให้ semantic HTML elements โดยตรง เช่น <button>, <input>, <dialog> และลดการใช้คลาสให้น้อยที่สุดเพื่อลดความรกของโค้ด
  • รองรับ การเข้าถึง (Accessibility) โดยคำนึงถึง ARIA roles และ keyboard navigation เป็นค่าเริ่มต้น
  • มุ่งเป้าไปที่ การประกอบ UI ที่เรียบง่าย อิงมาตรฐาน และใช้งานได้ระยะยาว โดยหลีกออกจาก dependency ของระบบนิเวศ JS ที่ซับซ้อนและการออกแบบเกินความจำเป็น

ภาพรวมของ Oat

  • Oat เป็น ไลบรารีคอมโพเนนต์ UI แบบ semantic ที่เบามากบนพื้นฐาน HTML + CSS ในรูปแบบที่ไม่มี dependency ภายนอกเลย
    • ไม่ต้องใช้เฟรมเวิร์ก เครื่องมือ build หรือการตั้งค่าสภาพแวดล้อมพัฒนา
    • เพียงใส่ไฟล์ CSS และ JS ขนาดเล็กก็ใช้งานได้ทันที
  • มีขนาดประมาณ 8KB (6KB CSS + 2.2KB JS) ช่วยให้สามารถประกอบ UI พื้นฐานของเว็บแอปพลิเคชันได้อย่างรวดเร็ว
  • คอมโพเนนต์หลักประกอบด้วย Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar เป็นต้น

Semantic HTML และการเข้าถึง

  • สไตล์จะถูกนำไปใช้โดยอัตโนมัติตาม semantic tags และ attributes ทำให้คงดีไซน์ที่สม่ำเสมอได้แม้ไม่ต้องระบุคลาส
    • ตัวอย่าง: ใช้สไตล์กับองค์ประกอบ HTML พื้นฐานอย่าง <button>, <input>, <dialog> โดยตรง
    • รับรู้ semantic attributes อย่าง role="button" ได้โดยอัตโนมัติด้วย
  • รองรับ ARIA roles และ keyboard navigation ในทุกองค์ประกอบ
    • ช่วยยกระดับประสบการณ์ผู้ใช้ด้วยการบังคับใช้มาตรฐานด้านการเข้าถึง

Zero dependency และความเรียบง่าย

  • ไม่มี dependency ต่อเฟรมเวิร์กหรือลไลบรารี JS หรือ CSS
    • ตัดปัญหาความซับซ้อนของระบบนิเวศ Node.js และปัญหา dependency ที่ไม่จำเป็นออกไปทั้งหมด
    • ใช้งานได้ทันทีโดยไม่ต้องมีขั้นตอน build หรือจัดการแพ็กเกจ
  • คอมโพเนนต์แบบไดนามิกบางส่วนถูกสร้างด้วย WebComponents จึงใช้ JS เพียงเล็กน้อย

การปรับแต่งและธีม

  • สามารถปรับสีธีมและสไตล์ได้ง่ายผ่าน ตัวแปร CSS
    • หากเพิ่มแอตทริบิวต์ data-theme="dark" ลงใน body ระบบจะใช้ธีมมืดโดยอัตโนมัติ
  • งานออกแบบโดยรวมได้รับอิทธิพลจาก สุนทรียะแบบ shadcn

ที่มาของการสร้าง

  • เริ่มต้นจากความไม่พอใจต่อ ความซับซ้อนเกินไปและปัญหา dependency ของ JavaScript UI frameworks เดิม
    • มีจุดประสงค์เพื่อหลีกเลี่ยงปัญหา “dependency hell” และ “lock-in” ในระบบนิเวศ Node.js
  • ถูกสร้างขึ้นเพื่อให้สามารถใช้งาน ไลบรารี UI ที่ดูแลรักษาได้ในระยะยาว ซึ่งเรียบง่ายและอิงมาตรฐาน ได้ด้วยตนเอง
  • นักพัฒนาสามารถใช้ Oat เพื่อสร้าง ชุด UI ที่พร้อมใช้งานได้ทันทีโดยไม่ต้องผ่านขั้นตอน build ที่ไม่จำเป็น

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

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

 
GN⁺ 2026-02-16
ความคิดเห็นจาก Hacker News

  • ฉันคิดว่าความพยายามที่จะทำให้เว็บแอปให้ผลลัพธ์ที่ถูกต้องโดยใช้แค่ semantic HTML elements นั้นเจ๋งมาก
    ฉันก็ชอบที่มันมุ่งไปสู่แนวคิด “classless CSS” ด้วย แต่พอไปดู component catalog แล้วกลับเห็นทั้ง semantic elements, basic elements, data tags, aria attributes และ CSS classes ปะปนกันอยู่ เลยดูไม่ค่อยสม่ำเสมอเท่าไร
    ถึงอย่างนั้น การที่ CSS ตอบสนองและจัดสไตล์ตาม aria attributes ก็ยังน่าประทับใจ น่าจะเป็นแบบฝึกที่ดีในการฝึกคิดแบบ aria-first approach แทนที่จะพึ่ง component libraries หนัก ๆ อย่าง React
    โดยเฉพาะอย่างยิ่ง ฉันชอบที่ component library นี้มี native sidebar รวมอยู่ด้วย ไลบรารีส่วนใหญ่จะเน้นแต่คอมโพเนนต์เล็ก ๆ ที่นำกลับมาใช้ซ้ำได้ แต่ตัวนี้วางข้าง main อย่างเป็นธรรมชาติด้วยโครงสร้าง aside > nav > ul เลยดูสะอาดดี

  • ฉันตกใจกับเว็บนี้มาก แตะลิงก์ปุ๊บหน้าก็ โหลดทันที จนรู้สึกเร็วแบบสะบัดแส้
    ฉันลืมความเร็วแบบนี้ของอินเทอร์เน็ตไปแล้ว ตอนนี้เลยอยากลองทำเว็บดูอีกครั้ง

    • ถ้าจะทำเว็บ แนะนำให้ลองใช้ Astro ความเร็วในการโหลดนี่สุดจริง
    • อนึ่ง Hacker News ก็เป็นอีกตัวอย่างที่ดีของความรู้สึกเร็วแบบเดียวกัน

  • โปรเจกต์นี้ให้ความรู้สึกเหมือนสิ่งที่ฉันเคยหวังจาก DaisyUI แต่มีคนทำความเรียบง่ายนั้นออกมาจริง ๆ
    ถ้าเอาไปจับคู่กับ Datastar ก็น่าจะกลายเป็นชุดผสมที่ทรงพลังบนพื้นฐานของ web standards เป็นแนวทางที่พึ่งพาเทคโนโลยีเว็บจริง ๆ มากกว่า “ecosystem”

  • fosiao/rclone-webui-oat ดูเหมือนจะ
    เข้ามาแทน rclone-webui-react เดิมที่ทั้งหนักและไม่ได้รับการดูแลรักษาแล้ว

  • บทความบล็อกที่ลิงก์ไว้หน้าแรกน่าจะชวนให้เกิดการถกเถียงที่น่าสนใจกว่าตัว framework เองเสียอีก
    ในงานฉันต้องใช้ทั้ง Angular และ Next.js และยิ่งนานก็ยิ่งเห็นด้วยกับมุมมองของบทความนี้
    บทความที่เกี่ยวข้อง: JavaScript ecosystem is a hot mess

    • ลิงก์ดีมาก แม้จะเป็นบทความปี 2021 แต่ก็ยังมี ข้อสังเกตที่ใช้ได้อยู่มาก
      ตอนนั้นมีการคุยกันไว้ที่: HN thread
    • ฉันชอบเว็บไซต์นี้มาก ตั้งแต่คลิกจนโหลดเสร็จสมบูรณ์ ไม่มีดีเลย์เลย 0 วินาที
    • สำหรับคนที่สงสัย หัวข้อนี้ก็เคยถูกพูดถึง ที่นี่ มาแล้วในปี 2021

  • <aside> ไม่ได้เป็น semantic element ที่เหมาะกับ sidebar เสมอไป
    เดิมทีมันมีไว้สำหรับเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลักแบบทางอ้อม บางครั้ง sidebar ก็เข้ากับคำนิยามนี้ แต่ก็ไม่ใช่ทุกครั้ง

  • มี semantic drop-in CSS library แบบนี้อยู่เยอะมาก การได้เห็นโปรเจกต์ใหม่ ๆ ก็สนุกดี
    คุณภาพนั้นต่างกันไป แต่เว็บไซต์นี้รวบรวม drop-in stylesheets สำหรับ semantic HTML ไว้มากกว่า 50 แบบ
    ลิงก์: รวม Drop-in Minimal CSS

    • อ้อ ที่คุณหมายถึงคือ “drop-in” สินะ ไม่คิดเลยว่า ขีดกลางแค่ตัวเดียว จะสำคัญขนาดนี้ :)
    • อันนี้ควรได้ความสนใจมากกว่านี้ พูดตามตรงว่าน่าสนใจกว่าต้นฉบับเสียอีก
    • ชอบมาก สามารถใช้ลูกศรขวาเพื่อ วนดู stylesheets ไปเรื่อย ๆ ได้
    • อยากรู้ว่าจากลิสต์นั้นมี stylesheet ตัวไหนที่แนะนำเป็นพิเศษ ไหม

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

  • ขอบคุณที่ยังทดสอบกับเบราว์เซอร์รุ่นเก่าด้วย เป็น ไลบรารีที่มินิมอลสุด ๆ จริง ๆ
    ภาพหน้าจอ: ภาพ1, ภาพ2

    • สงสัยว่าปกติคุณมีเหตุผลอะไรถึงใช้ เบราว์เซอร์รุ่นเก่า เป็นเบราว์เซอร์หลักหรือเปล่า

  • ฉันเองก็เคยลองทำอะไรคล้าย ๆ กันในแอป และพบว่า semantic/functional tags บางตัวก็ยังไม่ได้รับการรองรับที่ดีจากเบราว์เซอร์
    ตัวอย่างเช่น ใน Safari ถ้าใช้ showModal ของแท็ก dialog มันจะคำนวณ layout ใหม่ทั้งหน้า ทำให้ ช้ากว่า Chromium 59 เท่า
    ถึงอย่างนั้น ฉันก็ยังชอบแนวทางแบบนี้อยู่ดี