Astryx - ระบบดีไซน์โอเพนซอร์สที่ Meta เปิดตัว

 (astryx.atmeta.com)
35 คะแนน โดย xguru 5 일 전 | 4 ความคิดเห็น | แชร์ทาง WhatsApp
  • โดดเด่นด้วยการปรับแต่งได้อย่างสมบูรณ์และ รองรับเอเจนต์ บนพื้นฐานของ React และ StyleX
  • มาพร้อม คอมโพเนนต์ React มากกว่า 160 รายการ ที่รองรับการเข้าถึงและการใช้ธีมแบรนด์ พร้อมให้บริการโหมดมืด เทมเพลตพร้อมใช้งานจริงทันที และ CLI ในระบบรวมศูนย์เดียว
  • เติบโตภายใน Meta ตลอด 8 ปีที่ผ่านมา จนกลายเป็นดีไซน์ซิสเต็มที่ถูกใช้งานมากที่สุดและมีขนาดใหญ่ที่สุด ขับเคลื่อน แอปมากกว่า 13,000 แอป และได้รับการขัดเกลาจากทีมวิศวกร นักออกแบบ และทีมผลิตภัณฑ์
  • รองรับหลายธีม โดยให้ design tokens ทั้งหมด เช่น สี ระยะห่าง radius และ typography ในรูปแบบ CSS custom properties
  • สามารถใช้งานร่วมกับเครื่องมือเขียนโค้ด AI ได้ ผ่านคอมมานด์ไลน์หรือ MCP เพื่อสแคฟโฟลด์โปรเจกต์ สำรวจเทมเพลต สร้างธีม และเข้าถึงเอกสารสำหรับเอเจนต์
    • หากวางคำสั่งติดตั้งเริ่มต้นลงในเครื่องมือเขียนโค้ด AI ก็สามารถรัน npx astryx init เพื่อตั้งค่าเอกสารสำหรับเอเจนต์โดยอัตโนมัติ
  • โครงสร้างภายในแบบเปิด (Open internals): คอมโพเนนต์ไม่ถูกจำกัดอยู่ใน top-level API แบบปิด และสามารถนำมาประกอบกันได้ในทุกระดับ พร้อม export building blocks ที่จำเป็นโดยตรง
    • ด้วยฟังก์ชัน swizzle สามารถดึงซอร์สโค้ดทั้งหมดของคอมโพเนนต์ออกมาไว้ในโปรเจกต์และเป็นเจ้าของได้โดยตรง
  • ไม่มีการผูกติดด้านสไตลิง (lock-in): แม้ภายในจะเขียนสไตล์ด้วย StyleX แต่จะไม่เปิดเผยต่อผู้ใช้ และสามารถ override ผ่าน className ด้วย Tailwind/CSS modules/plain CSS ได้
  • ยึดหลัก Guidance over enforcement ที่เน้นให้ความสามารถโดยไม่บังคับ — หากส่งค่าเข้าไป คอมโพเนนต์ก็จะเรนเดอร์ตามนั้นตรง ๆ ส่วนแนวคิดด้านดีไซน์จะอยู่ในเอกสารและตัวอย่าง
    • คอมโพเนนต์ทั้งหมดใช้กฎการตั้งชื่อ/prop/การประกอบแบบเดียวกันและมีการจัดทำเอกสารไว้ ทำให้ทั้งคนและ AI สามารถคาดเดาพฤติกรรมของคอมโพเนนต์ที่ไม่คุ้นเคยได้
  • CLI ทำหน้าที่เป็นแหล่งอ้างอิงสำหรับคอมโพเนนต์/โทเค็น/เทมเพลต/เอกสาร
    • npx astryx component (รายการคอมโพเนนต์), npx astryx docs (หัวข้อเอกสาร), npx astryx template --list (เทมเพลตหน้า), npx astryx docs tokens (อ้างอิงระยะห่าง/สี/radius)
  • สถาปัตยกรรม: การจัดองค์ประกอบแบบ 3 ชั้น
    • Foundations: building blocks ของความสอดคล้องทางภาพ เช่น typography, color, layout และ accessibility
    • Components: UI building blocks แบบนำกลับใช้ซ้ำได้มากกว่า 150 รายการ พร้อมรองรับ TypeScript อย่างสมบูรณ์
    • Patterns: โซลูชันการออกแบบที่ผ่านการพิสูจน์แล้ว เช่น หน้า table, เลย์เอาต์หน้ารายละเอียด, form wizard, navigation และ data input flow
  • มี เทมเพลตพร้อมใช้งานจริงระดับโปรดักชัน ที่ใส่เพียงเนื้อหาก็ใช้งานได้ และมีแอปตัวอย่างแบบสมบูรณ์ที่เชื่อม routing/theme/components เข้าด้วยกัน
  • ใบอนุญาต MIT

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

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

 
andrewchaa 4 일 전

คนใช้เยอะขนาดนั้น แต่ไม่เข้าใจเหมือนกันว่าทำไม Facebook ถึงมีสแปมเยอะ โฆษณาก็เยอะเกินไป แถมฟีเจอร์ก็ยังจำกัดอยู่แบบนั้น
 
savvykang 3 일 전

ดูเหมือนว่าการป้องกันสแปมจะไม่ได้เป็นสิ่งที่บริษัทให้ความสนใจนัก และก็คงไม่ได้ช่วยเรื่องเลื่อนตำแหน่งหรือย้ายงานด้วย
 
click 4 일 전

พูดอีกอย่างคือ อย่างน้อยก็มีแอป React 13,000 แอปที่รันอยู่ภายใน Meta ทำให้เห็นแรงจูงใจว่าทำไม Meta ถึงยังวาง React ไม่ลงและต้องลากมันต่อไป
ไลบรารีอื่น ๆ ต่างก็พากันนำ signal มาใช้ แต่ React ยังทำไม่ได้ ถึงขั้นต้องสร้าง React Compiler ขึ้นมาเพื่อพยายามคุมเรื่องการ re-render เอาไว้
จู่ ๆ ก็คิดขึ้นมาว่า บางทีไลบรารีแกนหลักภายในอาจถูกเขียนมาในลักษณะที่พึ่งพาการ re-render ของ DOM เลยทำให้เปลี่ยนได้ไม่ง่ายหรือเปล่า
 
laeyoung 4 일 전

"ภายใน Meta (ละไว้กลางข้อความ) ขับเคลื่อนแอปมากกว่า 13,000 แอป"

สุดยอดมากครับ ในฐานะผู้บริโภค ถ้าไม่นับว่าคอนเทนต์วิดีโอสั้นเพิ่มขึ้น และความถี่ของโฆษณาเพิ่มขึ้นมาก ก็ดูเหมือนไม่ได้ต่างอะไรเป็นพิเศษจากเมื่อ 10 ปีก่อน 5 ปีก่อน หรือแม้แต่ตอนนี้เลย