Biaya AI Membangun Aplikasi JavaScript: Data 12 Framework dari 5 Run

Nolan Lawson membangun aplikasi PokéAPI yang sama sebanyak 5 kali untuk masing-masing dari 12 framework JavaScript, lalu mencatat biaya API-nya. Hasilnya: Hono+htmx paling murah dengan median 2,67 dolar per run, sementara Angular paling mahal di 4,97 dolar. Selisihnya 86 persen untuk aplikasi yang secara fungsi identik. Semua angka diambil dari harga API Claude Code dengan Opus 5.5 pada effort tinggi, dan setiap agen diberi spec conformance suite yang sama supaya tidak bisa "curang" mengikuti tes Lighthouse.

TL;DR

• Rentang biaya membangun satu aplikasi: 2,67 dolar (Hono+htmx) sampai 4,97 dolar (Angular), median dari 3 sampai 5 run per framework.
• SvelteKit, Gracile+Lit, dan Angular konsisten lebih mahal karena agen menghabiskan token membaca dokumentasi atau kode sumber framework yang belum masuk data latih.
• Framework termurah bukan berarti paling cepat: selisih waktu build hanya 8,2 sampai 9,0 menit pada tiga framework tercepat, jauh lebih rapat daripada selisih biayanya.
• Varians antar run besar. Run termurah React Router (2,82 dolar) masih lebih murah daripada run termahal Hono+htmx (3,19 dolar), jadi satu run tunggal bukan bukti apa pun.

Apa yang sebenarnya diukur dalam benchmark ini?

Yang diukur adalah biaya token untuk menghasilkan aplikasi yang lolos spec, bukan kecepatan framework saat runtime. Lawson menyiapkan satu spesifikasi aplikasi pencarian dan filter Pokémon, memakai MCP atau skill resmi masing-masing framework bila tersedia, lalu menjalankan agen di sandbox tanpa memberi tahu bahwa hasilnya akan diuji Lighthouse untuk performance dan accessibility. Metodologi lengkap dan data mentahnya ada di posting asli Nolan Lawson, dan aplikasi ujinya memakai PokéAPI sebagai sumber data.

Ada tiga batasan yang perlu dipegang sebelum membaca tabelnya. Pertama, aplikasinya bertipe content-heavy dengan interaktivitas rendah, lebih mirip Wikipedia daripada Gmail. Kedua, angka dolar di tabel adalah harga API yang dihitung dari pemakaian token, bukan uang yang benar-benar keluar, karena Lawson memakai paket Max 100 dolar per bulan. Ketiga, hampir semua yang diukur bersifat stokastik: model bahasa itu generator kata acak, jadi satu run bisa melenceng jauh tanpa ada hubungannya dengan kualitas framework.

Berapa biaya per framework?

Median biaya per run paling rendah dipegang Hono+htmx (2,67 dolar), dan yang tertinggi dipegang Angular (4,97 dolar). Tabel di bawah mengambil median 3 sampai 5 run per framework, dengan rentang minimum dan maksimum dalam tanda kurung.

Framework	Biaya median (dolar)	Rentang (dolar)
Hono+htmx	2,67	2,23 sampai 3,19
Astro	2,76	2,16 sampai 3,63
Nuxt	2,82	2,39 sampai 4,25
Vanilla (Vite)	2,98	2,24 sampai 3,37
Next.js	3,14	2,58 sampai 4,13
Qwik	3,27	2,35 sampai 3,80
TanStack Start	3,54	3,11 sampai 3,96
SolidStart	3,79	2,84 sampai 4,81
React Router	3,81	2,82 sampai 3,97
SvelteKit	4,28	3,59 sampai 4,65
Gracile+Lit	4,65	3,92 sampai 5,07
Angular	4,97	3,19 sampai 6,82

Yang menarik justru baris "Vanilla". Agen yang diminta menulis JavaScript atau TypeScript polos dengan Vite, tanpa UI framework, justru lebih mahal (2,98 dolar) daripada Hono+htmx, Astro, dan Nuxt. Lawson menafsirkannya sebagai tanda bahwa memiliki semacam framework lebih baik daripada tidak punya kerangka sama sekali, setidaknya dibanding Vite kosong. Angka ini juga membantah asumsi populer bahwa "pakai yang paling sederhana" otomatis paling hemat token.

Kenapa SvelteKit dan Angular lebih mahal?

Karena agen membakar token untuk mempelajari framework yang belum ada di data latihnya, bukan karena framework-nya lebih kompleks secara teknis. Pada SvelteKit, agen membaca panduan migrasi v3 di setiap run. Pada Gracile, agen tidak mengenali framework-nya sehingga meng-clone repo atau membaca kode hasil kompilasi dari node_modules. Pada Angular, biayanya mengikuti ukuran kode total yang harus ditulis.

Ini pola yang layak dicatat untuk tim yang sedang memilih stack di 2026. Biaya AI bukan fungsi dari kecepatan runtime atau jumlah fitur, tapi dari seberapa akrab model dengan API dan konvensi framework tersebut. Framework baru dengan dokumentasi bagus tetap mahal kalau model belum pernah melihatnya. Sebaliknya, framework lama yang sudah bertahun-tahun ada di data latih bisa lebih murah per fitur meskipun secara teknis ketinggalan.

Pola kedua yang muncul: alat bantu resmi tidak otomatis dipakai. Angular MCP terpasang dan dipakai di 3 dari 5 run, skill tool di 4 dari 5 run. Nuxt MCP tersedia tapi tidak pernah dipakai agen sama sekali. TanStack Start baru menemukan skill file di 2 dari 5 run. Artinya biaya tambahan sering datang dari agen yang mencari sendiri, bukan dari ketiadaan alat.

Berapa lama proses build-nya?

Waktu build bergerak jauh lebih rapat daripada biaya. Astro 8,2 menit, Hono+htmx 8,6 menit, dan Nuxt 9,0 menit. Selisih ketiganya hanya 0,8 menit, sementara selisih biaya antar framework teratas dan terbawah mencapai 2,3 dolar.

Untuk kerja harian, implikasinya sederhana: kalau yang dikejar adalah kecepatan pengiriman, pilihan framework hampir tidak terasa. Kalau yang dikejar adalah biaya per fitur dalam jumlah besar, pilihan framework bisa mengubah anggaran. Tim yang membangun 50 fitur per bulan dengan pola seperti ini sedang memilih antara sekitar 133 dolar dan 248 dolar per bulan hanya dari satu keputusan stack.

Apa yang bisa dipakai tim di Indonesia dari data ini?

Yang bisa dipakai bukan urutan framework-nya, tapi metode pengukurannya. Lawson menguji hasil agen dengan conformance suite berbasis accessibility tree, bukan DOM mentah, supaya framework yang memakai shadow DOM tidak otomatis kalah. Suite itu juga mencegah agen menghapus tes alih-alih memperbaiki kode.

Langkah yang bisa ditiru tanpa perlu membangun benchmark sendiri:

• Tentukan satu aplikasi kecil yang representatif untuk produk kalian, bukan hello world.
• Tulis spesifikasi dan tes konformansi lebih dulu, sebelum menyuruh agen menulis kode apa pun.
• Jalankan minimal tiga kali per kandidat stack, lalu ambil median. Satu run tidak cukup karena rentangnya lebar.
• Catat empat metrik bersamaan: biaya token, waktu, jumlah baris kode, dan skor Lighthouse.
• Simpan hasilnya sebagai tabel, bukan kesan. Kesan "framework X lebih enak buat agen" tidak bisa dipakai untuk keputusan anggaran.

Satu catatan penting soal biaya: harga token per model berubah cukup cepat, jadi angka dolar di tabel ini punya umur simpan pendek. Yang lebih tahan lama adalah polanya, yaitu framework yang tidak dikenal model cenderung 50 sampai 90 persen lebih mahal untuk hasil yang setara.

Apakah hasilnya bisa digeneralisasi ke aplikasi lain?

Belum tentu, dan Lawson sendiri menyebut aplikasi ujinya hanya satu holotipe. Aplikasi yang interaktifnya berat, misalnya dashboard dengan banyak state atau editor kolaboratif, bisa menghasilkan urutan yang berbeda karena agen akan menghabiskan lebih banyak token untuk logika klien.

Yang lebih aman diambil sebagai kesimpulan adalah soal varians. Dengan median 5 run, framework termurah dan termahal berselisih hampir dua kali lipat, tapi run terbaik React Router masih mengalahkan run terburuk Hono+htmx. Itu artinya perbedaan framework lebih kecil daripada perbedaan keberuntungan satu run. Kalau anggaran token kalian ketat, mengulang run yang melenceng jauh lebih berdampak daripada mengganti framework.

Bagaimana cara membaca rentang angkanya?

Rentang menunjukkan bahwa satu angka median menyembunyikan banyak hal. React Router punya median 3,81 dolar, tapi run termurahnya 2,82 dolar, lebih murah daripada run termahal Hono+htmx yang 3,19 dolar. Pola yang sama muncul di Angular dengan rentang 3,19 sampai 6,82 dolar, selisih lebih dari dua kali lipat antara run terbaik dan terburuk.

Karena itu, membandingkan dua framework berdasarkan satu run hampir selalu salah. Kalau sebuah tim menyimpulkan SvelteKit lebih mahal setelah satu percobaan, mereka bisa keliru hanya karena agen membaca panduan migrasi penuh di run tersebut. Dengan tiga run, arahnya mulai terlihat. Dengan lima run, angkanya cukup stabil untuk dipakai menetapkan anggaran.

Hal yang sama berlaku untuk waktu. Astro 8,2 menit, Hono+htmx 8,6 menit, dan Nuxt 9,0 menit terlihat berurutan, tapi rentang masing-masing membentang hampir empat menit. Artinya urutan waktu antar framework tidak bisa dipakai sebagai dasar keputusan, sementara selisih biaya 2,3 dolar antara ujung atas dan bawah tabel justru bertahan di hampir semua run.

Apa yang tidak diukur sama sekali?

Tiga hal besar tidak masuk perhitungan, dan ketiganya biasanya lebih mahal daripada biaya token. Pertama, biaya review manusia setelah kode dihasilkan. Kedua, biaya perbaikan bug yang ditemukan di produksi. Ketiga, biaya onboarding anggota tim baru untuk membaca kode yang dihasilkan agen dan tidak pernah ditulis oleh siapa pun di tim.

Untuk ketiga hal itu, belum ada data publik yang bisa dikutip. Benchmark ini hanya menjawab satu pertanyaan sempit: berapa biaya token untuk membuat versi pertama aplikasi yang lolos spec. Pertanyaan yang lebih penting untuk anggaran tahunan, yaitu berapa biaya memelihara kode itu selama dua tahun, tidak dibahas dan tidak diukur.

FAQ

Apakah benchmark ini memakai uang sungguhan?

Tidak. Angka dolar dihitung dari harga API berdasarkan pemakaian token. Lawson memakai paket Max 100 dolar per bulan, jadi biaya sebenarnya tidak keluar per run. Perlakukan angka itu sebagai indeks biaya relatif, bukan tagihan.

Kenapa Angular hanya dijalankan 3 kali, bukan 5?

Karena Angular gagal membuat aplikasi yang berjalan dua kali. Dua kegagalan itu memakan iterasi, sehingga hanya tersisa 3 hasil yang bisa dipakai untuk median. Ini juga sinyal bahwa kompleksitas bukan cuma soal biaya token.

Apakah Tailwind diizinkan dalam tes ini?

Tidak. Lawson melarang Tailwind, Bootstrap, dan framework komponen lain, lalu memakai satu set design token supaya tampilan antar framework tetap sebanding. Tujuannya agar tes tidak berubah menjadi perbandingan metodologi CSS.

Framework apa yang paling hemat untuk proyek jangka panjang?

Tidak ada jawaban tunggal dari data ini, karena yang diukur hanya build pertama. Biaya pemeliharaan, jumlah bug, dan kecepatan onboarding anggota tim baru tidak masuk perhitungan. Data ini hanya menjawab satu pertanyaan: berapa token yang dibakar agen untuk membangun versi pertama.

Di mana data mentahnya bisa dilihat?

Semua tabel, rentang antar run, dan catatan metodologi ada di posting asli Nolan Lawson. Setiap tabel di sana bisa diurutkan ulang, jadi kalian bisa memeriksa sendiri apakah urutan biaya berubah ketika diurutkan berdasarkan waktu atau jumlah baris kode.