Hyper - alternatif React yang berpusat pada standar web

• Bahasa UI yang berpusat pada standar web HTML, CSS, dan JavaScript, dengan tujuan membangun antarmuka yang lebih ringkas dan mudah diskalakan dibanding framework yang ada
• Berbeda dari React, Hyper memisahkan logika dan gaya, serta memanfaatkan file design system eksternal alih-alih CSS-in-JS untuk meningkatkan kemudahan pemeliharaan
• Bahkan saat membangun komponen yang kompleks, kodenya tetap sederhana dan ukuran bundle JS kecil, misalnya tabel dengan fitur pengurutan/filter hanya 3.9KB
• Pergantian tema desain juga bisa dilakukan hanya dengan mengubah 32 baris CSS, sehingga design system dapat diganti tanpa memodifikasi komponen
• Berjalan di atas Bun dan merupakan framework berorientasi masa depan dengan bundling cepat, kompatibilitas standar, serta fondasi untuk pembuatan UI bagi model AI

---

Introducing Hyper

• Hyper adalah bahasa markup baru untuk membangun UI berdasarkan standar web HTML/CSS/JS
• Bahkan UI yang kompleks dapat diekspresikan dengan sintaks yang rapi dan sederhana
• Tidak seperti React, Hyper disusun dengan memisahkan presentasi, logika, dan gaya

Project goals

1. Standards first: dibangun berdasarkan standar HTML, CSS, dan JS
2. Simplicity: struktur komposisi yang sederhana tanpa abstraksi yang rumit
3. Design Systems: lapisan desain yang terpisah untuk desainer maupun developer
4. Scalability: tetap mempertahankan kesederhanaan saat aplikasi membesar

Perbandingan React vs Hyper

• Jika React adalah struktur monolitik yang mencampurkan logika, struktur, dan gaya, Hyper berfokus pada lapisan view yang murni
• Simple components
  • Disajikan contoh implementasi komponen tabel yang sama dalam Modern React, Old-school React, dan Hyper
    • React modern: membangun UI dengan library komponen seperti ShadCN, Material UI, dan Tailwind Catalyst; dukungan tool AI menjadi keunggulannya
    • React gaya lama: pendekatan awal ketika style dan kode komponen dipisahkan
    • Hyper: contoh ringkas yang mematuhi standar web dan memisahkan struktur serta gaya dengan jelas
  • Hyper mengekspresikannya hanya dengan struktur berbasis HTML murni dan method sederhana, tanpa class yang tidak perlu atau state hook
  • Pada contoh sederhana perbedaannya kecil, tetapi saat kompleksitas meningkat, perbedaan pendekatan Hyper dan React menjadi semakin besar
• Complex components
  • React berbasis ShadCN: bundle JS 91.3KB
  • Hyper: 3.9KB (1.2KB + 2.7KB)
  • Hyper berjalan dengan JS seminimal mungkin dan lebih mudah dipelihara
• Design systems
  • Saat mengubah gaya dashboard di Hyper, seluruh tema bisa diganti hanya dengan menambahkan 32 baris CSS tanpa mengubah kode komponen
  • Sebaliknya, pada ShadCN berbasis React, ribuan baris kode TSX diduplikasi untuk tiap tema
  • Filosofi design system Hyper
    • Sepenuhnya meniadakan keterikatan antara desain dan komponen seperti CSS-in-JS, Tailwind, dan inline style
    • Memusatkan seluruh aturan tipografi dan styling ke dalam file CSS eksternal
    • Mewujudkan reusability penuh, design system terpusat, dan zero boilerplate
• Scalability
  • Pendekatan Hyper tetap sederhana bahkan ketika proyek membesar
  • Strukturnya sederhana dan ukuran kodenya kecil

Pertanyaan yang sering diajukan

• Apa bedanya dengan Svelte dan Vue?
  • Keduanya memang lebih ringan daripada React, tetapi masih mendorong keterikatan antara desain dan komponen seperti scoped CSS dan Tailwind
  • Hyper memaksa design system yang sepenuhnya terpisah
• What is Nue?
  • Nue adalah generator website/webapp berbasis template Nue JS
  • Hyper adalah evolusi generasi berikutnya dari Nue JS dan dikelola di bawah monorepo yang sama
  • Hyperlink (direncanakan) adalah solusi router yang merepresentasikan keterkaitan erat dengan standar web
• Apa bedanya dengan framework yang ada sekarang?
  • Tujuan utama Hyper bukan menambahkan alat abstraksi baru, melainkan kembali ke standar dan memulihkan kesederhanaan
  • Hanya dengan pengetahuan CSS, HTML, dan JS, developer dapat membangun aplikasi profesional
• Mengapa standar web penting?
  • Teknologi yang timeless: fondasi teknologi yang tetap relevan selama puluhan tahun
  • Produk yang berkelanjutan: dapat dipelihara dalam jangka panjang tanpa harus mengganti framework

Rencana ke depan

• Aplikasi full-stack (dalam 3 bulan)
  • Direncanakan hadir dengan routing, komunikasi antar komponen, integrasi DB, deployment cloud, dan fitur pergantian tema desain
• Generative UIs (dalam 4–5 bulan)
  • Framework UI yang dapat dihasilkan oleh AI berdasarkan kombinasi HTML/CSS
  • Aksesibilitas, responsivitas, dan dokumentasi akan disertakan secara otomatis
• Bagaimana bisa mengalahkan React?
  • Menargetkan peningkatan pangsa secara bertahap
  • Mendorong perubahan persepsi developer secara bertahap
  • Menawarkan struktur yang sederhana dan mudah dipelihara
  • Berencana tumbuh dengan membuktikan kekuatan teknologi dasar
• Masalah nama yang sama?
  • Sudah ada proyek Rust dan Electron dengan nama yang sama, tetapi tidak menjadi masalah karena konteksnya berbeda

Tujuan akhir

• Tujuan akhirnya adalah membangun web stack yang sangat sederhana secara disruptif

[youngkwon]

Seperti biasa, ini mengabaikan sejarah dan membawa kembali roda lama.
Beberapa idenya tampaknya tidak buruk (cara memanfaatkan Markdown), tetapi dibandingkan dengan alat lain rasanya tidak ada keunggulan yang berarti.

Melihat diskusi di Hacker News,
untuk saat ini pengembangnya tampaknya juga memiliki pemahaman yang terlalu rendah tentang React.

[aer0700]

Sepertinya dalam waktu dekat namanya akan berubah... seperti yang juga tertulis di artikelnya, sudah ada proyek Electron dengan nama yang bertabrakan... apakah benar-benar harus memakai nama itu?

[fastkoder]

Setelah membandingkan kodenya, sepertinya bisa banyak menghemat token.

[ng0301]

Svelte yang terbaik

[hyeonseok]

svelte yang terbaik

[sixmen]

Sepertinya selera tiap orang berbeda-beda, tetapi saya pribadi lebih suka .map((item) => <li>) di JSX yang diproses dengan vanilla JS daripada <li for> ala Angular, Vue, dan semacamnya (termasuk library? markup?).

[schang124]

Saya juga setuju dengan bagian tersebut. Jika logika yang ditambahkan ke HTML menggunakan sintaks khusus, bukan vanilla, itu menjadi hambatan yang besar. Untuk implementasi UI sederhana memang tidak masalah, tetapi ketika logikanya kompleks, akan ada perbedaan dalam fleksibilitas pengembangan dan kurva belajarnya juga tidak bisa diabaikan.