Frontend dünyasında React, Vue ve Angular gibi güçlü seçenekler var. Son yıllarda bu listeye güçlü bir alternatif olarak Svelte de eklendi. Peki Svelte'i farklı yapan ne ve neden çoğu senaryoda daha hızlı hissediliyor?

Svelte Nedir?

Svelte, geleneksel anlamda sadece bir runtime framework değil; derleme (compile-time) odaklı bir yaklaşıma sahip. Uygulama çalışmadan önce bileşenleri optimize edip tarayıcıya daha sade JavaScript gönderir.

Svelte'i Hızlı Yapan Unsurlar

• Compile-time optimizasyon: İşin büyük kısmı build aşamasında çözülür.
• Virtual DOM yok: Ara katman maliyetini azaltır.
• Daha küçük bundle: Runtime yükü azalır.
• Doğal reaktivite: Basit state güncellemeleri için ek soyutlamalara daha az ihtiyaç duyulur.

React ve Svelte Karşılaştırması

1. State Yönetimi

React örneği:

1import React, { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <p>Count: {count}</p>
9      <button onClick={() => setCount(count + 1)}>Increase</button>
10    </div>
11  );
12}

Svelte örneği:

1<script>
2  let count = 0;
3</script>
4
5<div>
6  <p>Count: {count}</p>
7  <button on:click={() => (count += 1)}>Increase</button>
8</div>

2. Props Kullanımı

React:

1function Greeting({ name }) {
2  return <p>Hello, {name}!</p>;
3}

Svelte:

1<script>
2  export let name;
3</script>
4
5<p>Hello, {name}!</p>

3. Form Yönetimi

React:

1import React, { useState } from "react";
2
3function Form() {
4  const [inputValue, setInputValue] = useState("");
5
6  return (
7    <div>
8      <input
9        type="text"
10        value={inputValue}
11        onChange={(e) => setInputValue(e.target.value)}
12      />
13      <p>Input: {inputValue}</p>
14    </div>
15  );
16}

Svelte:

1<script>
2  let inputValue = "";
3</script>
4
5<div>
6  <input type="text" bind:value={inputValue} />
7  <p>Input: {inputValue}</p>
8</div>

Lifecycle Metotları

Svelte tarafında en sık kullanılan lifecycle fonksiyonları:

• onMount
• beforeUpdate
• afterUpdate
• onDestroy

onMount örneği:

1<script>
2  import { onMount } from "svelte";
3
4  let data;
5
6  onMount(async () => {
7    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
8    data = await res.json();
9  });
10</script>
11
12{#if data}
13  <p>{data.title}</p>
14{/if}

Reaktivite

Svelte'in en güçlü taraflarından biri, reaktif ifadeleri dil seviyesinde desteklemesi:

1<script>
2  let count = 0;
3  $: doubled = count * 2;
4</script>
5
6<p>Count: {count}</p>
7<p>Doubled: {doubled}</p>
8<button on:click={() => count++}>Increase</button>

Store Kullanımı

Bileşenler arası state paylaşımı için store yapısı çok kullanışlıdır.

store.js:

1import { writable } from "svelte/store";
2
3export const count = writable(0);

App.svelte:

1<script>
2  import { count } from "./store";
3</script>
4
5<p>Count: {$count}</p>
6<button on:click={() => count.update((n) => n + 1)}>Increase</button>

Svelte ile İlk Adımlar: React ve Vue’ya Karşı Hızlı mı?

SvelteKit Neden Önemli?

SvelteKit, Svelte üzerine kurulu modern bir framework'tür. Özellikle şu konularda güçlüdür:

• SSR (Server-Side Rendering)
• Statik site üretimi
• Dosya tabanlı routing
• API endpoint tanımları

Bu yapı, Svelte'i küçük projelerden ürün seviyesine taşımayı kolaylaştırır.

Sonuç

Svelte, performans ve sadelik odaklı bir geliştirme deneyimi sunuyor. Küçük ve orta ölçekli projelerde çok hızlı sonuç verir; büyük projelerde ise SvelteKit ile birlikte oldukça güçlü bir seçenek haline gelir.

Kaynaklar

• Svelte Documentation
• Svelte Tutorial
• SvelteKit Documentation
• LogRocket - Svelte vs React

Svelte ile İlk Adımlar: React ve Vue’ya Karşı Hızlı mı?