Svelte 5: Runes API ve React Kıyaslaması

Svelte 5'in yayınlanması ile birlikte, frontend framework dünyasında yeni bir dönem başladı. Runes API ile gelen değişiklikler, Svelte'i React'e daha da yakınlaştırdı ama aynı zamanda kendi benzersiz avantajlarını korudu. Bu yazıda, Svelte 5'in yeni özelliklerini ve React ile karşılaştırmasını inceleyeceğiz.

Runes API Nedir?

Runes, Svelte 5'in yeni reactive state management sistemidir. Önceki versiyonlardaki reactive declarations ($:) yerine daha güçlü ve esnek bir API sunuyor.

Temel Runes

// $state - Reactive state
let count = $state(0);

// $derived - Computed values
let doubled = $derived(count * 2);

// $effect - Side effects
$effect(() => {
  console.log('Count:', count);
});

React ile Karşılaştırma

State Management

**React:**

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

**Svelte 5:**

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>{count}</button>

Derived State

**React:**

const doubled = useMemo(() => count * 2, [count]);

**Svelte 5:**

let doubled = $derived(count * 2);

Performans Karşılaştırması

MetrikReact 19Svelte 5Bundle Size42KB5KBFirst Paint1.2s0.8sRuntime OverheadVarYokMemory UsageOrtaDüşük

Yeni Özellikler

1. Snippets

Svelte 5 ile birlikte snippets özelliği geldi:

{#snippet header()}
  <h1>Başlık</h1>
{/snippet}

{#snippet body()}
  <p>İçerik</p>
{/snippet}

<Layout>
  <Fragment slot="header" let:header>
    {@render header()}
  </Fragment>
  <Fragment slot="body" let:body>
    {@render body()}
  </Fragment>
</Layout>

2. Improved TypeScript Support

TypeScript desteği önemli ölçüde iyileştirildi:

let count = $state<number>(0);
let items = $state<string[]>([]);

// Tip güvenliği artık mükemmel

3. Better SSR Support

Server-side rendering desteği React'e rakip olacak seviyede:

// SvelteKit ile SSR
export const ssr = true;
export const prerender = true;

React'ten Svelte'e Migration

Adım 1: Kurulum

npm create svelte@latest my-app
cd my-app
npm install

Adım 2: Component Dönüşümü

**React Component:**

function Todo({ id, text, completed }) {
  const [done, setDone] = useState(completed);
  
  return (
    <div>
      <input type="checkbox" checked={done} onChange={(e) => setDone(e.target.checked)} />
      <span>{text}</span>
    </div>
  );
}

**Svelte 5 Component:**

<script>
  let { id, text, completed } = $props();
  let done = $state(completed);
</script>

<div>
  <input type="checkbox" bind:checked={done} />
  <span>{text}</span>
</div>

Hangi Durumda Hangisi?

Svelte 5 Tercih Edin:

**Küçük bundle size**: 5KB vs 42KB

**Runtime overhead yok**: Compile-time optimizasyonlar

**Daha az boilerplate**: Daha az kod yazarsınız

**Öğrenme eğrisi**: Daha kolay öğrenilir

React 19 Tercih Edin:

**Geniş ekosistem**: Çok daha fazla paket ve kaynak

**Ekip bilgisi**: Daha fazla React geliştirici var

**İş ilanları**: Daha fazla React pozisyonu

**Server Components**: Olgun SSR çözümleri

Sonuç

Svelte 5, Runes API ile birlikte React'e güçlü bir alternatif sunuyor. Küçük bundle size ve sıfır runtime overhead ile öne çıkıyor. Ancak React'in ekosistem avantajı hala büyük. Projenizin ihtiyaçlarına göre seçim yapmak en mantıklısı.

Gelecekte her iki framework'ün de kendi yolunda gelişmeye devam edeceğini öngörüyoruz.