Svelte, bileşenlerin önemli bir kısmını derleme aşamasında saf JavaScript'e dönüştüren bir web framework'üdür. React ve Vue'dan farklı olarak, arayüz güncellemesinin çoğunu React/Vue'daki gibi tarayıcıda çalışan bir sanal DOM (virtual DOM) katmanına bırakmaz — bunun yerine hangi güncellemenin gerektiğini büyük ölçüde derleme zamanında belirler. DOM (Document Object Model), tarayıcının bir HTML sayfasını bellekte ağaç yapısında tuttuğu temsildir; sanal DOM ise framework'lerin bu ağacın bir kopyasını JavaScript içinde tutup değişiklikleri önce ona göre hesapladığı ara katmandır.

React veya Vue ile bir proje kurarken elinin altında sürekli bir sanal DOM, bir bundle boyutu endişesi ve satır satır boilerplate oluyorsa, muhtemelen Svelte'i duymuşsundur. Peki Svelte gerçekten farklı bir şey mi yapıyor, yoksa bir tane daha "yeni framework yorgunluğu" mu?

Kısa cevap: Svelte, diğer framework'lerin aksine tarayıcıda çalışacak bir kütüphane değil, derleme zamanında (build time) çalışan bir derleyicidir. Bileşenlerini saf, minimal JavaScript'e çevirir — React/Vue'daki gibi tarayıcıda çalışan bir sanal DOM katmanına dayanmaz, bu yüzden genelde daha küçük bundle ve daha az çalışma zamanı işi ortaya çıkar. Bedeli ise React'e kıyasla daha küçük bir ekosistem ve iş ilanlarında daha az talep.

Svelte Nedir?

Svelte, Rich Harris tarafından 2016'da geliştirilmeye başlanan, açık kaynaklı bir JavaScript framework'üdür. React ve Vue gibi framework'ler tarayıcıya gönderdiğin kodun içinde kendi runtime kütüphanelerini de taşır ve arayüzü sanal DOM denen bir ara katmanla günceller. Svelte bu modeli büyük ölçüde terk eder: bileşenlerini derleme aşamasında analiz eder ve doğrudan DOM'u güncelleyen, minimal JavaScript üretir — ortaya çıkan uygulama yine de gerekli reaktivite yardımcılarını (Svelte'in kendi küçük çalışma zamanı parçalarını) içerir, ama React/Vue'nun taşıdığı büyük runtime kütüphanesi hiç gönderilmez.

Yani Svelte'i "kullanıcının tarayıcısında çalışan bir kütüphane" değil, "senin build sürecinde çalışan bir derleyici" olarak düşünmek daha doğru.

Svelte Nasıl Çalışır?

Svelte'in temel farkı, arayüzü güncelleme işini tarayıcıya değil derleme aşamasına bırakması. Bu farkı anlamak için önce diğer framework'lerin yaklaşımına, sonra Svelte'in ne yaptığına bakalım.

React ve Vue'daki Virtual DOM Yaklaşımı

React, render sonucuna göre gerekli DOM değişikliklerini "render ve commit" adımlarıyla runtime'da hesaplar. Vue de sanal DOM kullanır, ama template derleyicisinden gelen ipuçlarıyla hangi kısımların değişebileceğini önceden işaretleyip tam ağaç karşılaştırmasını (diffing) büyük ölçüde azaltır — yani Vue'nunki "derleyici destekli" bir sanal DOM. İkisinde de bu iş, React'in "vanilla" sanal DOM modelinde olduğu kadar olmasa da, sonuçta kullanıcının tarayıcısında (runtime'da) çalışır.

Svelte'in Derleyici Yaklaşımı

Svelte, aynı işi derleme zamanında yapar. Bir bileşeni build ederken hangi state'in hangi DOM düğümünü etkilediğini önceden hesaplar; runtime'da diffing yapmadan, ilgili düğümü doğrudan günceller. Farkı görselleştirirsek:

Çalışma Zamanı Yaklaşımı

React / Vue (Virtual DOM)

  • Bileşen kodu + framework runtime'ı tarayıcıya gönderilir
  • State değişince sanal DOM ağacı yeniden hesaplanır
  • Eski/yeni ağaç karşılaştırılır (diffing)
  • Farklar gerçek DOM'a uygulanır
VS

Svelte (Derleyici)

  • Bileşen, build sırasında analiz edilir
  • Hangi state'in hangi DOM düğümünü etkilediği önceden bilinir
  • Runtime'da diffing yapılmaz
  • State değişince ilgili DOM düğümü doğrudan güncellenir

Svelte Kodunu Tarayıcıya Nasıl Dönüştürür?

Bir Svelte bileşeni (.svelte uzantılı dosya) HTML, CSS ve JavaScript'i tek bir dosyada bir araya getirir. Derleyici bu dosyayı okurken hangi değişkenlerin arayüzde kullanıldığını tespit eder ve bu değişkenler değiştiğinde tam olarak hangi DOM işleminin yapılması gerektiğini önceden hesaplayan kod üretir. Akış şöyle özetlenebilir:

Derleme Akışı

.svelte dosyası
→
Svelte derleyicisi
→
Minimal DOM güncelleme kodu
→
Tarayıcı

Bu yaklaşımın sonucu: tarayıcıya React/Vue'nun taşıdığı türden büyük bir runtime kütüphanesi gitmez, sadece senin yazdığın mantığın karşılığı olan küçük bir JS parçası (+ Svelte'in minimal reaktivite yardımcıları) gider. Bu yüzden Svelte projeleri genelde daha küçük bundle boyutlarıyla çıkar — kesin fark uygulamanın büyüklüğüne ve bağımlılıklarına göre değişir.

Svelte Neden Kullanılmalı?

Svelte'in avantajlarını "özellik listesi" yerine hangi problemi çözdüğü üzerinden okumak daha faydalı:

  • Boilerplate yorgunluğunu çözer: Aynı bileşeni React'te yazdığından daha az satırla ifade edebiliyorsun — useState, useEffect bağımlılık dizileri ve hook kuralları büyük ölçüde ortadan kalkıyor.
  • Bundle boyutu şişmesini çözer: Büyük bir runtime kütüphanesi taşınmadığı için, özellikle küçük-orta ölçekli uygulamalarda çıkan JS dosyası genelde React/Vue eşdeğerinden daha küçük olur — kesin fark projeye göre değişir, üretim build'i üzerinden ölçülmeli.
  • CSS izolasyonu için ek kütüphane ihtiyacını çözer: Bir bileşenin içine yazdığın <style> bloğu otomatik olarak o bileşene özel kalır, CSS-in-JS kütüphanesine ihtiyaç duymazsın.
  • Öğrenme eğrisini kısaltır: Sözdizimi HTML/CSS/JS'e çok yakın durduğu için, temel web bilgisi olan biri Svelte'e React'ten daha hızlı alışabiliyor.
  • Dağınık araç seçimini çözer: Routing, SSR, statik site üretimi ve API endpoint'leri gibi ihtiyaçları ayrı kütüphaneler toplamadan, resmi framework SvelteKit üzerinden tek elden karşılıyorsun.

Svelte 5 ve Runes Sistemi

Svelte 5, reaktivite modelini runes adı verilen özel semboller üzerine oturttu. Önceki sürümlerde reaktivite let değişkenleri ve $: etiketiyle örtük biçimde sağlanıyordu; runes ile bu davranış açık hale geldi ve fonksiyon bileşenleri dışında da (örneğin paylaşılan .svelte.js dosyalarında) kullanılabilir oldu. Svelte 5 hâlâ eski sözdizimini bir legacy mode olarak destekliyor — yani runes, eski reaktivite modelinin yerini tamamen silmiş değil, yeni projeler için önerilen varsayılan yaklaşım haline geldi.

$state()

Reaktif bir değişken tanımlar; değeri değiştiğinde ona bağlı arayüz otomatik güncellenir.

$derived()

Başka state'lerden hesaplanan, onlar değiştiğinde otomatik yeniden hesaplanan türetilmiş bir değer tanımlar.

$effect()

Bağımlı olduğu reaktif değerler değiştiğinde çalışan yan etki (side effect) fonksiyonu tanımlar.

$props()

Bir bileşenin dışarıdan aldığı prop'ları tanımlar.

Svelte'in Dezavantajları

Svelte'e geçmeden önce şu sınırlamaları da göz önünde bulundur:

  • Daha küçük ekosistem: Hazır bileşen kütüphanesi, üçüncü parti entegrasyon ve Stack Overflow/GitHub Issues'da bulunan çözüm sayısı React'e kıyasla belirgin şekilde az.
  • İş piyasası talebi düşük: React ve Vue deneyimi arayan iş ilanı sayısı Svelte'e göre çok daha fazla — kariyer odaklı bir tercih yapıyorsan bunu hesaba katmalısın.
  • Runes geçişi: Svelte 5 ile gelen runes sistemi, Svelte 4 ve öncesiyle yazılmış proje ve eğitim içeriklerinin bir kısmını güncel tutmuyor; eski kaynaklarla yeni sözdizimi arasında geçiş yaparken kafa karışıklığı yaşanabiliyor.
  • Daha az deneyimli geliştirici havuzu: Ekibe Svelte bilen birini katmak, React bilen birini katmaktan istatistiksel olarak daha zor.

Svelte vs React vs Vue

Üçü de bileşen tabanlı arayüz geliştirmeyi hedefliyor ama farklı yaklaşımlar sunuyor:

Özellik Svelte React Vue
Yaklaşım Derleyici, minimal runtime Sanal DOM kütüphanesi Sanal DOM kütüphanesi
Reaktivite Runes ($state, $derived) Hook'lar (useState, useEffect) Reactivity API (ref, computed)
Bundle boyutu Genelde küçük Orta-büyük Orta
Ekosistem büyüklüğü Küçük En büyük Büyük
Resmi meta-framework SvelteKit Next.js (üçüncü parti) Nuxt
Öğrenme eğrisi Düşük Orta Düşük-orta

SvelteKit Nedir?

Svelte ≠ SvelteKit. Svelte tek başına bir bileşen/derleyici katmanıdır; SvelteKit ise bunun üzerine routing, sunucu taraflı render (SSR), statik site üretimi (SSG) ve API endpoint'leri ekleyen resmi meta-framework'tür — Next.js'in React'e olan ilişkisine benzer. SvelteKit başlıca şunları sağlar:

  • Routing: Dosya tabanlı sayfa yönlendirme
  • SSR: Sunucu taraflı render
  • SSG: adapter-static ile tamamen statik site üretimi
  • API: Aynı proje içinde API endpoint'leri tanımlama
  • Data loading: Sayfa bazlı load fonksiyonlarıyla veri yükleme

Bu site de dahil olmak üzere, saf statik bir site istiyorsan SvelteKit'i adapter-static ile derleyip backend'siz, veritabanısız bir HTML/CSS/JS çıktısı üretebilirsin.

Svelte Kimler İçin Uygun?

Svelte'i tercih et eğer:

  • Küçük-orta ölçekli, performans ve bundle boyutunun önemli olduğu bir proje geliştiriyorsan
  • Az boilerplate ile HTML/CSS/JS'e yakın, sade bir sözdizimi tercih ediyorsan
  • Kişisel proje, MVP veya yan proje geliştiriyor, hazır kütüphane bağımlılığından çok kontrol istiyorsan
  • SSR ve statik site üretimini tek bir resmi framework (SvelteKit) üzerinden yönetmek istiyorsan

React'i tercih et eğer:

  • Büyük bir kurumsal ekipte çalışıyor, ekibin zaten React deneyimi varsa
  • Geniş bir hazır bileşen kütüphanesi ve üçüncü parti entegrasyon ekosistemine ihtiyacın varsa
  • İşe alım kolaylığı ve piyasada React bilen geliştirici bulma önceliğin varsa

Svelte'e Nasıl Başlanır?

Yeni bir SvelteKit projesi oluşturmak için:

npx sv create my-app
cd my-app
npm install
npm run dev

İlk Svelte projen için SvelteKit kullanmak bugün genellikle daha mantıklı bir başlangıç noktası. Sadece Svelte'i (SvelteKit olmadan) denemek istiyorsan resmi Svelte Playground'ı tarayıcıda, kurulum yapmadan kullanabilirsin — küçük bir sayaç bileşeni yazıp kendi araçlarınla karşılaştırman, okumaktan daha net bir fikir verir.

Svelte Playground'da dene →

Bu Siteyi SvelteKit ile Yaparken Ne Gördüm?

Şu an okuduğun yakupemreyerli.com'un kendisi bir SvelteKit projesi — adapter-static ile derlenip backend'siz, veritabanısız düz bir HTML/CSS/JS çıktısı olarak yayınlanıyor. Svelte'i ilk kez bu projede kullandım.

En net fark reaktivite tarafında oldu. Eski let/$: tabanlı örtük reaktiviteyi hiç kullanmadım, direkt runes ile başladım; bu yüzden "öncekine göre" bir kıyas yapamam ama $state() ve $derived() ile hangi değişkenin reaktif olduğunu, neyi tetiklediğini kodda dosya içinde açıkça görmek, dokümantasyondaki eski sözdizimi örneklerini okurken bile bana daha anlaşılır geldi. Öğrenme eğrisi tarafında da HTML/CSS/JS'e yakın sözdizimi sayesinde hızlı alışabildim.

Sonuç

Svelte herkes için bir React alternatifi değil. Ancak arayüz güncellemesinin büyük kısmını derleme zamanında ele alan farklı yaklaşımı, daha az kod, genelde daha küçük bundle ve daha sade bir öğrenme eğrisi sunuyor. Bedeli ise React'e kıyasla daha küçük bir ekosistem ve iş piyasasında daha az talep.

Kişisel proje, MVP veya performansın öncelikli olduğu küçük-orta ölçekli işler için denemeye değer; büyük kurumsal ekiplerde ise ekip deneyimi ve ekosistem ihtiyacı kararı belirleyecektir.

Sık Sorulan Sorular

Svelte nedir?

Svelte, bileşenlerinin önemli bir kısmını derleme zamanında saf JavaScript'e çeviren bir framework'tür. React ve Vue'nun taşıdığı türden büyük bir sanal DOM/runtime kütüphanesine dayanmaz, arayüz güncellemesinin çoğunu derleme aşamasında belirler.

Svelte React'ten daha mı iyi?

Kesin olarak daha iyi değil, farklı bir yaklaşım. Küçük-orta ölçekli projelerde daha az kod ve genelde daha küçük bundle sunar; buna karşılık React'in ekosistemi, iş piyasası talebi ve hazır kütüphane sayısı çok daha büyük.

Svelte 5 nedir?

Svelte'in, reaktivite modelini runes sistemiyle ($state, $derived, $effect, $props) yeniden tasarlayan güncel major sürümü. Eski sözdizimini legacy mode olarak hâlâ destekliyor.

Runes nedir?

Runes, Svelte 5 ile gelen ve reaktiviteyi $state(), $derived(), $effect(), $props() gibi açık sembollerle tanımlayan sistemin adı. Önceki sürümlerdeki örtük reaktivite davranışının yerini, yeni projeler için önerilen varsayılan yaklaşım olarak aldı.

Svelte büyük projelerde kullanılabilir mi?

Evet, kullanılabilir; ancak ekosistem küçüklüğü ve hazır bileşen kütüphanesi eksikliği, çok büyük kurumsal projelerde React'e kıyasla daha fazla şeyi sıfırdan yazmanı gerektirebilir.

Kaynaklar