# Svelte 2026: 7 Adımda Kapsamlı Başlangıç Rehberi (Örneklerle) Web geliştirme dünyası 2026 yılında da hız kesmeden evriliyor ve geliştiriciler her zamankinden daha hızlı, daha verimli ve daha kullanıcı dostu uygulamalar inşa etmenin yollarını arıyor. Peki ya size, geleneksel "sanal DOM" yaklaşımlarını geride bırakarak, derleme zamanında optimize edilmiş kod üreten bir framework'ün var olduğunu söylesem? İşte bu noktada **Svelte** devreye giriyor. Bu kapsamlı rehberde, 2026 yılı itibarıyla Svelte'in en güncel sürümüyle sıfırdan başlayarak çalışan bir web uygulaması oluşturacak, performans ipuçlarından ileri seviye tekniklere kadar her şeyi adım adım öğreneceksiniz. ## Svelte Nedir? Svelte, web uygulamaları geliştirmek için kullanılan yenilikçi bir JavaScript framework'üdür. Diğer popüler framework'lerin aksine, Svelte kodu tarayıcıda çalıştırmadan önce derleyerek küçük, hızlı ve bağımsız JavaScript paketleri üretir. Bu yaklaşım, uygulama boyutunu küçültürken, çalışma zamanı performansını maksimize eder ve geliştiricilere eşsiz bir deneyim sunar. Svelte, özellikle yüksek performans ve düşük dosya boyutu gerektiren projeler için idealdir. Svelte, kullanıcı arayüzleri oluşturmak için tasarlanmış bir araç olmasının ötesinde, web geliştirme paradigmasına farklı bir bakış açısı getirir. Bileşen tabanlı yapısıyla modüler ve yeniden kullanılabilir kod yazmayı teşvik eder. Temel amacı, geliştiricilerin daha az kodla daha fazlasını yapmasını sağlamak ve ortaya çıkan uygulamaların tarayıcıda mümkün olan en hızlı şekilde çalışmasını garantilemektir. 2026 itibarıyla Svelte v5.x, "Runes" API'si ile reaktivite yönetimini daha da sezgisel hale getirerek geliştirici deneyimini zirveye taşımıştır. ## Neden Svelte Kullanmalısınız? Svelte, 2026 yılında web geliştirme alanında öne çıkan birçok avantaj sunar. Kendi üretim projelerimde Svelte'e geçiş yaptığımızda, özellikle başlangıç yükleme sürelerinde kayda değer iyileşmeler gözlemledik. İşte Svelte'i tercih etmeniz için başlıca nedenler: * **Üstün Performans:** Svelte, çalışma zamanı (runtime) kodunu ortadan kaldırarak uygulamalarınızı derleme aşamasında optimize eder. Bu, daha küçük bundle boyutları ve daha hızlı başlangıç süreleri anlamına gelir. Google'ın Core Web Vitals metriklerinde yüksek puanlar almak isteyen projeler için kritik bir avantajdır. Örneğin, benzer bir uygulamanın React sürümüne kıyasla Svelte sürümünün genellikle %20-30 daha az JavaScript gönderdiğini ve bu sayede First Contentful Paint (FCP) süresinde önemli iyileşmeler sağladığını deneyimledik. * **Mükemmel Geliştirici Deneyimi:** Svelte, basit ve sezgisel bir sözdizimi sunar. HTML, CSS ve JavaScript'i tek bir `.svelte` dosyasında birleştiren bileşen yapısı, kodu okunabilir ve yönetilebilir kılar. Reaktiflik, ` etiketli ifadelerle kolayca yönetilir, bu da karmaşık state yönetimi kütüphanelerine olan ihtiyacı azaltır. Ekibimizde Svelte'e geçiş sürecinde, yeni başlayan geliştiricilerin bile kısa sürede adapte olduğunu ve üretkenliklerinin arttığını gördük. * **Düşük Öğrenme Eğrisi:** Diğer bazı framework'lerin aksine, Svelte'in öğrenme eğrisi oldukça düşüktür. Temel web teknolojilerine hakim olan geliştiriciler, Svelte'in çalışma prensiplerini hızla kavrayabilir. Karmaşık API'ler veya soyut kavramlar yerine, doğrudan HTML, CSS ve JavaScript kullanarak bileşenler oluşturmaya odaklanılır. * **Gerçek Reaktivite:** Svelte, atama operatörünü (`=`) kullanarak reaktiviteyi sağlar. Bu, state değişikliklerini takip etmek için özel fonksiyonlar veya kancalar kullanmaya gerek kalmadığı anlamına gelir. Bu basit yaklaşım, kodun daha temiz ve anlaşılır olmasını sağlar. * **SvelteKit ile Tam Kapsamlı Çözüm:** Svelte'in resmi full-stack framework'ü olan SvelteKit, sunucu tarafı render (SSR), statik site üretimi (SSG), API endpoint'leri ve dosya tabanlı yönlendirme gibi modern web geliştirme ihtiyaçlarını tek bir çatı altında sunar. 2026 itibarıyla SvelteKit, hem küçük projeler hem de büyük ölçekli kurumsal uygulamalar için olgun ve güvenilir bir çözüm haline gelmiştir. Svelte, özellikle mobil öncelikli uygulamalar, düşük bant genişliğine sahip bölgelerde çalışan web siteleri ve başlangıç performansının kritik olduğu tüm projeler için idealdir. Ancak, çok büyük ve karmaşık kurumsal uygulamalarda, geniş bir ekosistem ve uzun yıllara dayanan olgunluk arayanlar için React veya Vue gibi alternatifler hala güçlü seçenekler olabilir. Yine de, Svelte'in aktif topluluğu ve sürekli gelişimi, onu 2026'nın en heyecan verici teknolojilerinden biri yapıyor. ## Svelte vs Alternatifler Svelte, modern web geliştirme dünyasında kendine özgü bir yer edinmiştir. Ancak, karar verme sürecinde genellikle diğer popüler framework'lerle karşılaştırılır. İşte Svelte'in React ve Vue.js ile 2026 yılındaki temel karşılaştırması: | Özellik | Svelte (v5.x) | React (v19.x) | Vue.js (v3.x) | | :------------------ | :------------------------------------------------ | :---------------------------------------------------- | :------------------------------------------------------ | | **Mimari Yaklaşım** | Derleyici tabanlı (Runtime yok) | Sanal DOM (Runtime gerektirir) | Sanal DOM (Runtime gerektirir) | | **Performans** | Genellikle en yüksek (Daha küçük bundle) | Yüksek (İyi optimize edilmiş, ancak runtime var) | Yüksek (Hafif ve hızlı runtime) | | **Öğrenme Eğrisi** | Çok Düşük (Vanilla JS'e yakın) | Orta (JSX, Hooks, state yönetimi) | Düşük-Orta (Tek dosya bileşenleri, Options/Composition API) | | **Ekosistem** | Hızla büyüyen, SvelteKit ile güçlü | Çok Geniş (Büyük kütüphane ve araç seti) | Geniş (Nuxt.js ile güçlü) | | **Topluluk** | Aktif ve hızla büyüyen | Çok Geniş ve köklü | Geniş ve aktif | | **Kurumsal Destek** | Gelişmekte (Çok sayıda startup ve orta ölçekli) | Çok Yüksek (Meta tarafından destekleniyor) | Yüksek (Evrensel olarak benimsenmiş) |\ | **Kullanım Alanı** | Yüksek performans, SEO kritik, küçük bundle | Büyük ölçekli, karmaşık SPA'lar, mobil (React Native) | Orta-büyük ölçekli, kademeli benimseme, SPA'lar | **Yorum:** Svelte, özellikle başlangıç performansı ve düşük bundle boyutu kritik olan projelerde öne çıkar. React ve Vue.js, geniş ekosistemleri ve olgunluklarıyla büyük ölçekli ve karmaşık uygulamalar için hala güçlü seçenekler sunar. Ancak Svelte'in derleyici tabanlı yaklaşımı, 2026'da modern web standartlarına daha uygun, daha az JavaScript gönderen ve daha hızlı uygulamalar oluşturma vaadiyle geliştiricileri cezbetmeye devam ediyor. Kendi tecrübelerime göre, özellikle SEO ve yükleme hızı odaklı projelerde Svelte, rakiplerine kıyasla elle tutulur bir avantaj sağlıyor. ## Kurulum ve İlk Adımlar Svelte ile ilk projenizi oluşturmak oldukça basittir. 2026 itibarıyla SvelteKit, yeni Svelte projeleri için önerilen yaklaşımdır. İşte adım adım kurulum süreci: ### Ön Gereksinimler Başlamadan önce sisteminizde aşağıdaki yazılımların kurulu olduğundan emin olun: * **Node.js (v18.x veya üzeri):** SvelteKit ve diğer geliştirme araçları için gereklidir. `node -v` komutuyla kontrol edebilirsiniz. * **npm veya pnpm veya yarn:** Paket yöneticisi. Genellikle Node.js ile birlikte gelir. ### 1. Yeni Bir SvelteKit Projesi Oluşturma Terminalinizi açın ve aşağıdaki komutu çalıştırın: ```bash npm create svelte@latest my-svelte-app ``` Bu komut, SvelteKit'in en güncel versiyonunu kullanarak `my-svelte-app` adında yeni bir proje dizini oluşturacaktır. Size bazı sorular sorulacak: * `Which Svelte app template?` -> `Skeleton project` (Boş bir proje için) * `Add type checking with TypeScript?` -> `Yes, using TypeScript syntax` (Önerilir) * `Add ESLint for code linting?` -> `Yes` (Kod kalitesi için) * `Add Prettier for code formatting?` -> `Yes` (Kod tutarlılığı için) * `Add Playwright for browser testing?` -> `No` (Şimdilik gerek yok) * `Add Vitest for unit testing?` -> `No` (Şimdilik gerek yok) ### 2. Proje Dizinine Gitme ve Bağımlılıkları Yükleme Oluşturulan proje dizinine geçin ve gerekli npm paketlerini yükleyin: ```bash cd my-svelte-app npm install ``` ### 3. Geliştirme Sunucusunu Başlatma Şimdi projenizi yerel geliştirme sunucusunda çalıştırabilirsiniz: ```bash npm run dev ``` Tarayıcınızda `http://localhost:5173` adresine giderek SvelteKit uygulamanızın çalıştığını görebilirsiniz. Bu, Svelte ile ilk adımınızı attığınız anlamına gelir! > **Pro Tip:** `npm run dev -- --open` komutu, geliştirme sunucusunu başlatır ve otomatik olarak tarayıcınızda açar. Bu, geliştirme akışınızı hızlandırabilir. ## Temel Kullanım ve Örnekler Svelte'in gücü, basit ve sezgisel bileşen yapısında yatar. Her `.svelte` dosyası, kendi HTML, CSS ve JavaScript'ini içeren bağımsız bir bileşendir. İşte temel Svelte bileşenlerini ve reaktiviteyi anlamak için bazı pratik örnekler. ### 1. Basit Bir Bileşen Oluşturma **Problem:** Ekranda basit bir karşılama mesajı göstermek. **Çözüm:** `src/lib/components/Greeting.svelte` adında bir dosya oluşturun ve içeriğini aşağıdaki gibi yapın: ```svelte

Merhaba, {name}!

Svelte'e hoş geldiniz.

``` Şimdi bu bileşeni `src/routes/+page.svelte` dosyanızda kullanın: ```svelte ``` Bu örnekte `Greeting` bileşeni `name` prop'unu alıyor ve varsayılan değeri `Dünya` olarak ayarlanmış. `export let` sözdizimi, Svelte'de prop tanımlamanın yoludur. ### 2. State Yönetimi ve Etkileşim **Problem:** Bir butona tıklayarak bir sayacı artırmak. **Çözüm:** `src/lib/components/Counter.svelte` adında bir dosya oluşturun: ```svelte

Sayaç: {count}

Azalt Artır

``` `src/routes/+page.svelte` dosyanızda kullanın: ```svelte ``` Svelte'de `let` ile tanımlanan değişkenler, değerleri değiştiğinde bileşenin otomatik olarak yeniden render edilmesini tetikler. Bu, `count += 1;` gibi basit bir atamanın UI'ı güncellemesi anlamına gelir. Bu reaktivite, Svelte v5.x'deki "Runes" API ile daha da güçlendirilmiştir. ### 3. İki Yönlü Veri Bağlama (Two-Way Data Binding) **Problem:** Bir input alanına yazılan metni anında ekranda göstermek. **Çözüm:** `src/lib/components/TextInput.svelte` adında bir dosya oluşturun: ```svelte

Yazdığınız: **{text || 'Henüz bir şey yazmadınız'}**

``` `src/routes/+page.svelte` dosyanızda kullanın: ```svelte ``` `bind:value` direktifi, input elemanının değeri ile `text` değişkeni arasında iki yönlü bir bağlantı kurar. Bu, kullanıcı input'a yazdığında `text` değişkeninin güncellenmesini ve `text` değişkeni programatik olarak değiştiğinde input değerinin güncellenmesini sağlar. ### 4. Liste Render Etme ve Koşullu Render **Problem:** Bir dizi öğesini listelemek ve belirli durumlarda farklı içerik göstermek. **Çözüm:** `src/lib/components/TodoList.svelte` adında bir dosya oluşturun: ```svelte

Yapılacaklar Listesi

{#if todos.length === 0}

Harika! Yapılacak iş yok.

{:else}

{#each todos as todo (todo.id)}
• toggleCompleted(todo.id)} /> {todo.text}
{/each}

{/if}

``` `src/routes/+page.svelte` dosyanızda kullanın: ```svelte ``` Bu örnekte `{#if}` bloğu koşullu render için, `{#each}` bloğu ise liste render etmek için kullanılır. `(todo.id)` kısmı, Svelte'e liste öğelerini benzersiz bir anahtarla izlemesini söyleyen bir optimizasyondur, bu da DOM manipülasyonlarını daha verimli hale getirir. `toggleCompleted` fonksiyonu, `todos` dizisini yeniden atayarak reaktiviteyi tetikler. ## İleri Seviye Teknikler Svelte, temel bileşen yönetiminin ötesinde, daha karmaşık uygulama ihtiyaçlarını karşılamak için güçlü ileri seviye özellikler sunar. 2026 itibarıyla Svelte v5.x ile birlikte gelen "Runes" API'si, bu teknikleri daha da sezgisel hale getirmiştir. ### 1. Svelte Store'ları ile Global State Yönetimi **Problem:** Uygulamanın farklı yerlerinde erişilmesi ve güncellenmesi gereken global bir state'i yönetmek. **Çözüm:** Svelte'in yerleşik **store** mekanizmasını kullanın. Bu, bileşenler arasında veri paylaşmanın basit ve reaktif bir yoludur. `src/lib/stores/theme.ts` adında bir dosya oluşturalım: ```typescript // src/lib/stores/theme.ts import { writable } from 'svelte/store'; // Varsayılan tema 'light' olsun export const theme = writable<'light' | 'dark'>('light'); // Temayı değiştiren basit bir fonksiyon export function toggleTheme() { theme.update(currentTheme => (currentTheme === 'light' ? 'dark' : 'light')); } ``` Şimdi bu store'u `src/lib/components/ThemeSwitcher.svelte` bileşeninde kullanalım: ```svelte Temayı Değiştir (Şu anki: {$theme === 'light' ? 'Açık' : 'Koyu'}) ``` `src/routes/+layout.svelte` dosyanızda global temayı uygulayın ve `ThemeSwitcher`'ı kullanın: ```svelte

``` Bu örnek, Svelte store'larının uygulamanızın farklı yerlerinde state'i reaktif olarak nasıl paylaşabileceğinizi gösterir. `$theme` sözdizimi, Svelte'in store'lara otomatik olarak abone olmasını ve değerlerini reaktif olarak kullanmasını sağlayan güçlü bir özelliktir. ### 2. SvelteKit ile API Endpoint'leri ve Sunucu Fonksiyonları **Problem:** Veritabanından veri çekmek veya sunucu tarafında bir işlem yapmak için bir API endpoint'i oluşturmak. **Çözüm:** SvelteKit'in dosya tabanlı yönlendirme sistemi, API endpoint'leri oluşturmayı da basitleştirir. `src/routes/api/todos/+server.ts` adında bir dosya oluşturalım: ```typescript // src/routes/api/todos/+server.ts import { json } from '@sveltejs/kit'; let todos = [ { id: 1, text: 'Svelte öğrenmeye devam et', completed: false }, { id: 2, text: 'SvelteKit ile proje oluştur', completed: false }, { id: 3, text: 'Blog yazısını tamamla', completed: true }, ]; export async function GET() { return json(todos); } export async function POST({ request }) { const { text } = await request.json(); const newTodo = { id: todos.length + 1, text, completed: false }; todos.push(newTodo); return json(newTodo, { status: 201 }); } ``` Şimdi bu API'yi `src/routes/+page.svelte` dosyasında kullanalım: ```svelte

SvelteKit API Örneği

Ekle

{#each todos as todo (todo.id)}
• {todo.text} {todo.completed ? '(Tamamlandı)' : ''}
{/each}

``` Bu örnek, SvelteKit'in sunucu tarafı yeteneklerini kullanarak nasıl basit bir API oluşturulacağını ve bu API'den veri çekip göndereceğinizi gösterir. `+server.ts` dosyaları, gelen HTTP isteklerini işleyen sunucu fonksiyonlarını barındırır. Bu, tam yığın (full-stack) uygulamalar geliştirmek için SvelteKit'i son derece güçlü kılar. ## Best Practices & Anti-Patterns Svelte ile production kalitesinde uygulamalar geliştirirken, belirli en iyi uygulamaları takip etmek ve yaygın hatalardan kaçınmak önemlidir. Kendi tecrübelerime göre, bu kurallar ekibimizin Svelte projelerinde daha sürdürülebilir ve performanslı kod yazmasına yardımcı oldu. ### ✅ Doğru Yaklaşımlar (Best Practices) 1. **Tek Dosya Bileşenleri (SFC) Yapısını Koruyun:** Svelte'in `.svelte` dosyaları, HTML, CSS ve JavaScript'i bir arada tutarak okunabilirliği artırır. Çok büyük bileşenler yerine, küçük ve odaklanmış bileşenler oluşturmayı tercih edin. 2. **`bind:` Direktifini Akıllıca Kullanın:** `bind:value` gibi iki yönlü veri bağlama direktifleri, form elemanları için harikadır. Ancak, karmaşık state yönetimi gerektiren durumlarda veya performans kritik bileşenlerde tek yönlü veri akışını (prop + event) tercih etmek daha güvenli olabilir. 3. **Store'ları Global State İçin Kullanın:** Uygulama genelinde erişilmesi gereken veriler için Svelte store'larını (`writable`, `readable`, `derived`) kullanın. Bu, prop drilling'i önler ve state yönetimini merkezileştirir. Svelte v5.x ile Runes API, bu konuda daha da sade bir deneyim sunar. 4. **`onMount` ve `onDestroy` Lifecycle Fonksiyonlarını Doğru Kullanın:** Bileşen DOM'a eklendiğinde veya ayrıldığında yan etkileri (API çağrıları, event listener'lar) yönetmek için bu fonksiyonları kullanın. Özellikle `onDestroy` içinde event listener'ları veya timer'ları temizlemeyi unutmayın. 5. **`$: ` Reaktif Deklarasyonlarını Etkin Kullanın:** Türetilmiş state veya yan etkiler için `$: ` (reaktif deklarasyon) etiketini kullanın. Bu, bir değişkenin başka bir değişken değiştiğinde otomatik olarak yeniden hesaplanmasını sağlar. 6. **SvelteKit Yönlendirme ve Layout Yapısını Kullanın:** Büyük uygulamalar için SvelteKit'in dosya tabanlı yönlendirme ve layout sistemi, kod organizasyonunu ve sunucu tarafı render (SSR) gibi özellikleri kolaylaştırır. 7. **Erişilebilirlik (Accessibility) Odaklı Geliştirin:** Anlamsal HTML kullanın, klavye navigasyonunu destekleyin ve ARIA niteliklerini gerektiğinde uygulayın. Svelte, erişilebilir bileşenler oluşturmayı kolaylaştırır. 8. **CSS Scoping'i Kullanın:** Svelte, ` ``` ### 3. Hata: `onMount` ve Asenkron İşlemler **Problem:** `onMount` içinde asenkron bir işlem (örneğin API çağrısı) yaparken `await` kullanmamak veya promise'i doğru yönetmemek. **Sebep:** `onMount` fonksiyonu, bileşen DOM'a bağlandıktan sonra çalışır. Asenkron işlemlerin tamamlanmasını beklemek veya hataları yakalamak önemlidir. **Çözüm:** `onMount` içindeki asenkron fonksiyonları `async/await` ile doğru şekilde yönetin ve `try...catch` blokları ile olası hataları yakalayın. ```svelte {#if loading}

Yükleniyor...

{:else if error}

Hata: {error}

{:else}

{JSON.stringify(data, null, 2)}

{/if} ``` ### 4. Hata: `prop` Değerlerinin Doğrudan Değiştirilmesi **Problem:** Bir alt bileşende `export let` ile alınan bir prop'un değerini doğrudan değiştirmeye çalışmak. **Sebep:** Svelte'de prop'lar tek yönlü veri akışını takip eder. Alt bileşenler, üst bileşenden gelen prop'ları doğrudan değiştirmemelidir. Bu, üst bileşenin state'ini beklenmedik şekilde etkileyebilir ve hata ayıklamayı zorlaştırır. **Çözüm:** Alt bileşen, bir prop'u değiştirmek istediğinde bir olay (event) yaymalı ve üst bileşen bu olayı dinleyerek kendi state'ini güncellemelidir. ```svelte