Svelte Nedir? Svelte 5, Runes, Avantajları ve React Farkı

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?

Svelte Nedir?

Svelte (bazen Svelte.js olarak da anılır), 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 Ne İşe Yarar?

Svelte, web sitelerinin ve web uygulamalarının kullanıcının gördüğü arayüzünü geliştirmeye yarar. Sayfayı parçalara (bileşenlere) bölersin — bir arama kutusu, bir kart listesi, bir form — ve verideki her değişikliği ekrana elle yansıtmak yerine Svelte'e bırakırsın. Pratikte en çok şu işlerde kullanılıyor:

• İnteraktif arayüzler: Filtreleme, arama, form doğrulama gibi kullanıcı etkileşiminin yoğun olduğu ekranlar.
• Yönetim panelleri ve gösterge ekranları: Verinin sürekli değiştiği, tablo ve grafiklerin güncellenmesi gereken arayüzler.
• Tek sayfa uygulamaları (SPA): Sayfa yenilenmeden gezinilen uygulamalar.
• Bütün bir web sitesi: SvelteKit ile birlikte kullanıldığında sadece arayüz katmanı değil, sayfa yönlendirmesi ve sunucu tarafı işleriyle birlikte komple bir site. Şu an okuduğun site de böyle çalışıyor.
• Mevcut bir sayfaya eklenen küçük parçalar: Tüm siteyi Svelte'e taşımadan, sadece belirli bir widget'ı Svelte ile yazmak da mümkün.

Kısacası React ve Vue ile yaptığın işlerin aynısını yapar; farkı, o işi nasıl yaptığında.

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:

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:

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ı? Avantajları Nelerdir?

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:

Svelte mi React mı?

Mutlak bir kazanan yok; hangisinin senin için doğru olduğu neyi önemsediğine bağlı. Svelte'i seç eğer küçük çıktı boyutu, az kod yazmak, HTML'e yakın sade bir sözdizimi ve tek elden toparlanmış resmi bir framework (SvelteKit) senin için belirleyiciyse. React'i seç eğer geniş iş piyasası, kalabalık bir ekip, olgunlaşmış üçüncü parti kütüphane ekosistemi ve yeni geliştirici bulma kolaylığı önceliğinse.

Pratik bir ayrım: React'te ihtiyacın olan şeyin hazır bir çözümünü bulma ihtimalin çok daha yüksek, Svelte'te ise o şeyi kendin yazmak çok daha kısa sürüyor.

Svelte mi Vue mu?

Bu ikisi birbirine React'ten daha yakın: Vue de HTML'e yakın bir şablon dili kullanıyor, öğrenme eğrisi de düşük. Aradaki fark ölçek ve olgunlukta. Vue'nun ekosistemi ve resmi araç zinciri (Nuxt, Pinia, Vue Router) daha büyük ve daha uzun süredir yerleşik; Svelte ise daha az kod ve genelde daha küçük çıktı sunuyor. Kurumsal bir projede daha geniş bir hazır çözüm havuzu istiyorsan Vue, sadeliği ve çıktı boyutunu önceliklendiriyorsan Svelte daha uygun.

Svelte gerçekten React'ten daha hızlı mı?

Kısmen — ve "hızlı"nın neyi kastettiğine bağlı. Derleyici yaklaşımı ve tarayıcıya daha az kod göndermesi, Svelte'e özellikle iki yerde avantaj sağlıyor: sayfanın ilk açılış süresi ve yoğun arayüz güncellemeleri. Ancak gerçek bir uygulamanın hızı framework seçiminden ibaret değil; kullandığın kütüphaneler, verinin nereden ve ne zaman yüklendiği, görsel boyutları ve senin yazdığın kod sonucu kolaylıkla tersine çevirebilir. İnternette gördüğün "X kat hızlı" iddialarına değil, kendi projenin üretim çıktısına bakmak daha doğru.

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.

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.

Bu Sitenin Üretim Çıktısı Ne Kadar?

Yazının başında "genelde daha küçük çıktı" dedim; iddiada bırakmamak için bu sitenin kendi rakamlarını veriyorum. Aşağıdakiler bu yazının yazıldığı tarihteki üretim build'inden (npm run build) ölçüldü, sıkıştırılmış (gzip) boyutlar:

Buradaki 36 KB'ın önemli bir kısmı Svelte'in kendisi değil, SvelteKit'in sayfalar arası gezinmeyi sağlayan istemci tarafı yönlendiricisi. Yani bu rakam "Svelte ne kadar küçük" sorusunun değil, "gerçek bir statik site SvelteKit ile ne kadar yer kaplıyor" sorusunun cevabı — ve bu ayrımı belirtmek, tek bir rakamı framework karşılaştırması diye sunmaktan daha dürüst.

Beni asıl şaşırtan yan şuydu: site tamamen statik HTML olarak üretildiği için, JavaScript hiç çalışmasa bile bütün sayfalar okunabiliyor. JavaScript burada içeriği oluşturmak için değil, sonradan devralıp gezinmeyi hızlandırmak için var. Bu, "framework kullanıyorum" ile "kullanıcıya framework gönderiyorum" arasındaki farkı somut olarak gösteren bir durum.

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 ve SvelteKit arasındaki fark nedir?

Svelte, bileşenlerini derleyip arayüzü oluşturan katmandır. SvelteKit ise bunun üzerine sayfa yönlendirmesi, sunucu taraflı render, statik site üretimi ve API endpoint'leri ekleyen resmi framework'tür. React ile Next.js arasındaki ilişkinin aynısı: Svelte parçaları, SvelteKit bütünü yönetir.

Svelte öğrenmek zor mu?

Temel HTML, CSS ve JavaScript biliyorsan hayır — sözdizimi bu üçlüye çok yakın durduğu için genellikle React'ten daha hızlı alışılıyor. Asıl zorluk dilin kendisi değil, kaynak bulmak: Türkçe içerik az ve internetteki örneklerin bir kısmı hâlâ Svelte 5 öncesinin sözdizimiyle yazılmış, bu da yeni başlayanda kafa karışıklığı yaratabiliyor.

Svelte ile neler yapılabilir?

İnteraktif arayüzler, yönetim panelleri, tek sayfa uygulamaları ve SvelteKit ile birlikte sunucu taraflı render edilen veya tamamen statik komple web siteleri. Mevcut bir sayfaya tek bir bileşen olarak da eklenebilir.

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

• Svelte resmi web sitesi
• Svelte 5 Runes dokümantasyonu
• SvelteKit resmi web sitesi
• Svelte GitHub deposu