Hyper - ทางเลือกแทน React ที่ยึดเว็บมาตรฐานเป็นศูนย์กลาง

 (nuejs.org)
17 คะแนน โดย GN⁺ 2025-05-16 | 7 ความคิดเห็น | แชร์ทาง WhatsApp
  • ภาษา UI ที่ยึดเว็บมาตรฐาน HTML, CSS และ JavaScript เป็นศูนย์กลาง มุ่งสร้างอินเทอร์เฟซที่กระชับและขยายต่อได้มากกว่าเฟรมเวิร์กเดิม
  • ต่างจาก React ตรงที่ แยก logic ออกจาก style และใช้ไฟล์ design system ภายนอกแทน CSS-in-JS ทำให้ดูแลรักษาได้ง่าย
  • แม้จะสร้างคอมโพเนนต์ที่ซับซ้อน โค้ดก็ยังเรียบง่ายและขนาด JS bundle เล็ก เช่น ตารางที่มีฟังก์ชันเรียงลำดับ/กรองมีขนาด 3.9KB
  • การสลับธีมดีไซน์ก็ทำได้ด้วย การแก้ CSS เพียง 32 บรรทัด โดยไม่ต้องแก้คอมโพเนนต์ และสามารถเปลี่ยน design system ได้
  • ทำงานบน Bun พร้อมความสามารถด้านการ bundle ที่รวดเร็ว ความเข้ากันได้กับมาตรฐาน และเป็นฐานสำหรับการสร้าง UI สำหรับโมเดล AI จึงเป็น เฟรมเวิร์กที่มองไปข้างหน้า

Introducing Hyper

  • Hyper คือภาษา markup แบบใหม่สำหรับสร้าง UI บนพื้นฐานของเว็บมาตรฐาน HTML/CSS/JS
  • แม้เป็น UI ที่ซับซ้อนก็สามารถเขียนได้ด้วยไวยากรณ์ที่สะอาดและเรียบง่าย
  • ต่างจาก React ตรงที่ แยกการแสดงผล logic และ style ออกจากกัน

Project goals

  1. Standards first: สร้างบนมาตรฐาน HTML, CSS และ JS
  2. Simplicity: โครงสร้างการประกอบที่เรียบง่ายโดยไม่มี abstraction ที่ซับซ้อน
  3. Design Systems: ชั้นดีไซน์ที่แยกออกจากกันสำหรับทั้งนักออกแบบและนักพัฒนา
  4. Scalability: คงความเรียบง่ายไว้ได้แม้แอปพลิเคชันจะเติบโต

เปรียบเทียบ React vs Hyper

  • React เป็นโครงสร้างแบบ monolithic ที่ผสม logic โครงสร้าง และ style เข้าด้วยกัน ขณะที่ Hyper มุ่งเน้นไปที่ view layer แบบล้วน ๆ
  • Simple components
    • มีตัวอย่างการสร้างคอมโพเนนต์ตารางเดียวกันด้วย Modern React, Old-school React และ Hyper
      • Modern React: ใช้ไลบรารีคอมโพเนนต์อย่าง ShadCN, Material UI, Tailwind Catalyst ในการสร้าง UI และมีจุดเด่นด้านการรองรับเครื่องมือ AI
      • Old-school React: วิธีการยุคแรกที่แยก style ออกจากโค้ดคอมโพเนนต์
      • Hyper: ตัวอย่างที่กระชับและยึดตามเว็บมาตรฐาน พร้อมการแยกโครงสร้างและ style อย่างชัดเจน
    • Hyper แสดงผลได้ด้วย โครงสร้างบน HTML ล้วนและเมธอดง่าย ๆ โดยไม่ต้องมี class หรือ state hook ที่ไม่จำเป็น
    • ในตัวอย่างง่าย ๆ ความต่างอาจมีไม่มาก แต่เมื่อความซับซ้อนเพิ่มขึ้น แนวทางของ Hyper และ React จะต่างกันชัดเจนขึ้น
  • Complex components
    • React ที่อิง ShadCN: JS bundle 91.3KB
    • Hyper: 3.9KB (1.2KB + 2.7KB)
    • Hyper ใช้ JS เท่าที่จำเป็น จึงดูแลรักษาได้ง่าย
  • Design systems
    • เมื่อเปลี่ยนสไตล์แดชบอร์ดด้วย Hyper สามารถสลับธีมทั้งหมดได้ด้วย การเพิ่ม CSS เพียง 32 บรรทัดโดยไม่ต้องแก้โค้ดคอมโพเนนต์
    • ในทางกลับกัน ShadCN บน React มีโค้ด TSX หลายพันบรรทัดที่ซ้ำกันตามแต่ละธีม
    • ปรัชญา design system ของ Hyper
      • ตัดการผูกกันระหว่างดีไซน์กับคอมโพเนนต์ออกอย่างสิ้นเชิง ไม่ว่าจะเป็น CSS-in-JS, Tailwind, inline style
      • รวมกฎ typography และ style ทั้งหมดไว้ใน ไฟล์ CSS ภายนอก
      • ทำให้เกิด การนำกลับมาใช้ซ้ำได้เต็มรูปแบบ, design system แบบรวมศูนย์ และ zero boilerplate
  • Scalability
    • แนวทางของ Hyper ยังคงความเรียบง่ายได้แม้โปรเจกต์จะใหญ่ขึ้น
    • โครงสร้างเรียบง่าย และขนาดโค้ดเล็ก

คำถามที่พบบ่อย

  • ต่างจาก Svelte, Vue อย่างไร?
    • ทั้งคู่เบากว่า React แต่ยังคงชวนให้ผูกดีไซน์กับคอมโพเนนต์ผ่าน scoped CSS, Tailwind เป็นต้น
    • Hyper บังคับให้ใช้ design system ที่แยกออกจากกันอย่างสมบูรณ์
  • What is Nue?
    • Nue คือเครื่องมือสร้างเว็บไซต์/เว็บแอปที่อิงกับ Nue JS template
    • Hyper คือวิวัฒนาการรุ่นถัดไปของ Nue JS และอยู่ภายใต้ monorepo เดียวกัน
    • Hyperlink (อยู่ระหว่างพัฒนา) คือโซลูชัน router ที่สื่อถึงการเชื่อมต่ออย่างใกล้ชิดกับเว็บมาตรฐาน
  • ต่างจากเฟรมเวิร์กเดิมอย่างไร?
    • เป้าหมายหลักของ Hyper ไม่ใช่การเพิ่ม เครื่องมือ abstraction แบบใหม่ แต่คือการกลับไปหามาตรฐานและ ฟื้นคืนความเรียบง่าย
    • มีแค่ความรู้ CSS, HTML และ JS ก็สร้างแอประดับโปรได้
  • ทำไมเว็บมาตรฐานจึงสำคัญ?
    • เทคโนโลยีที่ไร้กาลเวลา: เป็นฐานเทคโนโลยีที่ยังใช้ได้อีกหลายสิบปี
    • ผลิตภัณฑ์ที่ยั่งยืน: ดูแลรักษาได้ยาวนานโดยไม่ต้องเปลี่ยนเฟรมเวิร์ก

แผนต่อจากนี้

  • Full-stack applications (ภายใน 3 เดือน)
    • มีแผนเพิ่ม routing, การสื่อสารระหว่างคอมโพเนนต์, การเชื่อมต่อ DB, การ deploy ขึ้นคลาวด์ และความสามารถในการสลับธีมดีไซน์
  • Generative UIs (ภายใน 4~5 เดือน)
    • เฟรมเวิร์ก UI ที่ AI สร้างได้บนพื้นฐานของการประกอบ HTML/CSS
    • รวม accessibility, responsiveness และ documentation แบบอัตโนมัติ
  • จะชนะ React ได้อย่างไร?
    • ตั้งเป้าขยายส่วนแบ่งอย่างค่อยเป็นค่อยไป
    • ผลักดันให้ การรับรู้ของนักพัฒนาเปลี่ยนไปอย่างเป็นขั้นตอน
    • มอบ โครงสร้างที่เรียบง่ายและดูแลรักษาได้
    • วางแผนเติบโตด้วยการพิสูจน์ พลังของเทคโนโลยีพื้นฐาน
  • ปัญหาชื่อซ้ำ?
    • แม้จะมีโปรเจกต์ Rust และ Electron ที่ใช้ชื่อเดียวกันอยู่ก่อนแล้ว แต่คนละบริบทจึงไม่มีปัญหา

เป้าหมายสูงสุด

  • เป้าหมายสุดท้ายคือการสร้าง เว็บสแตกที่เรียบง่ายอย่างพลิกเกม

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

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

 
youngkwon 2025-05-17

โดยทั่วไปแล้วมันเหมือนเมินประวัติศาสตร์แล้วหยิบวงล้อเก่ากลับมาใช้อีกครั้ง
บางไอเดียก็ดูไม่เลว (วิธีใช้ Markdown) แต่เมื่อเทียบกับเครื่องมืออื่น ๆ แล้วก็ดูเหมือนไม่มีข้อได้เปรียบที่ชัดเจนนัก

พอดูจากที่ถกกันใน Hacker News
อย่างแรกเลยคือนักพัฒนาคนนี้มีความเข้าใจเกี่ยวกับ React ต่ำเกินไป
 
aer0700 2025-05-17

รู้สึกว่าอีกไม่นานคงจะเปลี่ยนชื่อแน่ ๆ... ในบทความก็เขียนไว้เหมือนกันว่ามีโปรเจ็กต์ Electron ชื่อซ้ำกันอยู่แล้ว... จำเป็นต้องใช้ชื่อนั้นจริง ๆ เหรอ
 
fastkoder 2025-05-16

พอเทียบโค้ดดูแล้วก็น่าจะช่วยประหยัดโทเคนได้มากทีเดียว
 
ng0301 2025-05-16

svelte ดีที่สุด
 
hyeonseok 2025-06-14

Svelte เจ๋งที่สุด
 
sixmen 2025-05-16

ดูเหมือนว่าแต่ละคนจะมีรสนิยมต่างกัน แต่สำหรับผม ผมชอบ .map((item) => <li>) ของ JSX ที่จัดการด้วย vanilla JS มากกว่า &lt;li for&gt; ของ Angular, Vue ฯลฯ (รวมถึงไลบรารีพวกนี้? มาร์กอัป?)
 
schang124 2025-05-16

ผมก็เห็นด้วยในส่วนนี้เหมือนกัน ถ้าลอจิกที่เพิ่มเข้าไปใน HTML ไม่ใช่ vanilla แต่เป็น syntax เฉพาะของตัวเอง นั่นเป็นอุปสรรคใหญ่ แม้การทำ UI แบบง่าย ๆ จะไม่มีปัญหา แต่ถ้าลอจิกซับซ้อนขึ้น ก็จะต่างกันในแง่ความยืดหยุ่นในการพัฒนา และมองข้าม learning curve ไม่ได้