Svelte 5 ile Reaktivitede Yeni Dönem: 'Runes' Mimarisi Nedir?

0:00

/0

1×

Svelte 5 ile Reaktivitede Yeni Dönem: 'Runes' Mimarisi Nedir?

Modern web geliştirme dünyasında Svelte, her zaman "ezber bozan" ve geliştirici dostu yaklaşımıyla öne çıkan bir framework oldu. Sanal DOM (Virtual DOM) kullanmamak, kodu derleme aşamasında saf JavaScript'e dönüştürmek ve minimal kod yazımı, Svelte’i rakiplerinden ayıran en büyük özelliklerdi.

Ancak web uygulamaları büyüdükçe ve karmaşıklaştıkça, Svelte 3 ve 4'ün reaktivite modelindeki bazı sınırlar gün yüzüne çıkmaya başladı. Svelte ekibi bu zorlukları aşmak için radikal bir karar aldı ve framework'ü baştan aşağı yeniden yazdı. İşte bu devrimin adı: Svelte 5 ve onun kalbinde yer alan "Runes" (Rünler) mimarisi.

Bu yazımızda, Svelte 5 ile hayatımıza giren sinyal (signal) tabanlı Runes yapısını, neden bu değişime ihtiyaç duyulduğunu ve bu yeni mimarinin projelerimize getireceği performans ve kullanım kolaylıklarını yakından inceleyeceğiz.

Runes Nedir?

Kelime anlamı olarak "Rün" (antik alfabelerdeki gizemli/büyülü semboller) anlamına gelen Runes, Svelte 5'te derleyiciye (compiler) reaktivite konusunda rehberlik eden özel fonksiyon benzeri sembollerdir.

Svelte'in önceki sürümlerinde reaktivite, let anahtar kelimesi ve $: (label) sözdizimi gibi JavaScript'in standart özelliklerine yüklenen özel anlamlarla sağlanıyordu. Svelte 5 ile birlikte bu yapı yerini, gücünü sinyal (signal) tabanlı bir reaktivite motorundan alan ve $ işaretiyle başlayan Runes yapılarına bıraktı.

Runes, Svelte derleyicisine "Bu değişkeni takip et, değiştiğinde ilgili yerleri güncelle" demenin yeni, daha açık ve daha güçlü bir yoludur.

Svelte 3/4 vs. Svelte 5: Kod Karşılaştırması

Değişimi anlamanın en iyi yolu, eski ve yeni yöntemi karşılaştırmaktır. Gelin, basit bir sayaç (counter) bileşeninin her iki sürümde nasıl yazıldığını karşılaştıralım.

Eski Yöntem (Svelte 3 & 4)

<script>
  let count = 0;

  // Reaktif türetilmiş değer (reactive declaration)
  $: doubled = count * 2;

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

<button on:click={increment}>
  Tıklandı: {count} (İki Katı: {doubled})
</button>

Yeni Yöntem (Svelte 5 - Runes ile)

<script>
  // 1. Durum (State) tanımlama
  let count = $state(0);

  // 2. Türetilmiş (Derived) değer tanımlama
  let doubled = $derived(count * 2);

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

<!-- Event dinleyici sözdizimi de basitleşti (on:click yerine onclick) -->
<button onclick={increment}>
  Tıklandı: {count} (İki Katı: {doubled})
</button>

En Önemli Runes Yapıları ve Görevleri

Svelte 5 ile birlikte gelen ve en sık kullanacağınız temel rünler şunlardır:

1. $state

Bileşenin durumunu (state) tanımlamak için kullanılır. Eski sistemdeki let count = 0 tanımının yerini alır. $state ile tanımlanan değişkenler reaktiftir ve değerleri değiştiğinde DOM otomatik olarak güncellenir. Nesneler (objects) ve diziler (arrays) üzerinde derinlemesine (deeply) reaktiftir.

2. $derived

Mevcut bir durumdan türetilen ve o durum değiştikçe otomatik olarak yeniden hesaplanan değerler için kullanılır. Eski sistemdeki $: doubled = count * 2 yapısının yerini alır. Sadece bağımlı olduğu $state değiştiğinde çalışarak gereksiz hesaplamaların önüne geçer.

3. $effect

Side-effect (yan etki) işlemlerini yönetmek için kullanılır. Bileşen DOM'a yüklendiğinde veya izlediği reaktif değişkenler değiştiğinde çalışır. API çağrıları yapmak, DOM'a doğrudan müdahale etmek veya loglama işlemleri için idealdir.

$effect(() => {
  console.log(`Güncel sayaç değeri: ${count}`);

  // Cleanup (temizleme) fonksiyonu dönebiliriz
  return () => {
    console.log('Temizlik yapılıyor...');
  };
});

4. $props

Bileşene dışarıdan aktarılan parametreleri (props) almak için kullanılır. Eski sistemdeki kafa karıştırıcı export let title; sözdiziminin yerini alarak modern JavaScript nesne parçalama (destructuring) yöntemini kullanır.

// Svelte 5 Props Kullanımı
let { title, status = 'aktif' } = $props();

Neden Bu Değişime İhtiyaç Duyuldu? (Runes'un Avantajları)

Svelte 3/4 harika bir geliştirici deneyimi sunsa da, büyük ölçekli uygulamalarda bazı mimari zorluklar yaratıyordu:

1. Sınırlandırılmış Reaktivite (Component Boundaries): Eski sistemde reaktivite sadece .svelte dosyalarının içinde çalışıyordu. Reaktif mantığı dışarıdaki .js veya .ts dosyalarına taşımak istediğinizde karmaşık ve hantal olan writable/readable stores yapılarını kullanmak zorundaydınız. Runes ile artık reaktivite evrenseldir. $state yapısını bir .svelte.js veya .svelte.ts dosyasında tanımlayıp bileşenler arasında doğrudan paylaşabilirsiniz.
2. "Magic" (Sihir) Azaldı, Açıklık Arttı: Eski $: sözdizimi bazen kafa karıştırıcı olabiliyordu (Örn: Bu bir etiket mi, reaktif bildirim mi?). Runes ise açık (explicit) fonksiyonlar olduğu için kodun ne yaptığını ve hangi değişkenin reaktif olduğunu anlamak çok daha kolaydır.
3. TypeScript ile Kusursuz Uyum: Eski reaktivite modeli TypeScript ile zaman zaman sorunlar çıkarabiliyordu. Runes, tamamen standart JavaScript fonksiyonları gibi davrandığı için TypeScript tip tanımlamaları ve otomatik tamamlama (autocomplete) özellikleri mükemmel çalışır.
4. İnce Taneli (Fine-Grained) Reaktivite: Sinyal tabanlı yeni motor sayesinde Svelte 5, DOM'un sadece ve sadece değişen küçük hücresini günceller. Bu da özellikle yoğun veri içeren tablolarda ve dinamik listelerde muazzam bir performans artışı sağlar.

Sonuç: Svelte 5'e Geçmeli Miyiz?

Svelte 5 ve beraberinde getirdiği Runes mimarisi, Svelte ekosisteminde bir dönüm noktasıdır. İlk başta eski alışkanlıklardan vazgeçmek zor gibi görünse de, Runes'un sunduğu temiz kod yapısı, evrensel reaktivite ve üstün performans, modern web uygulaması geliştirme sürecini bambaşka bir seviyeye taşıyor.

Eğer yeni bir projeye başlayacaksanız, Svelte 5 kesinlikle doğru bir tercih olacaktır. Mevcut Svelte 4 projeleriniz için ise endişelenmenize gerek yok; Svelte ekibi geriye dönük uyumluluk konusunda oldukça hassas davranıyor ve eski sözdizimini aşamalı olarak desteklemeye devam ediyor.

Siz Svelte 5 ve Runes mimarisi hakkında ne düşünüyorsunuz? Sinyal tabanlı reaktivite sizce frontend dünyasının geleceği mi? Düşüncelerinizi yorumlarda bizimle paylaşın!