Biaya AI Tersembunyi dari Framework JavaScript

Agennya menghabiskan sebelas menit membaca panduan migrasi sebelum menulis satu baris kode pun. Bukan agen Anda, melainkan agen yang ditunjukkan rekan kerja Anda ke proyek SvelteKit minggu lalu, dengan prompt yang sama seperti yang Anda berikan ke aplikasi React sejam sebelumnya. Milik Anda selesai dalam sekitar delapan menit dan empat juta token. Milik mereka butuh tujuh belas menit dan hampir sepuluh juta token, dan sebagian besar selisihnya adalah model yang dengan sabar mengajari dirinya sendiri versi framework yang belum pernah ia lihat saat pelatihan. Celah ini sekarang punya nama: biaya AI dari framework JavaScript. Dan berkat satu hal yang jarang terjadi di industri kita, yaitu ada yang benar-benar mengukur, bukan sekadar mengklaim, kita akhirnya punya angka nyata untuk itu.

Nolan Lawson, yang sudah bertahun-tahun mengganti folklor frontend dengan benchmark sungguhan, baru-baru ini melakukan hal yang jelas tapi tak pernah dilakukan siapa pun. Ia merancang aplikasi Pokémon kecil tapi tidak sepele, dengan pencarian, filter, halaman detail, dan data dari PokéAPI, lalu meminta agen coding membangunnya dengan dua belas cara berbeda: Astro, Next.js, Nuxt, SvelteKit, React Router, SolidStart, Qwik, Angular, TanStack Start, Hono dengan htmx, Gracile dengan Lit, dan Vite polos tanpa framework UI sama sekali. Setiap framework mendapat lima kali percobaan independen dengan prompt yang sama, setiap hasil diperiksa dengan conformance suite supaya agen tidak bisa curang, dan hasilnya dinilai dari biaya, waktu, token, serta metrik Lighthouse. Ini bukan eksperimen yang sempurna, dan Lawson sendiri mengakuinya. Tapi ini upaya jujur pertama yang saya lihat untuk memberi label harga pada keputusan yang kebanyakan tim ambil hanya berdasarkan perasaan.

Apa yang Sebenarnya Diukur Benchmark Ini

Pengaturannya sengaja dibuat netral. Agen mendapat spesifikasinya, diminta memakai versi terbaru dari framework tertentu, dan dibiarkan memilih arsitekturnya sendiri, entah SSR atau CSR, terserah. Jika sebuah framework menyediakan server MCP resmi, agent skill, atau plugin, itu disediakan, sehingga tidak ada framework yang bisa mengeluh kurang terwakili dalam data pelatihan. Tes konformitas dijalankan terhadap accessibility tree, bukan raw DOM, dan ini penting karena salah satu kontestan merender lewat shadow DOM. Setiap framework mendapat lima kali percobaan dan hasilnya dilaporkan sebagai median, kecuali Angular, yang dua kali gagal menghasilkan aplikasi yang bisa diuji, sehingga sebagian angkanya berasal dari tiga kali percobaan.

• Biaya build berkisar dari median sekitar $2,67 hingga $4,97 per aplikasi, atau selisih sekitar 2x antara framework termurah dan termahal.
• Konsumsi token menceritakan hal yang sama, lebih keras: sekitar 4 juta token untuk stack termurah, hampir 10 juta untuk yang termahal.
• Waktu tempuh mengikuti biaya dengan cukup erat, dari sekitar 8 menit di ujung cepat hingga 17 menit di ujung lambat.
• SvelteKit, Gracile+Lit, dan Angular secara konsisten menjadi build termahal. Astro dan pasangan Hono+htmx secara konsisten murah.
• Yang mengejutkan, build Vite tanpa framework kalah dari beberapa framework sungguhan. Struktur yang baik mengalahkan tanpa struktur, bahkan untuk mesin.

Dua dolar per build terdengar tidak seberapa. Memang tidak seberapa untuk satu build. Tapi pengembangan agentik pada dasarnya iteratif, dan tidak ada yang langsung menerima output pertama. Kalikan selisih itu dengan puluhan sesi agen per developer per minggu, di seluruh tim, selama setahun, dan pengali token 2x pada stack Anda menjadi pos anggaran yang nyata. Yang lebih penting, token adalah proksi untuk sesuatu yang lebih saya pedulikan daripada uang: seberapa banyak trial-and-error yang dibutuhkan model untuk menghasilkan kode yang benar di framework Anda. Jumlah token yang tinggi biasanya berarti agen kebingungan, membaca ulang dokumentasi, dan mencoba lagi. Itu sinyal kualitas yang menyamar sebagai biaya.

Mengapa Sebagian Framework Membuat Agen Mahal

Setelah bertahun-tahun melatih dan mengevaluasi model, saya merasa hasilnya tidak semisterius kelihatannya. Tiga mekanisme menjelaskan hampir seluruh selisih itu, dan tidak ada satu pun yang berkaitan dengan framework mana yang "lebih baik" dalam arti tradisional.

Kepadatan data pelatihan adalah takdir

Keunggulan terbesar React di era agentik bukan model pemrogramannya, melainkan fakta bahwa satu dekade tutorial, repo GitHub, dan jawaban Stack Overflow telah memadatkan idiomnya ke dalam bobot setiap model frontier. Agen yang menulis React sebagian besar hanya mengingat. Agen yang menulis Gracile sebagian besar sedang menemukan: dalam percobaan benchmark, agen yang tidak mengenal framework itu berakhir dengan mengkloning repositori framework atau membaca sumber yang sudah dikompilasi dari node_modules. Itu token yang habis untuk pelajaran dasar sebelum kode pengguna bahkan ada. Dinamika yang sama ini membentuk ulang cara developer mencari pengetahuan secara umum. Saya pernah menulis tentang apa yang terjadi pada korpus pengetahuan developer saat Stack Overflow memudar, dan sudut framework adalah kasus khusus yang tajam: tools yang tidak populer bukan hanya kekurangan komunitas, tetapi juga kekurangan kehadiran di dalam model itu sendiri.

Churn API adalah pajak token yang berulang

Performa SvelteKit yang buruk punya penyebab spesifik yang hampir lucu: agen membaca panduan migrasi SvelteKit v3 di setiap percobaan, karena versi itu terlalu baru untuk ada di data pelatihan model. Setiap breaking change yang dirilis sebuah framework membatalkan pola yang sudah dihafal model dan memaksanya menurunkan ulang API yang benar dari dokumentasi saat inferensi, dibayar dengan token, di setiap sesi, oleh setiap pengguna. Framework memperlakukan perubahan versi mayor sebagai acara pemasaran. Bagi pengguna agen, itu adalah surcharge berulang. Framework yang membosankan dan tidak merusak API-nya selama tiga tahun, menurut metrik ini, justru fitur premium.

Verbositas berlipat ganda lewat loop

Biaya Angular tampaknya mengikuti jumlah kode yang sangat besar. Lebih banyak baris yang dihasilkan berarti lebih banyak token keluaran, lebih banyak token untuk dibaca ulang di setiap edit berikutnya, dan lebih banyak permukaan bagi agen untuk tersandung. Ini berlaku umum: stack apa pun dengan output tool yang bertele-tele, log build yang berisik, atau perintah tes yang lambat memaksa agen menyaring lebih banyak teks per iterasi, dan setiap lint atau pemeriksaan tipe yang gagal memicu putaran bolak-balik yang mahal. Praktisi melaporkan pola yang sama di mana-mana: biaya iterasi, bukan biaya generasi, yang mendominasi pengeluaran agen. Framework dengan toolchain yang cepat, tenang, dan ketat lebih murah dioperasikan dibanding yang permisif, karena ketegasan menangkap kesalahan agen dalam satu siklus, bukan lima.

Setiap breaking change yang dirilis framework Anda kini menjadi pajak yang dibayar seseorang dengan token, dan tidak seperti manusia yang membaca changelog, model membayarnya di setiap sesi.

Masalah Dadu dalam Benchmark Agen

Di sinilah kebiasaan evaluasi ML lama saya bekerja, karena detail terpenting dalam studi ini adalah error bar-nya. Output LLM adalah distribusi, bukan titik. Median biaya build React Router sekitar satu dolar lebih buruk dibanding Hono+htmx, namun satu percobaan termurah React Router justru lebih rendah dari percobaan termahal Hono. Rentangnya saling tumpang tindih secara substansial. Percobaan SvelteKit berayun dari sekitar $3,20 hingga $6,80. Kadang agen memang sedang sial, melantur ke arah yang tidak perlu, dan menghabiskan beberapa juta token karena alasan yang sama sekali tidak berhubungan dengan framework.

Data penggunaan tools menegaskan hal yang sama. Framework merilis server MCP dan file skill, dan agen memakainya... kadang-kadang. Server MCP Nuxt tidak pernah disentuh dalam lima percobaan. File skill TanStack Start ditemukan hanya dalam dua dari lima percobaan. Skill React Router dipakai setiap kali. Prompt sama, harness sama, perilaku sangat berbeda, dan itulah sifat stokastik dari alat ini. Artinya setiap utas Twitter yang mengklaim "framework X jauh lebih baik untuk agen, saya tulis ulang seluruh aplikasi saya" berdasarkan satu sore vibe-coding sebenarnya hanya mengukur noise. Satu percobaan hanyalah anekdot. Jika Anda membiarkan biaya AI memengaruhi keputusan arsitektur, dan menurut saya memang seharusnya begitu, tuntut median dari percobaan berulang sebelum Anda percaya apa pun, termasuk benchmark ini.

Soal Kualitas Output, Semuanya Berakhir Baik-Baik Saja

Hasil yang paling mengejutkan justru adalah yang tidak bervariasi. Skor Lighthouse Performance, Accessibility, dan Cumulative Layout Shift hampir jenuh di seluruh dua belas stack, dengan hampir di mana-mana bernilai 99 dan 100. Dengan spesifikasi yang jelas dan conformance suite, agen modern menghasilkan aplikasi kecil yang kompeten dan accessible di hampir framework apa pun. Batas bawah kualitas sudah naik sampai-sampai framework hampir tidak membedakan output pada situs yang berfokus pada konten.

Satu-satunya metrik kualitas dengan sebaran nyata adalah JavaScript yang dikirim: nol KiB untuk build bergaya islands Astro dan Hono+htmx, hingga sekitar 142 KiB untuk output SPA paling berat. Total Blocking Time tetap sepele di semua build, dan LCP terlalu berisik untuk dibaca banyak. Dua catatan jujur berlaku di sini. Aplikasi uji lebih mirip Wikipedia daripada Figma, sehingga menguntungkan arsitektur multi-halaman, dan Lighthouse sendiri secara struktural bias terhadap SPA. Meski begitu, hasil JavaScript vanilla layak mendapat perhatian: agen yang diminta memakai Vite polos tanpa framework menghasilkan skor lebih buruk dibanding beberapa framework sungguhan, termasuk layout shift tertinggi dari build mana pun. Framework mengkodekan konvensi, dan agen sangat bersandar pada konvensi. Beri model alur yang sudah sering dilalui, dia akan tetap di sana; beri dia ruang kosong, dia akan berimprovisasi, dan tidak selalu dengan baik.

Apa yang Tidak Bisa Diberitahukan Benchmark Ini

Sebelum ada yang menulis ulang aplikasi produksinya berdasarkan demo Pokémon, mari jujur soal cakupannya. Ini satu aplikasi kecil yang sebagian besar berbasis konten, dengan sedikit state lintas-fitur, tanpa lokalisasi, tanpa form kompleks, dan tanpa tim manusia yang akan memeliharanya selama lima tahun. Itu keterbatasan yang nyata, dan itu jebakan yang sama yang terus saya bahas di blog ini: benchmark AI secara sistematis melewatkan sebagian besar bentuk pekerjaan nyata. Sifat-sifat yang membuat framework baik untuk agen pada mainan greenfield, yaitu familiaritas, kesederhanaan, dan struktur statis, bukanlah sifat yang penting di bulan kedelapan belas dari sebuah produk yang berantakan.

Ada juga poin yang lebih dalam yang sudah diangkat dengan tepat oleh para skeptis framework dalam diskusi. Sebagian besar nilai historis framework tidak pernah soal apa yang memungkinkan Anda lakukan, melainkan apa yang dilarangnya. Java menguasai pengembangan enterprise sebagian karena memaksa sepuluh ribu programmer menulis kode yang terlihat serupa. Framework adalah sistem batasan untuk tim manusia yang bergabung, keluar, dan saling salah paham. Agen tidak butuh pagar pengaman terhadap kebosanan atau pengembangan yang didorong resume; ia butuh spesifikasi yang jelas dan test suite. Seorang praktisi melaporkan kebalikan ini dengan htmx: agen melenggang melewati halaman sederhana tapi tersandung di form stateful yang kompleks, kehilangan state dan merusak toggle, masalah yang mungkin langsung diselesaikan React dalam sekali coba, sampai cukup banyak tes tersedia untuk menjaganya tetap jujur. Batasan yang penting bagi agen bukanlah framework-nya, melainkan conformance suite-nya.

Dan ya, build termurah bukanlah codebase termurah. Membayar dua dolar ekstra per sesi agen untuk stack yang dipahami tim Anda secara mendalam dan bisa dipelihara bertahun-tahun jelas merupakan keputusan yang benar. Tapi perhatikan apa yang dibutuhkan argumen itu: angka. Seluruh tujuan mengukur biaya AI bukanlah untuk memilih pemenang, melainkan untuk mengganti "framework ini lebih baik untuk agen" dengan kuantitas yang bisa Anda timbang terhadap pasar tenaga kerja, kematangan ekosistem, dan ukuran bundle. Perasaan sudah kalah dalam debat DX; jangan biarkan ia menang di debat agentik secara default.

Cara Mengukur Biaya AI dari Stack Anda Sendiri

Jangan mengekstrapolasi dari benchmark orang lain, termasuk yang ini, ke codebase Anda. Repo Anda, spesifikasi Anda, dan model pilihan Anda akan menghasilkan distribusinya sendiri. Kabar baiknya, mengukur biaya AI itu sangat mudah, karena agen coding sudah melaporkan semua yang Anda butuhkan. Jika Anda ingin memahami bagaimana loop, konteks, dan izin saling berinteraksi sebelum Anda memasang instrumennya, tulisan kami tentang cara kerja CLI coding agentik adalah fondasi yang baik. Lalu lakukan ini:

1. Pilih irisan vertikal yang mewakili pekerjaan nyata Anda, yaitu fitur yang menyentuh data layer, state management, dan UI, bukan halaman landing.
2. Tulis conformance test terlebih dahulu. Tes adalah sekaligus gerbang kualitas dan perangkat anti-curang; agen tanpa tes akan mengklaim kemenangan terlalu cepat.
3. Jalankan prompt yang sama minimal lima kali per stack atau konfigurasi calon. Laporkan median dan rentang, jangan pernah hasil satu kali jalan.
4. Catat total token (dipisah menjadi cache reads, input, dan output), waktu tempuh, biaya, serta jumlah tool call dan loop percobaan ulang.
5. Lacak berapa banyak token yang dihabiskan untuk membaca dokumentasi seperti panduan migrasi, changelog, dan penjelajahan node_modules. Itulah pajak defisit data pelatihan Anda, diukur secara langsung.
6. Jalankan ulang benchmark setelah upgrade framework besar. Biaya AI bergeser seiring API yang berubah dan batas data pelatihan yang bergerak.

Harness-nya sendiri bisa dibuat dalam satu sore dengan scripting. Ini kerangka yang saya pakai. Detail flag CLI akan bergantung pada agen Anda, tapi bentuknya universal:

import json
import statistics
import subprocess
FRAMEWORKS = ["astro", "react-router", "sveltekit"]
RUNS = 5
SPEC = open("spec.md").read()
def build_once(framework: str) -> dict:
"""One full agent session: build the app, return usage stats."""
result = subprocess.run(
[
"agent-cli", "run",
"--prompt", SPEC,
"--context", f"Build this with the latest {framework}.",
"--output-format", "json",
],
capture_output=True,
text=True,
check=True,
)
return json.loads(result.stdout)
for framework in FRAMEWORKS:
runs = [build_once(framework) for _ in range(RUNS)]
costs = [r["cost_usd"] for r in runs]
tokens = [r["tokens_total"] for r in runs]
print(
f"{framework}: "
f"median ${statistics.median(costs):.2f} "
f"(range ${min(costs):.2f}-${max(costs):.2f}), "
f"median {statistics.median(tokens) / 1e6:.1f}M tokens"
)

Perhatikan jumlah percobaan ulang sama cermatnya dengan total token. Dari pengalaman saya, token per tes yang diterima adalah metrik paling jujur: ia memadatkan biaya, kebingungan, dan ketepatan menjadi satu angka, dan ia menghukum mode kegagalan yang benar-benar menyakitkan, yaitu agen yang kewalahan melewati lima loop error kompilasi sebelum akhirnya menghasilkan sesuatu yang lolos. Framework di mana agen lulus dengan bersih pada percobaan pertama atau kedua akan selalu mengalahkan yang secara nominal "lebih murah" tapi terus membutuhkan koreksi.

Kesimpulan Praktis

Jadi apakah Anda harus menulis ulang aplikasi Angular ke Astro karena agen menganggapnya lebih murah? Tidak. Selisih dolarnya kecil, variansinya besar, aplikasi uji hanyalah mainan, dan migrasi Anda akan memakan lebih banyak token agen daripada yang bisa dihemat dalam satu dekade. Siapa pun yang menjual migrasi framework "demi agen" sedang melakukan penalaran berbasis perasaan yang selalu dilakukan industri, hanya saja dengan justifikasi baru yang ditempelkan.

Tapi biaya AI pantas mendapat tempat di meja keputusan, berdampingan dengan kolam perekrutan, kedalaman ekosistem, dan ukuran bundle. Untuk proyek greenfield, bukti mengarah ke satu arah yang konsisten: pilih stack dengan representasi data pelatihan yang dalam, churn API yang lambat, toolchain yang ketat dan tenang, serta konvensi yang sudah dilihat model sepuluh ribu kali. Teknologi yang membosankan selalu menjadi pilihan pragmatis; agen hanya membuat yang membosankan itu terukur. Kunci versi framework Anda, karena setiap upgrade kini juga menjadi pajak waktu inferensi sampai model menyusul. Dan investasikan pada conformance test apa pun framework yang Anda pilih, karena itulah satu-satunya aset yang membuat setiap agen lebih murah, menjaganya tetap jujur saat kewalahan, dan terus berguna jauh setelah model yang Anda pakai hari ini usang. Framework akan terus berganti. Tes, dan kebiasaan mengukur, itulah yang bertahan.