Astryx - Sistem desain open-source yang dirilis Meta

• Berbasis React dan StyleX, dengan ciri utama kustomisasi penuh dan dukungan untuk agen
• Memiliki lebih dari 160 komponen React yang mendukung aksesibilitas dan penerapan tema merek, serta menyediakan dark mode, template siap deploy, dan CLI dalam satu sistem terpadu
• Berkembang di internal Meta selama 8 tahun terakhir menjadi sistem desain yang paling banyak dipakai dan berskala paling besar, menjalankan lebih dari 13.000 aplikasi serta disempurnakan oleh tim engineer, desainer, dan produk
• Mendukung banyak tema yang menyediakan semua design token seperti warna, spacing, radius, dan tipografi sebagai CSS custom properties
• Dapat digabungkan dengan AI coding tools melalui command line atau MCP untuk melakukan scaffolding proyek, menjelajahi template, membuat tema, dan menyediakan dokumentasi untuk agen
  • Jika instruksi instalasi awal ditempelkan ke AI coding tool, eksekusi npx astryx init akan otomatis menyiapkan dokumentasi agen
• Open internals: komponen tidak terkurung dalam API tingkat atas yang tertutup, bisa dikomposisikan pada level mana pun, dan building block yang diperlukan diekspor secara langsung
  • Dengan fitur swizzle, seluruh source komponen dapat diekstrak ke proyek sehingga bisa dimiliki dan dikelola sendiri
• Tidak ada styling lock-in: secara internal styling ditulis dengan StyleX, tetapi tidak diekspos ke pengguna; dapat dioverride melalui className memakai Tailwind/CSS modules/plain CSS
• Prinsip Guidance over enforcement: tidak memaksakan, melainkan menyediakan kemampuan—jika nilai diberikan, komponen akan merendernya apa adanya, sementara opini desain dimuat dalam dokumentasi dan contoh
  • Semua komponen mengikuti aturan penamaan/prop/komposisi yang sama dan terdokumentasi, sehingga baik manusia maupun AI dapat memprediksi perilaku komponen yang belum dikenal
• CLI berperan sebagai referensi komponen/token/template/dokumentasi
  • npx astryx component (daftar komponen), npx astryx docs (topik dokumentasi), npx astryx template --list (template halaman), npx astryx docs tokens (referensi spacing/warna/radius)
• Arsitektur: tersusun dalam 3 lapisan
  • Foundations: building block untuk konsistensi visual seperti tipografi, warna, layout, dan aksesibilitas
  • Components: lebih dari 150 building block UI reusable dengan dukungan TypeScript lengkap
  • Patterns: solusi desain yang sudah tervalidasi seperti halaman tabel, layout halaman detail, form wizard, navigasi, dan alur input data
• Menyediakan template production-ready yang hanya perlu diisi konten, serta aplikasi contoh lengkap dengan routing, tema, dan komponen yang sudah terhubung
• Lisensi MIT

[andrewchaa]

Dengan jumlah pengguna sebanyak itu, saya tidak mengerti kenapa Facebook masih penuh spam, iklannya juga terlalu banyak, dan fiturnya terbatas seperti itu.

[savvykang]

Sepertinya mencegah spam tidak menarik bagi perusahaan, dan juga tidak membantu untuk promosi atau pindah kerja.

[click]

Artinya, setidaknya ada 13.000 aplikasi React yang berjalan di internal Meta; dari situ terlihat motivasi Meta untuk tidak bisa melepas React dan harus terus membawanya maju.
Sementara library lain ramai-ramai mengadopsi signal, React belum melakukannya, bahkan sampai membuat React Compiler demi tetap bergantung pada re-rendering.
Tiba-tiba terpikir, jangan-jangan library inti internal mereka ditulis dengan cara yang bergantung pada re-rendering DOM, sehingga tidak mudah diubah.

[laeyoung]

"Di internal Meta, (bagian dipotong) menjalankan lebih dari 13.000 aplikasi.

Luar biasa sekali. Sebagai konsumen, selain konten short-form yang makin banyak dan frekuensi iklan yang jauh meningkat, rasanya tidak ada banyak hal yang berbeda antara 10 tahun lalu, 5 tahun lalu, dan sekarang.