Kıyaslama: JavaScript çerçevelerinin yapay zekâyla oluşturma maliyeti ve performansı

Bir kıyaslama, aynı küçük Pokemon uygulamasını her biriyle oluşturmasını bir yapay zekâ aracısından isteyerek 12 JavaScript çerçevesini ve meta çerçevelerini karşılaştırdı. Birden çok çalıştırmada medyan maliyeti, süreyi, token sayısını, kod satırını ve Lighthouse performansı ile erişilebilirliği ölçtü. Maliyetler Hono ile htmx için 2,67 dolardan Angular için 4,97 dolara kadar değişti; çoğu çerçeve Lighthouse erişilebilirlikte 100 puan aldı.

Oluşturma maliyeti ve çaba

Medyan oluşturma maliyetleri Hono ile htmx için 2,67 dolardan Angular için 4,97 dolara kadar değişti. SvelteKit 4,28 dolar, Gracile ile Lit 4,65 dolar ve Angular 4,97 dolar tuttu; bunlar diğerlerinden daha pahalıydı. Kıyaslama, SvelteKit aracısının her çalıştırmada SvelteKit v3 geçiş kılavuzunu okuduğunu, Gracile aracısının çoğunlukla deposunu klonladığını veya derlenmiş kaynağı okuduğunu ve Angular'ın daha yüksek maliyetinin daha büyük kod boyutuyla ilişkili olduğunu söylüyor. Medyan çalışma süreleri Astro için 8,2 dakikadan Angular için 17,2 dakikaya kadar değişti; token kullanımı Nuxt için 3,85 milyondan Angular için 9,76 milyona kadar değişti.

Performans ve erişilebilirlik

Lighthouse erişilebilirliği her çerçeve için 100'dü. Performans 97 ile 100 arasındaydı; Vanilla 97, Next.js ve TanStack Start 99 puan aldı. Gönderilen JavaScript baytları Astro için 0 KiB'den Next.js için 142 KiB'ye kadar değişti. Toplam Engelleme Süresi birkaç çerçeve için 0 ms'den Angular için 103 ms'ye kadar değişti. En Büyük İçerikli Boyama Astro için 810 ms'den Next.js için 2090 ms'ye kadar değişti ve kıyaslama, bu metriğin genel olarak çok sayfalı uygulamaları ödüllendirdiğini, tek sayfalı uygulamaları cezalandırdığını belirtiyor.

Kod boyutu ve bakım kolaylığı

Boş olmayan kaynak kod satırları Hono ile htmx için 1370'den Angular için 2009'a kadar değişti. Yazı Rich Harris'ten şu alıntıyı veriyor: "Çerçeveler kodunuzu düzenlemek için araçlar değildir; zihninizi düzenlemek için araçlardır." Ayrıca kod boyutunun düzenleme sırasında gelecekteki token maliyetlerini etkilediğini savunuyor. Hono ile htmx, Angular'ın kodunun yaklaşık yüzde 70'iyle kabaca aynı uygulamayı ve daha hızlı Lighthouse sonuçlarını sundu.

Sınırlamalar ve yöntem

Uygulama, az etkileşimli, görece içerik ağırlıklı bir Pokemon sitesiydi ve Lighthouse ile Core Web Vitals tek sayfalı uygulamalara karşı önyargılıdır. Test, mevcut olduğunda resmi MCP veya becerileri kullandı, SSR veya CSR zorunlu kılmadı ve Tailwind ile Bootstrap'tan kaçındı. Yazar, LLM çıktısı ve Lighthouse sonuçları stokastik olduğu için birden çok yineleme çalıştırdı; Angular iki kez başarısız oldu, bu yüzden onun rakamları beş yerine üç çalıştırmayı kullanıyor. Kıyaslama ve kod GitHub'da mevcuttur.

Kaynaklar: nolanlawson.com