Svelte 5 ve Runes Devrimi: Sanal DOM Olmadan İnce Ayarlı Reaktivite Çağı

0:00

/0

1×

Svelte 5 ve Runes Devrimi: Sanal DOM Olmadan İnce Ayarlı Reaktivite Çağı

Modern web geliştirme dünyası, performans ve geliştirici deneyimi (DX) arasındaki dengeyi kurmak için sürekli bir dönüşüm içerisinde. Yıllardır React ve Vue gibi kütüphaneler sayesinde hayatımızda olan Sanal DOM (Virtual DOM) kavramı, UI güncellemelerini yönetmek için standart bir yol olarak kabul ediliyordu. Ancak Svelte, en başından beri bu yaklaşıma meydan okudu: 'En hızlı DOM işlemi, hiç yapılmayan işlemdir.'

Şimdi ise Svelte 5, bu vizyonu bir adım öteye taşıyor. Geleneksel derleyici sihirleri ve örtük (implicit) reaktivite kuralları yerine "Runes" adı verilen yeni bir mimariyi duyurdu. $state, $effect ve $derived gibi sembollerle hayatımıza giren Runes, Svelte’i Sanal DOM kullanmadan ince ayarlı reaktivite (fine-grained reactivity) çağının lideri yapmaya aday.

Bu yazıda, Svelte 5 ile gelen bu devrimin ne anlama geldiğini, Runes yapısının kodlarımızı nasıl dönüştürdüğünü ve modern frontend mimarilerine sağladığı avantajları derinlemesine inceliyoruz.

Sanal DOM vs. İnce Ayarlı Reaktivite (Fine-Grained Reactivity)

Sanal DOM kullanan çerçeveler, durum (state) değiştiğinde bileşenin tamamını veya büyük bir bölümünü bellek üzerinde yeniden çalıştırır (render) ve oluşan yeni ağaç ile eskisini karşılaştırır (diffing). Sonrasında sadece değişen kısımlar gerçek DOM'a yansıtılır. Bu süreç hızlı olsa da, işlemci ve bellek maliyeti taşır.

Svelte ise bir derleyicidir (compiler). Uygulamanızı derleme aşamasında analiz eder ve durum değiştiğinde tam olarak hangi DOM düğümünün güncellenmesi gerektiğini doğrudan belirten saf JavaScript kodları üretir.

Svelte 5 ile gelen İnce Ayarlı Reaktivite, bu felsefeyi zirveye çıkarır: * Bileşen Seviyesinde Değil, Veri Seviyesinde Güncelleme: Bir bileşen içindeki tek bir metin değiştiğinde, tüm bileşen fonksiyonu tekrar çalışmaz. Yalnızca o metne bağlı olan DOM düğümü anında tetiklenir. * Sanal DOM Maliyeti Yok: Bellekte devasa nesne ağaçları oluşturulmaz ve karşılaştırılmaz. * Sınırsız Ölçeklenebilirlik: Uygulamanız büyüdükçe reaktivite motorunuz yavaşlamaz.

"Runes" Nedir? Derleyici Sihrinden Açık Koda Geçiş

Svelte 3 ve 4, reaktiviteyi sağlamak için JavaScript'in let anahtar kelimesini ve $: (labeled statements) sözdizimini derleyici düzeyinde "sihirli" bir şekilde yorumluyordu.

<!-- Svelte 4 Yöntemi -->
<script>
  let count = 0;
  $: double = count * 2; // Sihirli reaktivite

  function increment() {
    count += 1;
  }
</script>

Bu yaklaşım acemiler için büyüleyici görünse de iki büyük sorun yaratıyordu: 1. Reaktivite yalnızca .svelte dosyalarının kök seviyesinde çalışıyordu. Saf .js veya .ts dosyalarında bu sihir geçerli değildi. 2. Karmaşık projelerde $: ifadelerinin tetiklenme sırasını takip etmek zorlaşıyordu.

Svelte 5 Runes, bu örtük sihirleri ortadan kaldırır ve dil seviyesinde açık (explicit) bir reaktivite modeli sunar. Runes, derleyiciye özel işlevler sunan ve başında $ işareti bulunan fonksiyon benzeri yapılardır.

Svelte 4 vs. Svelte 5: Kod Üzerindeki Değişim

Farkı anlamak için basit bir sayaç örneğine göz atalım.

Svelte 4 (Eski Yaklaşım)

<script>
  export let title = "Sayaç"; // Prop alımı
  let count = 0;
  $: double = count * 2; // Türetilmiş durum

  $: console.log("Sayı değişti:", count); // Yan etki (Side effect)
</script>

<h1>{title}</h1>
<button on:click={() => count++}>
  {count} x 2 = {double}
</button>

Svelte 5 (Runes Yaklaşımı)

<script>
  // Props alımı $props() ile yapılır
  let { title = "Sayaç" } = $props();

  // Reaktif durum $state() ile tanımlanır
  let count = $state(0);

  // Türetilmiş değerler $derived() ile hesaplanır
  let double = $derived(count * 2);

  // Yan etkiler $effect() ile yönetilir
  $effect(() => {
    console.log("Sayı değişti:", count);
  });
</script>

<h1>{title}</h1>
<button onclick={() => count++}>
  {count} x 2 = {double}
</button>

Dikkat: Svelte 5'te olay dinleyicileri de standart HTML sözdizimine dönüştü. on:click yerine doğrudan onclick kullanılıyor!

En Önemli Svelte 5 Runes Yapıları

Svelte 5 dünyasını yöneten temel Runes yapılarını yakından tanıyalım:

1. $state() — Durum Yönetimi

Reaktif bir durum oluşturur. Nesneler ve diziler de dahil olmak üzere derinlemesine (deep) reaktiftir.

let user = $state({ name: 'Ahmet', age: 25 });

// Nesne içi değişiklikler reaktiftir!
user.age = 26; 

2. $derived() — Hesaplanan (Türetilmiş) Değerler

Başka bir reaktif duruma bağlı olarak otomatik hesaplanan değerleri ifade eder. Gereksiz hesaplamaların önüne geçer.

let items = $state([1, 2, 3]);
let total = $derived(items.reduce((a, b) => a + b, 0));

3. $effect() — Yan Etkiler ve Yaşam Döngüsü

DOM güncellendikten sonra çalışacak yan etkileri (side-effects) yönetir. onMount veya eski $: kod bloklarının yerini alır. İçerisinde kullanılan reaktif değişkenleri otomatik olarak takip eder.

$effect(() => {
  document.title = `Okunmamış mesaj: ${unreadCount}`;

  // Cleanup (Temizlik) fonksiyonu döndürebilirsiniz
  return () => console.log('Effect temizlendi');
});

4. $props() — Bileşen Girdileri

Bileşene dışarıdan aktarılan özellikleri (props) almak için kullanılır. Destructuring (nesne parçalama) ve varsayılan değer atama işlemleriyle mükemmel uyumludur.

let { name = 'Misafir', role = 'User' } = $props();

Runes Oyunun Kurallarını Nasıl Değiştiriyor?

1. Bileşenlerin Dışında Reaktivite

Eski Svelte sürümlerinde reaktif mantığı bileşen dışına çıkarmak için writable veya readable store'lar kullanmak gerekiyordu. Svelte 5 ile artık .svelte.js veya .svelte.ts dosyaları içinde doğrudan Runes kullanabilirsiniz!

// counter.svelte.js (Saf JavaScript Dosyası)
export function createCounter() {
  let count = $state(0);

  return {
    get count() { return count; },
    increment: () => count++,
    decrement: () => count--
  };
}

Bu özellik, kodun yeniden kullanılabilirliğini (reusability) ve mimari esnekliği inanılmaz bir seviyeye çıkarıyor.

2. Mükemmel TypeScript Desteği

Eski $: ve export let yapıları TypeScript derleyicisi için zaman zaman kafa karıştırıcı olabiliyordu. Runes, standart JavaScript fonksiyon çağrıları gibi göründüğü için TypeScript ile %100 tip güvenliği ve harika bir IDE otomasyonu (autocompletion) sunar.

3. "Signals" Mimarisine Entegre Bir Yaklaşım

Günümüzde SolidJS, Vue (Reactivity Transform) ve Angular (Signals) gibi araçlar Signal mimarisine geçiş yapıyor. Svelte 5 de temelde bir Signal mimarisi kullanır ancak bunu geliştiriciye ek yük getirmeden, Runes sözdiziminin arkasında son derece zarif bir şekilde gizler.

Sonuç: Svelte 5 ile Geleceğe Adım Atın

Svelte 5 ve Runes devrimi, Svelte'i bir "derleyici deneyinden" çıkarıp büyük ölçekli kurumsal uygulamaların (Enterprise Applications) vazgeçilmez bir oyuncusu haline getiriyor.

Sanal DOM’un getirdiği karmaşıklığı reddeden bu yeni model; * Daha küçük paket boyutları (bundle size), * Daha yüksek çalışma zamanı (runtime) performansı, * Bileşen sınırlarını aşan temiz bir kod mimarisi vaat ediyor.

Eğer modern web geliştirmede hız, basitlik ve sürdürülebilirlik arıyorsanız, Svelte 5'in sunduğu İnce Ayarlı Reaktivite dünyasını keşfetmenin tam zamanı!

Svelte 5 hakkında ne düşünüyorsunuz? Runes yapısı sizce React veya Vue kullanıcılarını Svelte'e çekebilir mi? Yorumlarda düşüncelerinizi paylaşmayı unutmayın!