Svelte

Okunuşu: svelt

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

Svelte, tarayıcıda büyük bir framework çalıştırmak yerine bileşenleri derleme sırasında küçük, verimli JavaScript'e derleyen bir ön yüz framework'üdür.

Svelte nedir?

Svelte, Rich Harris tarafından geliştirildi ve ilk olarak 2016'da yayımlandı. Çoğu framework tarayıcıya bir çalışma zamanı kütüphanesi gönderir ve neyin değiştiğini bulmak için sanal DOM ağaçlarını karşılaştırır. Svelte bu işi derleme adımına taşır: derleyicisi her bileşeni okur ve veri değiştiğinde yalnızca etkilenen DOM düğümlerini güncelleyen kod üretir.

Bir Svelte bileşeni; bir betik, HTML'e benzeyen düz bir işaretleme ve kapsamlı (scoped) stillerden oluşan bir .svelte dosyasıdır. 2024'te yayımlanan Svelte 5'ten beri reaktif durum $state ve $derived gibi rune'larla tanımlanıyor: sayfanın güncellenmesi için bir durum değişkenine değer atamak yeterli; setter fonksiyonlarına ya da bağımlılık listelerine gerek yok.

Sonuç küçük paketler ve hızlı güncellemelerdir; bu da etkileşimli bileşenlere, panolara ve yükleme süresinin önemli olduğu sitelere uyar. SvelteKit, bunun üzerine kurulu resmî uygulama framework'üdür; Next.js'in React için yaptığı gibi yönlendirme, sunucu tarafı render, veri yükleme ve dağıtım adaptörleri ekler.

Sık yapılan bir yanlış, Svelte'in hiç çalışma zamanı olmadığını düşünmektir. Derleyici framework'ün çoğunu ortadan kaldırır, ama yine de küçük bir çalışma zamanı eklenir. Asıl ödünleşim ekosistemin boyutudur: React'in çok daha fazla hazır kütüphanesi ve geliştiricisi vardır; Svelte ise çoğu zaman bileşen yazmanın daha basit ve doğrudan bir yolu olduğu için övülür.

Önemli noktalar

Svelte bileşenleri derleme sırasında verimli JavaScript'e derler.
DOM'u sanal DOM olmadan doğrudan günceller.
Svelte 5, reaktivite için $state ve $derived gibi rune'lar kullanır.
SvelteKit üzerine yönlendirme, SSR ve veri yükleme ekler.
Paketler küçüktür, ama ekosistem React'inkinden küçüktür.

Örnek

Svelte 5'te bir sayaç bileşenisvelte

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>
<p>Doubled: {doubled}</p>

<style>
  button { font-weight: 600; }   /* scoped to this component */
</style>

Sık sorulan sorular

Svelte ile React arasındaki fark nedir?

React tarayıcıda çalışır ve neyin değiştiğini bulmak için sanal DOM kullanır. Svelte ise bileşenleri önceden, DOM'u doğrudan güncelleyen koda derler; bu genellikle daha küçük paketler ve daha az kalıp kod demektir. React'in ise çok daha büyük bir ekosistemi vardır.

SvelteKit nedir?

Svelte ile tam uygulamalar kurmak için resmî framework'tür. Dosya tabanlı yönlendirme, sunucu tarafı render, statik üretim, API endpoint'leri ve Vercel ile Netlify gibi barındırma servisleri için adaptörler sağlar.

Svelte'teki rune'lar nedir?

Svelte 5 ile gelen, $state, $derived ve $effect gibi, reaktif durumu ve hesaplanan değerleri açıkça işaretleyen özel sembollerdir; önceki örtük reaktivitenin yerini alırlar.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin