## Svelte Nedir ve Neden Tercih Edilmelidir? **Svelte**, modern web uygulamaları geliştirmek için kullanılan radikal bir yaklaşıma sahip açık kaynaklı bir JavaScript kütüphanesidir. Geleneksel frameworklerin (React veya Vue gibi) aksine Svelte, işini tarayıcıda değil, **derleme (build)** aşamasında yapar. Bu durum, uygulamanızın tarayıcıya ek bir framework kütüphanesi yüklemeden, saf ve optimize edilmiş JavaScript koduyla gönderilmesini sağlar. Svelte'in sunduğu en büyük avantaj, **Virtual DOM** kullanmamasıdır. Değişiklikleri doğrudan DOM üzerinde güncelleyerek bellek kullanımını azaltır ve çalışma zamanı (runtime) performansını maksimize eder. Bu rehberde, sıfırdan başlayarak profesyonel bir Svelte projesinin nasıl inşa edileceğini teknik detaylarıyla ele alacağız. ## Svelte Mimarisinin Temel Çalışma Prensipleri Svelte bir kütüphaneden ziyade bir **derleyici (compiler)** olarak tanımlanır. Yazdığınız bildirimsel (declarative) kod, Svelte tarafından analiz edilir ve verimli bir şekilde DOM'u manipüle eden düşük seviyeli JavaScript koduna dönüştürülür. | Özellik | Geleneksel Frameworkler | Svelte | |---------|-------------------------|--------| | Çalışma Zamanı | Framework tarayıcıda çalışır | Framework derleme anında kaybolur | | DOM Güncelleme | Virtual DOM fark algoritması | Doğrudan DOM manipülasyonu | | Paket Boyutu | Büyük (Framework dahil) | Küçük (Sadece uygulama kodu) | | Öğrenme Eğrisi | Orta/Yüksek | Düşük (HTML/CSS odaklı) | ## Geliştirme Ortamının Hazırlanması ve İlk Proje Svelte projelerini başlatmak için modern bir paketleyici olan **Vite** kullanımı standart haline gelmiştir. Node.js yüklü bir sistemde aşağıdaki komutları kullanarak ilk projenizi oluşturabilirsiniz. ```bash # Yeni bir Svelte projesi oluşturun npm create vite@latest svelte-app -- --template svelte # Proje dizinine gidin cd svelte-app # Bağımlılıkları yükleyin npm install # Geliştirme sunucusunu başlatın npm run dev ``` Bu komutlar sonucunda `localhost:5173` adresinde çalışan temel bir Svelte uygulamasına sahip olacaksınız. ## Svelte Bileşen Yapısı ve Sözdizimi (Syntax) Bir Svelte bileşeni `.svelte` uzantısına sahiptir ve üç temel bloktan oluşur: `

Merhaba {name}!

``` ## Reaktivite Yönetimi: Değişkenler ve Hesaplanan Değerler Svelte'te reaktivite tetiklemek için özel bir fonksiyon çağırmanıza gerek yoktur. Bir değişkene değer atadığınızda (assignment), Svelte ilgili bileşeni otomatik olarak günceller. **Hesaplanan değerler (Reactive Declarations)** için `$: ` sözdizimi kullanılır. Bu yapı, bağımlı olduğu değişken değiştiğinde kod bloğunu tekrar çalıştırır. ```html Sayaç: {count} (İki katı: {doubled}) ``` ## Kontrol Akış Yapıları: Koşullar ve Döngüler Svelte, HTML içerisinde mantıksal işlemler yapabilmek için özel bloklar sunar. Bu bloklar temiz bir okunabilirlik sağlar ve JavaScript mantığını doğrudan şablona entegre eder. ### Koşullu İfadeler ```html {#if count > 10}

Sayı ondan büyüktür.

{:else if count < 0}

Sayı negatiftir.

{:else}

Sayı makul bir aralıktadır.

{/if} ``` ### Döngüler ve Listeleme ```html

{#each users as user (user.id)}
• {user.name}
{/each}

``` > **Not:** `(user.id)` kullanımı, Svelte'in listeyi optimize etmesine ve elemanlar değiştiğinde doğru DOM öğelerini güncellemesine yardımcı olan bir anahtardır (key). ## Form Veri Bağlama (Data Binding) ve Olay Yönetimi Veri akışını yönetmek için `bind:` direktifi kullanılır. Bu, iki yönlü (two-way) veri bağlamayı oldukça basit hale getirir. Olaylar ise `on:` ön eki ile dinlenir. ```html

Şartları kabul ediyorum Gönder

``` ## Bileşenler Arası İletişim: Props ve Event Dispatcher Üst bileşenden alt bileşene veri aktarmak için `export` anahtar kelimesi kullanılır. Alt bileşenden üste bilgi göndermek için ise `createEventDispatcher` tercih edilir. **Alt Bileşen (Child.svelte):** ```html ``` ## Svelte Store ile Global Durum (State) Yönetimi Karmaşık uygulamalarda veriyi bileşenler arasında taşımak zorlaşabilir. Svelte, **stores** mekanizması ile global state yönetimini yerleşik olarak sunar. `writable` store, hem okunabilir hem de yazılabilir bir depolama birimidir. ```javascript // store.js import { writable } from 'svelte/store'; export const theme = writable('light'); ``` **Bileşen İçinde Kullanım:** ```html ``` ## Yaşam Döngüsü (Lifecycle) Metotları ve Kullanımı Bileşenin oluşturulma, güncellenme veya yok edilme anlarında işlem yapmak için yaşam döngüsü fonksiyonları kullanılır. En yaygın olanı API istekleri için kullanılan `onMount` fonksiyonudur. ```html ``` ## Performans Optimizasyonu ve En İyi Uygulamalar (Best Practices) 1. **Gereksiz Store Aboneliklerinden Kaçının:** `$store` sözdizimi otomatik abonelik ve abonelikten çıkma (unsubscribing) sağlar, manuel abonelik yerine bunu tercih edin. 2. **Büyük Listelerde Key Kullanın:** `{#each}` döngülerinde her zaman benzersiz bir ID anahtarı kullanın. 3. **Immutable Veri Yapıları:** Svelte, dizi veya nesnelerin içindeki değişiklikleri algılamak için atama işlemine (`=`) ihtiyaç duyar. `push` yerine `data = [...data, newItem]` yöntemini kullanın. 4. **SvelteKit Kullanımı:** Kurumsal düzeydeki SEO uyumlu uygulamalar için yönlendirme (routing) ve SSR desteği sunan SvelteKit mimarisini tercih edin. ## Sık Karşılaşılan Hatalar ve Çözüm Yolları * **Hata:** Değişken güncelleniyor ama arayüz değişmiyor. * **Çözüm:** Svelte reaktivitesi atama tabanlıdır. `array.push()` yerine `array = array` veya spread operatörü kullanarak atama yapın. * **Hata:** Store değerine erişememe. * **Çözüm:** Store değişkeninin başına ` koyduğunuzdan emin olun (Örn: `$userCount`). * **Hata:** CSS çakışmaları. * **Çözüm:** Svelte CSS'i otomatik scope eder ancak global stil gerekiyorsa `:global()` seçicisini kullanın. ## Sık Sorulan Sorular (SSS) **1. Svelte, React'ten daha mı hızlıdır?** Evet, çoğu benchmark testinde Svelte, Virtual DOM overhead'i içermediği için daha yüksek çalışma zamanı performansı ve daha küçük paket boyutları sunar. **2. Svelte ile mobil uygulama geliştirilebilir mi?** Evet, Svelte Native veya Capacitor gibi araçlar kullanılarak Svelte tabanlı mobil uygulamalar geliştirilebilir. **3. Svelte öğrenmek için ne kadar JavaScript bilmek gerekir?** Temel ES6+ bilgisi (arrow functions, destructuring, modules) Svelte öğrenmek için yeterlidir. **4. Svelte büyük ölçekli projeler için uygun mu?** Kesinlikle. SvelteKit mimarisi, büyük ölçekli projelerin ihtiyaç duyduğu routing, server-side rendering ve API yönetimi gibi özellikleri profesyonelce sunar. **5. TypeScript desteği var mı?** Evet, Svelte ve SvelteKit tam TypeScript desteğine sahiptir ve geliştirme sürecinde tip güvenliği sağlar. ## Özet ve Sonuç Svelte, modern web geliştirme dünyasında performans ve basitliği bir araya getiren yenilikçi bir yaklaşımdır. Derleme aşamasında yaptığı optimizasyonlar sayesinde, son kullanıcıya en hızlı deneyimi sunmayı hedefler. Bu rehberde öğrendiğiniz temel kavramlar, reaktivite yönetimi ve bileşen mimarisi ile artık kendi Svelte projelerinizi geliştirmeye hazırsınız. Unutmayın, en iyi öğrenme yöntemi pratik yapmaktır; bu yüzden bugün küçük bir proje ile Svelte dünyasına adım atın.