Show HN: Nue – aplikasi yang lebih ringan daripada tombol React

 (nuejs.org)
2 poin oleh GN⁺ 2025-04-02 | 2 komentar | Bagikan ke WhatsApp
  • Nue mempertanyakan default yang berat dalam pengembangan web modern dengan menyatakan bahwa seluruh aplikasi bisa dibuat lebih kecil daripada tombol React/ShadCN hanya dengan HTML, CSS, dan JavaScript
  • Demo juga menambahkan mesin komputasi Rust dan Event Sourcing ke aplikasi yang sama untuk melakukan pencarian instan dan operasi lain pada 150.000 record
  • Mesin JavaScript berhenti karena pengecualian maksimum call stack, tetapi versi Rust/WASM ditunjukkan mampu memproses data dalam skala yang sama secara instan
  • Alih-alih idiom React, Nue berupaya menyederhanakan struktur aplikasi dengan menekankan pendekatan model-first, fungsi yang dapat diuji, tipe statis, dan dependensi minimal
  • Bagi engineer desain dan UX, Nue menekankan kontrol langsung dengan CSS modern dibanding sistem desain 40.000+ baris, React hook, dan utility class

Demo aplikasi yang lebih ringan daripada tombol React

  • Demo Nue menunjukkan seberapa kecil aplikasi bisa dibuat ketika HTML, CSS, dan JavaScript digunakan lebih dekat dengan standar web
  • Poin utamanya adalah bahwa ukuran seluruh aplikasi lebih kecil daripada satu tombol React/ShadCN
  • Versi skala besar menambahkan mesin komputasi Rust dan Event Sourcing ke aplikasi yang sama
    • Ditujukan untuk melakukan pencarian instan dan operasi lain pada 150.000 record
    • Mesin versi JavaScript terhenti karena pengecualian maksimum call stack
    • Pada demo Rust/WASM, operasi instan pada 150.000 record dapat dilihat

Pendekatan pengembangan yang dibidik Nue

  • Untuk engineer Rust, Go, dan JavaScript, Nue menekankan penggunaan pola perangkat lunak tradisional dan lapisan model yang terpisah dibanding idiom React
    • Nue menempatkan pendekatan model-first sebagai pusatnya
    • Mengarah pada fungsi yang sederhana dan dapat diuji, tipe statis, serta sedikit dependensi
  • Untuk engineer desain, Nue menilai bahwa sistem yang lebih sederhana bisa dibuat dengan CSS modern alih-alih pola React dan sistem desain 40.000+ baris
    • Contohnya menyebut @layers, variabel CSS, dan calc()
    • Menekankan cara mengontrol tipografi dan spasi secara langsung
  • Untuk engineer UX, Nue mengusulkan alur yang mengurangi hambatan dari React hook dan utility class serta memungkinkan penanganan pengalaman pengguna secara langsung
  • Nue adalah framework web yang berpusat pada standar web dan saat ini sedang dikembangkan secara aktif
  • Nue memandang situasi ketika satu tombol lebih berat daripada seluruh aplikasi sebagai contoh kompleksitas tersembunyi dalam pengembangan web modern, dan ingin membangun ulang tool serta framework dengan arsitektur yang lebih bersih dan lebih kokoh

Bacaan terkait

2 komentar

 
GN⁺ 2025-04-02
Komentar Hacker News

  • Melihat berbagai reaksi yang marah terhadap Nue, mereka tampak seperti orang-orang yang sangat bergantung pada React sampai melewatkan masalah yang lebih besar
    Masalahnya adalah framework-framework raksasa telah membuat web menjadi gumpalan yang terasa sangat lambat
    Sebagai DevOps/SRE, saya menangani layanan seperti ini setiap hari, dan hampir mustahil menemukan yang load pertamanya di bawah 10 detik
    Jika bahkan pada koneksi 10G yang peering-nya dalam 5ms dari host, dashboard beranda sederhana atau halaman catatan membutuhkan lebih dari 10 detik, dan 95% di antaranya adalah JavaScript, itu berarti webapp saat ini telah mencapai bloat besar-besaran yang bergantung pada engine browser yang cepat dan ekspektasi yang makin rendah
    Saya tidak berharap Nue akan mengubah ini secara revolusioner, tetapi setidaknya saya bisa mendukungnya

    • Bloat bukan berasal dari framework raksasa seperti React
      Secara konkret, proyek React dasar yang dibuat dengan pnpm create vite -t react-ts berukuran sekitar 60KB terkompresi, dan proyek Vue yang dibuat dengan pnpm create vite -t vue-ts sekitar 25KB
      Proyek skala menengah yang dibuat dengan React/Vue juga sekitar 200–300KB terkompresi di luar gambar, dan masih bisa dipakai bahkan dalam kondisi dibatasi 2G sungguhan
      Sampah berupa dashboard sederhana yang butuh lebih dari 10 detik bisa dibuat dengan framework apa pun, dan juga bisa dibuat tanpa framework
      Justru jika membawa seluruh dependensi pihak ketiga ala jQuery, situasinya bisa lebih buruk: mengunduh 200KB demi 1KB yang benar-benar dipakai
      Perbandingan di artikel itu juga bodoh, karena keseluruhan view React bukan struktur yang membesar jauh lebih besar daripada “satu tombol React”, melainkan struktur biaya awal + biaya marginal
    • Saya tidak suka sebagian besar situs React menjadi bloat, dan setelah menggunakannya sebagai framework utama selama beberapa tahun, sekarang saya hampir tidak memakainya kecuali klien secara eksplisit meminta, tetapi menurut saya pernyataan “framework raksasa membuat web lambat” tidak akurat
      Sebagian besar bloat web berasal dari developer yang tidak meluangkan waktu untuk optimasi, lazy loading, cache, dan meminimalkan dependensi, serta dari ratusan script pelacak yang dipasang setiap situs demi memeras pendapatan
      Beberapa tahun lalu saya kaget melihat situs dengan 50 tracker, sekarang bahkan ratusan pun tidak mengejutkan
      Jika developer peduli, situs React juga bisa sangat cepat, dan bloat yang ditambahkan React biasanya bukan inti masalahnya
      Tulisan OP menjelaskan tombol itu 78KB, tetapi itu karena seluruh React dimuat demi satu tombol
      Bukan berarti jika ada ratusan tombol di halaman, 78KB diambil ratusan kali, jadi situs React yang kompleks juga tidak seefisien itu
      Sebagai engineer DevOps, saya penasaran apakah ada statistik tentang seberapa besar porsi kelambatan itu berasal dari framework dan seberapa besar dari kode aplikasi sebenarnya
    • Saya paham maksudnya, tapi rasanya agak berlebihan
      Di tempat kerja ada dashboard Vue 3 SPA dengan lebih dari 20 widget yang masing-masing mengirim request dan mentransfer JavaScript terkompresi lebih dari 2MB, tetapi bahkan dengan semua cache dimatikan, semuanya ter-load dalam 2 detik
      Ini bukan “bisa diinteraksi”, melainkan load penuh
      Saya setuju web bisa dibuat lebih ringan, tetapi “hampir mustahil menemukan load pertama di bawah 10 detik” terdengar berlebihan, dan mungkin bukan karena ada atau tidaknya framework
      Sebagai catatan, webapp ini juga bukan dibuat oleh tim terbaik dari yang terbaik
    • Alih-alih “orang-orang yang marah pada Nue”, yang terlihat adalah orang-orang yang membuat klaim terlalu luas tanpa bukti atau justifikasi
      SRE dimintai bantuan hanya ketika ada sesuatu yang salah, jadi tidak mengejutkan kalau Anda tidak melihat yang berjalan baik
      Orang yang pernah bekerja di proyek lambat pada akhirnya tahu bahwa itu tanggung jawab manajemen, dan ketika codebase menjadi terlalu besar sampai terasa tidak ada yang bisa memperbaikinya, itu juga tanggung jawab manajemen
      Anda mungkin berpikir kalau dipanggil lebih awal, Anda akan merancang sesuatu yang lebih baik, tetapi itu pun pada akhirnya tanggung jawab manajemen
      Jika semua orang meninggalkan framework raksasa lalu software menjadi sempurna dan stabil, patut juga dipikirkan SRE sebenarnya akan mengerjakan apa
      Jika melihat teknologi dari sudut berbeda, saya rasa ada peluang besar di depan kemampuan yang Anda miliki sekarang
    • Pertanyaan sebenarnya adalah apakah kita benar-benar membutuhkan framework
      JavaScript murni juga bekerja cukup baik, dan terkadang lebih baik lagi jika tidak ada JavaScript sama sekali
      Dalam proyek SAP baru-baru ini, ada lapisan Java di depan SAP dan aplikasi Angular besar di atasnya; tujuan aplikasinya adalah mengelola penjualan B2B barang fisik, dan karena ketersediaan stok sangat penting, hampir setiap layar mengirim request penuh ke lapisan SAP
      Alasan mengapa dibutuhkan “rich client” yang tebal tidak jelas, dan PHP kemungkinan jauh lebih cocok
      Jika menyingkirkan hype, organisasi besar tampaknya memakai framework sebagai cara memastikan praktik coding yang seragam dan memudahkan pergantian developer, tetapi pasti ada cara yang lebih baik untuk mencapai tujuan itu

  • Yang dimaksud sebagai pengganti React adalah ini: https://nuejs.org/docs/view.html
    Ini adalah lapisan view tanpa tipe dengan arah yang mirip Angular 2.0 awal, dan file modelnya hanyalah JavaScript
    Dengan kata lain, tidak ada tipe di mana pun; jika menargetkan sisi Vue.js, ini mungkin baik-baik saja
    Namun, pengguna React saat ini kebanyakan memakai TypeScript, dan dukungan tipe kelas satu di lapisan view sangat berguna, jadi mungkin lebih baik sedikit mengubah arah pemasarannya ke sana

    • Saya penulisnya: benar, lapisan view Nue tidak memiliki tipe
      Itu desain yang disengaja
      Ekosistem React membuat developer sampai menempelkan TypeScript bahkan ke CSS, dan itu berlebihan
      Nue mengambil pendekatan sebaliknya: menjaga lapisan presentasi tetap bersih dan semantik, membiarkan standar web melakukan banyak hal, dan membiarkan static typing seperti Rust atau Go bersinar pada logika bisnis yang benar-benar penting
    • Vue ditulis dengan TypeScript, dan menyediakan dukungan kelas satu sampai ke lapisan template
    • Alasan kebanyakan orang memakai TypeScript adalah karena aplikasi React membesar menjadi 200 ribu baris kode yang bercampur dengan logika bisnis, sehingga tanpa itu menjadi mustahil dikelola
      Jika bergerak ke arah lain, kebutuhannya berkurang
    • Sebagian besar developer Vue yang saya kenal juga memakai TypeScript karena alasan yang sama
    • Di Vue, dukungan dan penggunaan TypeScript sangat besar
      Vue sendiri ditulis dengan TS, dan sebagian besar library besar juga ditulis dengan TS
      Berdasarkan /r/vuejs dan pengalaman pribadi, saya rasa sebagian besar aplikasi baru juga begitu

  • Memang bagus, tapi saya sudah berinvestasi pada Svelte dan SvelteKit
    Setelah membuat aplikasi yang cukup besar, bukan contoh mainan, dengan puluhan form dan layar, lalu melihat React lagi, saya menyadari bahwa React tidak begitu sulit kalau sudah memahami hooks, juga cukup ringan untuk kebutuhan saya, dan sekarang justru bagus karena sudah menjadi teknologi yang membosankan
    Ekosistemnya juga sangat besar, sehingga sulit menggantikan library seperti React Query, misalnya
    Jadi saya berencana terus memakai React untuk beberapa tahun ke depan, terutama karena React Compiler sudah dipakai secara internal di Facebook dan Instagram serta sudah keluar sebagai beta publik
    React Native juga mendukung React Compiler, dan menurut saya dukungan ini akan makin baik, bukan menghilang
    Kalau React Compiler sudah hadir, tidak banyak ruang tersisa untuk runes Svelte atau sifatnya yang dikompilasi
    Setelah runes, Svelte terasa bukan seperti memakai JavaScript, melainkan memakai notasi yang terlihat seperti JavaScript, dan saya kurang suka; setelah React Compiler, dalam situasi kompleks pun hook hell tidak akan terlalu banyak dibutuhkan

    • TanStack Query adalah React Query yang lama dan sepenuhnya kompatibel dengan Svelte: https://tanstack.com/query/latest
      Saya memakai React selama 10 tahun dan Svelte selama 3 tahun terakhir; Svelte jelas merupakan framework generasi yang lebih baru dan bagi saya jauh lebih cocok daripada React
      Namun saya setuju bahwa ada bagian-bagian yang masih kasar di sekitar ekosistemnya
    • Svelte jelas jauh lebih tidak bertele-tele dan membutuhkan lebih sedikit kode
      Performanya juga jauh lebih baik, meski untuk banyak penggunaan hal itu mungkin tidak penting
      Kekurangannya adalah Svelte pada dasarnya adalah sebuah bahasa, sehingga agar bekerja dengan benar dibutuhkan compiler dan tooling pengembangan khusus
      Memelihara dan mengembangkannya membutuhkan usaha yang besar
      Saya suka Svelte dan sudah memakainya hampir setiap hari selama beberapa tahun, tetapi timnya membutuhkan lebih banyak sumber daya untuk mencapai visinya dan mempertahankannya dalam jangka panjang
      Mengejutkan bahwa perusahaan besar seperti Apple mengadopsi Svelte di tempat seperti Apple Music tetapi tidak berinvestasi di dalamnya
      https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c321...
    • Setelah mencoba pindah ke Svelte, rasanya 2–3 kali lebih tidak kompleks dibanding React
    • Saya mempelajari React pada masa class component, dan saat melihatnya lagi baru-baru ini, functional component dan hooks terasa sepenuhnya membingungkan
      Saya penasaran apakah ada yang tahu mengapa arahnya menjadi seperti ini

  • Nue adalah framework web yang sedang dibuat untuk memangkas kebesaran berlebihan dalam pengembangan web modern
    Jika satu tombol Vite/ShadCN/Tailwind 40% lebih berat daripada SPA lengkap, sudah waktunya melakukan sesuatu dengan cara berbeda
    Ini dibangun ulang dari dasar, mengutamakan standar web, dan berusaha menghilangkan bloat
    Ditujukan untuk arsitek frontend, design engineer, dan orang-orang UX yang menginginkan alur kerja yang lebih sederhana dan lebih waras
    Masih dalam proses, tetapi perubahan sedang datang

    • Sekarang saya bahkan tidak tahu mengapa semuanya harus berupa SPA
      Itu kompleks dan tidak efisien, jadi seharusnya menjadi paradigma yang dipakai hanya untuk aplikasi dengan interaksi sangat tinggi seperti Photoshop atau Ableton Live versi web, dan aplikasi seperti itu seharusnya sangat sedikit
      Saya bukan developer frontend, tetapi jika masalahnya adalah “pencarian dan operasi instan pada 150 ribu record”, rasanya memang tepat untuk memikirkan ulang paradigmanya
    • Nue adalah proyek yang sangat keren, tetapi jika ingin orang menanggapinya serius, sebaiknya pemasaran yang agresif sedikit dilunakkan
      Melihat demo, sepertinya ada sekitar 100KB kode WASM yang tidak diperhitungkan dalam perbandingan tombol React
      Meski begitu, selamat atas proyeknya, dan saya benar-benar penasaran bagaimana visi keseluruhannya akan selesai diwujudkan
    • Menurut saya perbandingan “satu tombol X 40% lebih berat daripada SPA” tidak adil
      Jika framework disertakan, bobotnya memang bertambah, tetapi framework seperti ini tidak dimaksudkan untuk satu komponen tunggal
      Perbandingan yang adil harus dilakukan dengan kondisi yang setara
      Kalau begitu, saya penasaran bagaimana Nue dibandingkan dengan htmx atau framework lain yang memanfaatkan standar web modern
    • Saya tidak tahu apa hubungan Vite dengan diskusi ini
      Ini mirip seperti mengatakan UI berbasis Visual Studio lebih ringan
    • Klaim pemasaran yang luar biasa, tetapi tidak ada satu pun detail tentang bagaimana ini bekerja

  • Saya berharap ada detail teknis, bukan tulisan pemasaran ini
    Misalnya, saya penasaran metode apa yang dipakai untuk pelacakan perubahan, apakah proxy ala Vue atau rekalkulasi penuh ala React
    Saya juga tidak paham klaim bahwa JavaScript “melampaui stack” pada 150 ribu objek
    Saat saya mencoba langsung membuat daftar berisi 150 ribu objek, di profiler array dan objek memakai sekitar 14MB, dan menjalankan list.find() tanpa indeks pun tidak menyebabkan stack overflow
    Jika memakai indeks, mungkin akan sangat cepat dan tidak memerlukan WASM atau perangkat yang rumit
    JavaScript tidak selambat itu
    Jika melakukan komputasi numerik seperti perkalian angka pada array besar, kodenya dikompilasi dan berjalan cukup cepat

    • Di kode demo penulis, mereka memakai sesuatu seperti list.push(...objects), dan itu tampaknya penyebabnya
      Jika mengoper sangat banyak argumen dengan operator spread, misalnya sekitar 100 ribu sekaligus ke sebuah method, di JavaScript setiap argumen diketahui masuk ke call stack, sehingga menyebabkan stack overflow

  • Sebagian besar framework baru dimulai sebagai alternatif ringan terhadap opsi yang lebih matang pada masanya
    Itu saja bukan alasan untuk mengadopsinya
    Tambahkan dulu semua bloat yang diminta pengguna dan tangani semua edge case yang belum dipahami, lalu unggah lagi 10 tahun kemudian
    Jika saat itu masih lebih ringan daripada satu tombol React, barulah layak jadi berita

    • Jadi maksudnya, sebelum menjadi pemain dominan yang sudah mapan, tidak ada yang layak didiskusikan dan tidak boleh mengklaim lebih baik daripada pemain dominan yang ada?
      Kalau tidak bisa membicarakannya dibanding pemain yang sudah ada, saya tidak tahu bagaimana cara menarik cukup banyak pengguna sampai bisa menjadi bloat
    • Melihat reaksi situs ini ketika React pertama kali muncul yang umumnya negatif, sepertinya React tidak pernah dianggap ringan
    • Solid.js sangat bagus dari sisi ukuran bundle
      Tergantung cara menghitungnya, sudah dikembangkan sekitar 6–9 tahun, tetapi masih tetap sangat ramping
    • Saya merasakan hal yang mirip
      Saya mulai memakai Svelte untuk membagikan widget dengan kebutuhan kecil sebagai web component, dan untuk tujuan itu Svelte sangat bagus

  • Pertanyaan-pertanyaan yang muncul saat melihat proyek ini
    Saya tidak paham mengapa demo https://mpa.nuejs.org/app/ dianggap mengesankan, dan menurut saya web app dengan performa yang sama juga bisa dibuat dengan React
    Saya ingin cepat melihat contoh kode dari beranda, tetapi harus mengubek-ubek dokumentasi; setelah melihat https://nuejs.org/docs/view.html#clean-html-templating, saya jadi penasaran apakah ini terinspirasi dari Svelte
    Saya juga ingin tahu bagaimana Nue bisa lebih cepat dan ringan dibanding teknologi lain, terutama HTML/JavaScript murni
    Untuk meyakinkan bahwa Nue adalah framework yang layak dipakai, ia harus lebih sederhana daripada HTML+JS, atau setidaknya lebih sederhana daripada React; markup dan logikanya harus dekat dengan hal-hal yang sudah dikenal seperti HTML sehingga mudah dipahami; dan developer experience harus bagus dengan waktu build serta HMR yang baik
    Bagian ini tampaknya sudah dikerjakan dengan baik
    Selain itu, mereka perlu menunjukkan keunggulan teknis dan metrik seperti overhead rendah, apakah berbasis WASM, virtual DOM, server islands, dan sebagainya
    esbuild melakukan ini dengan baik: https://esbuild.github.io/

    • Menurut saya inti halaman utama adalah ukurannya yang kecil, yaitu “lebih ringan daripada tombol React”, dan kemampuannya menangani banyak record, yaitu “jauh melampaui titik ketika JavaScript dan React mati karena stack overflow”

  • Jika maksud pembuat proyek ini adalah mengatakan bahwa tombol React berukuran 73KB karena tidak berjalan tanpa library React, itu kritik yang lemah
    Karena pada titik itu, di dalam bundle aplikasi, library React juga dipakai ulang oleh bagian lain
    Ini menyesatkan orang, dan janjinya terlalu dangkal sampai hampir terasa menghina

    • Saya pembuatnya
      Untuk memperjelas, satu tombol yang dipasang dengan dokumentasi resmi ShadCN/Vite (https://ui.shadcn.com/docs/installation/vite) menjadi jauh lebih berat daripada Nue SPA yang lengkap
      Ini bukan untuk menyerang developer React, melainkan untuk menunjukkan bagaimana standar web bisa membalikkan keadaan terkait bloat
      Saya penasaran apakah ada cara yang lebih baik untuk menyampaikan perbandingan ini

  • Saya sangat menyukai pendekatannya, tetapi demo https://mpa.nuejs.org/app/ tidak berjalan dengan benar di iOS Safari
    Namun bisa jadi karena versi saya, 16.7.8, sudah lama
    Tidak bisa menggulir, ada line break aneh pada layout dan tombol, dan tombol pencarian native tertanam di dalam tombol desain kustom sehingga ada 2 ikon

    • Scroll di iOS Safari sekarang sudah berfungsi
      Itu perbaikan cepat
    • Penulisnya memakai lagi trik yang digunakan di hampir semua submission sebelumnya
      Mereka hanya mengimplementasikan fitur yang jauh lebih sedikit daripada komponen pembandingnya, lalu menunjukkan betapa kecil solusi mereka
    • Di Chrome dan Firefox Android, tinggi halaman dan scroll vertikal juga rusak
      Di Firefox, kotak komentar tersembunyi di bawah menu bar
      Mungkin tinggi halaman dipaksa dengan persentase atau vh, yang biasanya harus dihindari
      Jika memang perlu dipaksa, sebaiknya gunakan svh atau dvh

  • Saya penasaran apakah ada contoh kode
    Saya sudah mencari sedikit tetapi tidak menemukannya, dan menurut saya dalam posting blog tentang framework baru, contoh kode seharusnya ada di bagian paling awal

    • Saat ini ada dua contoh
      nue create simple-blog menunjukkan situs web yang berfokus pada konten
      nue create simple-mpa adalah demo SPA hari ini, dan MPA di sini berarti aplikasi multipage
      Ini menunjukkan bagaimana client-side routing dan view transition menghubungkan halaman kaya konten dengan view seperti aplikasi secara mulus
      Kode sumbernya ada di sini: https://github.com/nuejs/nue/tree/master/packages/examples
    • Saya juga mengklik-klik selama 5 menit, tetapi tidak menemukan sampel yang menunjukkan seperti apa kodenya