Biaya AI Membangun Aplikasi per Framework JavaScript: 2,67 sampai 4,97 Dolar per Run

Membangun aplikasi yang sama dengan agent AI paling murah di Hono+htmx, yaitu 2,67 dolar per run, dan paling mahal di Angular, 4,97 dolar per run. Selisihnya hampir dua kali lipat untuk hasil aplikasi yang lolos rangkaian tes yang sama. Angka itu berasal dari benchmark Nolan Lawson yang dipublikasikan 28 Oktober 2026 di blog Read the Tea Leaves, dengan median lima kali percobaan per framework. Yang lebih menarik bukan urutan harganya, tapi apa yang tidak berkorelasi dengan harga itu.

TL;DR

• Biaya membangun satu aplikasi uji berkisar 2,67 sampai 4,97 dolar, median lima run per framework.
• Konsumsi token bergerak dari 3,85 juta (Nuxt) sampai 9,76 juta (Angular), selisih 2,5 kali.
• Skor Lighthouse hampir mentok di semua framework, jadi skor itu tidak membedakan apa pun.
• Ukuran JavaScript terkirim tetap berbeda jauh: Astro 0 KiB, Next.js 142 KiB.
• Angular gagal menghasilkan aplikasi terukur dua kali, jadi metriknya memakai tiga iterasi, bukan lima.

Bagaimana benchmark ini dijalankan?

Lawson membangun satu aplikasi Pokémon kecil yang memakai PokéAPI: daftar Pokémon dengan tipe, jurus, dan data dari beberapa game, lengkap dengan pencarian dan filter. Agent diminta membuat aplikasi itu dengan framework tertentu, lalu hasilnya diuji terhadap rangkaian tes kepatuhan yang ditulis terpisah, supaya agent tidak bisa "menang" dengan mengubah tesnya sendiri.

Beberapa keputusan metodologi yang penting untuk menilai hasilnya. Model yang dipakai adalah Opus 5.5 dengan effort tinggi, dan setiap framework memakai MCP atau skill resminya agar tidak ada alasan "framework ini kurang terwakili di data latih". Agent berjalan di sandbox tanpa tahu bahwa hasilnya akan diuji Lighthouse, tapi tetap diberi rangkaian tes kepatuhan. CSS dibatasi: tanpa Tailwind, Bootstrap, atau framework komponen lain, supaya pengukuran tidak berubah menjadi kontes CSS.

Tes kepatuhannya berbasis accessibility tree, bukan DOM mentah, karena satu framework memakai web component dengan shadow DOM. Lighthouse dijalankan untuk performa dan aksesibilitas. Setiap framework diulang lima kali dan diambil median, kecuali Angular yang dua kali gagal menghasilkan aplikasi terukur sehingga memakai tiga iterasi.

Lawson sendiri menyebut variansinya besar. Model bahasa menghasilkan keluaran acak, jadi kadang satu run membuang banyak token karena agent mengambil jalan aneh, dan itu bukan salah framework. Lighthouse juga tidak selalu konsisten menentukan elemen terbesar untuk LCP. Karena itu angka di bawah sebaiknya dibaca sebagai rentang, bukan angka pasti.

Framework mana yang paling murah per build?

Hono+htmx paling murah dengan median 2,67 dolar, disusul Astro 2,76 dolar dan Nuxt 2,82 dolar. Angular paling mahal dengan 4,97 dolar, dan rentang kepercayaannya juga paling lebar, yaitu 3,19 sampai 6,82 dolar. Perhatikan bahwa harga ini dihitung dari tarif API yang dipakai langsung, jadi bukan biaya total proyek.

Framework	Biaya median	Token median	Waktu median
Hono+htmx	2,67 dolar	4,26 juta	8,6 menit
Astro	2,76 dolar	4,13 juta	belum diambil
Nuxt	2,82 dolar	3,85 juta	9,0 menit
Vanilla	2,98 dolar	5,00 juta	10,1 menit
Next.js	3,14 dolar	4,99 juta	10,9 menit
Qwik	3,27 dolar	5,64 juta	10,7 menit
TanStack Start	3,54 dolar	7,07 juta	10,3 menit
SolidStart	3,79 dolar	7,13 juta	11,2 menit
React Router	3,81 dolar	7,58 juta	12,5 menit
SvelteKit	4,28 dolar	8,53 juta	10,8 menit
Gracile+Lit	4,65 dolar	9,04 juta	12,1 menit
Angular	4,97 dolar	9,76 juta	17,2 menit

Urutan biaya dan urutan token tidak identik, dan itu masuk akal karena harga per token berbeda antara input cache, input baru, dan output. Nuxt menghabiskan token paling sedikit, 3,85 juta, tapi tidak jadi yang termurah karena komposisi tokennya berbeda. Hono+htmx ada di posisi kedua tersedikit dengan 4,26 juta token dan menjadi termurah secara total.

Waktu penyelesaian memberi gambaran yang lebih dekat ke pengalaman sehari-hari. Hono+htmx selesai dalam 8,6 menit, sementara Angular butuh 17,2 menit, dua kali lipat. Untuk satu aplikasi kecil, selisih sembilan menit tidak terasa. Untuk sepuluh iterasi dalam satu sprint, selisihnya menjadi satu setengah jam menunggu.

Yang perlu diingat, semua run memakai model yang sama dengan effort yang sama. Jadi perbedaan ini bukan soal kualitas model, tapi soal seberapa banyak konteks dan iterasi yang dibutuhkan framework tersebut sebelum hasilnya lolos tes.

Apakah biaya build mencerminkan performa aplikasi?

Tidak, dan itu temuan yang paling berguna. Skor Lighthouse untuk performa dan aksesibilitas hampir mentok di semua framework: Astro, Gracile+Lit, Hono+htmx, Nuxt, Qwik, React Router, SolidStart, dan SvelteKit semuanya 100 untuk performa. Angular 98, Next.js dan TanStack Start 99, Vanilla 97. Aksesibilitas 100 di semua framework. CLS nol di semua kecuali Vanilla yang 0,111.

Artinya, kalau lo memilih framework berdasarkan skor Lighthouse untuk aplikasi sekecil ini, lo tidak sedang memilih apa pun. Yang membedakan adalah ukuran JavaScript yang dikirim ke browser, dan di situ selisihnya besar.

Framework	JavaScript terkirim	TBT	Performa Lighthouse
Astro	0 KiB	0 ms	100
Vanilla	7 KiB	0 ms	97
Gracile+Lit	8 KiB	0 ms	100
Hono+htmx	18 KiB	0 ms	100
SvelteKit	36 KiB	0 ms	100
SolidStart	40 KiB	11 ms	100
Qwik	40 KiB	3 ms	100
Nuxt	84 KiB	belum diambil	100
Angular	93 KiB	belum diambil	98
React Router	115 KiB	belum diambil	100
TanStack Start	118 KiB	1 ms	99
Next.js	142 KiB	belum diambil	99

Astro mengirim nol kilobyte JavaScript, sementara Next.js 142 KiB. Untuk pengguna di jaringan seluler Indonesia, selisih 142 KiB bukan angka abstrak: itu waktu tambahan sebelum halaman bisa diinteraksi, dan itu biaya yang dibayar setiap pengunjung, bukan sekali saat build.

Tapi ada peringatan penting yang Lawson tulis sendiri. Lighthouse dan Core Web Vitals cenderung memihak aplikasi multi-halaman dan menghukum single page application, terutama pada Total Blocking Time dan ukuran JavaScript. Jadi keunggulan Astro dan Hono+htmx di tabel ini sebagian memang berasal dari arsitekturnya, bukan dari kepintaran agent yang membangunnya. Metrik itu tetap valid, hanya perlu dibaca dengan sadar bahwa perbandingannya tidak sepenuhnya setara.

Hal lain yang perlu dicatat, semua aplikasi diberi rangkaian tes kepatuhan. Tanpa itu, agent bisa "menang" dengan membangun aplikasi yang lebih sederhana dari spesifikasi. Lawson menyebut alasannya jelas: tes kepatuhan mencegah agent curang. Efek sampingnya, semua aplikasi yang lolos punya tingkat kelengkapan fitur yang kurang lebih sama, sehingga perbandingan biaya jadi lebih adil.

Apa yang tidak diukur benchmark ini?

Banyak, dan Lawson menyebutnya sendiri. Aplikasi uji itu kecil dan berbasis konten, lebih dekat ke Wikipedia daripada ke aplikasi dengan interaksi berat seperti Figma atau klien email. Jadi hasilnya tidak otomatis berlaku untuk aplikasi besar dengan state kompleks, form bertingkat, atau realtime collaboration.

• Tidak ada pengukuran biaya pemeliharaan setelah kode jadi. Padahal itu pos yang biasanya lebih besar dari biaya build.
• Tidak ada pengukuran seberapa mudah agent memperbaiki bug di kode yang dihasilkannya sendiri beberapa minggu kemudian.
• Tidak ada pengukuran kualitas desain visual, karena CSS dibatasi dan hanya memakai token spesifikasi.
• Tidak ada pengukuran biaya inference saat aplikasi berjalan, karena fokusnya hanya proses membangun.
• Jumlah run lima kali masih kecil untuk distribusi yang ekornya panjang, dan Lawson terbuka soal itu.

Keterbatasan ini penting karena klaim industri sering melompat dari satu benchmark kecil ke kesimpulan umum. Kalimat seperti "framework X lebih baik untuk agent" butuh bukti pada beban kerja yang mirip dengan beban kerja lo, bukan pada satu aplikasi Pokémon.

Bagaimana memilih framework dari data ini?

Mulai dari batasan yang lo punya, bukan dari urutan harga. Kalau pengguna lo banyak di jaringan lambat, ukuran JavaScript lebih penting daripada selisih 2 dolar biaya build. Kalau tim lo sering memakai agent untuk membangun ulang fitur, waktu dan token per iterasi lebih penting.

Urutan praktis yang bisa dipakai. Pertama, tentukan anggaran JavaScript yang bisa diterima, karena itu yang dibayar pengguna berulang kali. Kedua, lihat biaya dan waktu build untuk framework yang lolos anggaran itu. Ketiga, baru pertimbangkan ekosistem, dokumentasi, dan ketersediaan tenaga kerja, karena tiga hal itu tidak muncul di benchmark mana pun tapi sering menentukan biaya jangka panjang.

Ada satu pelajaran metodologis yang lebih luas dari artikel ini. Lawson menulis bahwa komunitas web sering mengambil keputusan berdasarkan "vibes", termasuk di era agent: framework dianggap lebih baik untuk agent tanpa ada yang mengukur. Pola itu mudah dikenali. Kalau sebuah klaim tidak menyebut jumlah run, model yang dipakai, dan cara menguji hasilnya, klaim itu belum bisa dipakai untuk keputusan teknis.

Untuk mencoba sendiri, rangkaian tes dan aplikasi ujinya bisa direproduksi karena memakai API publik seperti PokéAPI. Pengukuran performanya memakai Lighthouse, yang dokumentasinya ada di Chrome for Developers. Kalau lo ingin membandingkan framework untuk kasus lo sendiri, ganti aplikasi ujinya dengan satu fitur nyata dari produk lo, lalu ulangi minimal tiga kali. Angkanya mungkin berbeda jauh dari tabel di atas, dan itu justru gunanya.

FAQ

Kenapa Angular paling mahal?

Angular memakai token terbanyak, 9,76 juta, dan waktu terlama, 17,2 menit. Rentang biayanya juga paling lebar, 3,19 sampai 6,82 dolar, dan dua dari lima run gagal menghasilkan aplikasi terukur.

Apakah hasil ini berlaku untuk aplikasi besar?

Belum tentu. Aplikasi ujinya kecil dan berbasis konten. Untuk aplikasi dengan state kompleks, pola biayanya bisa berbeda karena agent butuh lebih banyak iterasi dan konteks.

Apakah Astro selalu paling ringan?

Untuk aplikasi seperti ini, ya, karena mengirim 0 KiB JavaScript. Tapi keunggulan itu datang dari arsitektur multi-halaman, dan tidak otomatis berlaku kalau aplikasi lo butuh interaksi klien yang berat.

Berapa kali setiap framework diuji?

Lima kali, lalu diambil median. Angular hanya tiga kali karena dua percobaan gagal menghasilkan aplikasi yang bisa diukur. Semua run memakai model dan effort yang sama.

Apakah biaya 2,67 dolar itu biaya nyata membangun aplikasi?

Tidak. Itu biaya API untuk satu kali build aplikasi uji, dihitung dari tarif yang dipakai langsung. Biaya proyek nyata mencakup review, pengujian, dan pemeliharaan yang tidak diukur di sini.

Rekomendasi Tools & Layanan

Mau langsung nyobain AI yang dibahas di artikel ini tanpa setup ribet? AI token plan Alibaba Cloud ngasih akses ke Qwen, DeepSeek, dan model lain lewat satu API — dan platform Qwen buat build agent sendiri. Free tier-nya cukup buat eksperimen pertama.