Sanal DOM'u ortadan kaldıran, reaktif ve derlenmiş web uygulamaları oluşturmaya yarayan devrim niteliğinde bir araç.
Özellikler
Svelte bir derleyicidir. Kodunuzu tarayıcıda çalışan optimize edilmiş saf (vanilla) JavaScript'e çevirir, böylece Sanal DOM yükü olmaz.
JavaScript'in $ etiket sözdizimini ($:) kullanarak değişkenlerin birbirine reaktif olarak bağlanmasını sağlar.
Geleneksel framework'lere göre aynı işi çok daha az satır kodla yapmanızı sağlayarak hata payını düşürür.
Bileşen içindeki CSS kuralları varsayılan olarak sadece o bileşene etki eder (scoped CSS).
Svelte, elementlerin giriş ve çıkış animasyonları için kullanıma hazır transition direktifleri sunar.
Svelte üzerine kurulu, modern ve tam teşekküllü (full-stack) bir framework ile sunucu tarafı renderlama, yönlendirme vb. özellikleri barındırır.
Değerlendirme
Canlı Örnekler
Aşağıdaki demolar Svelte'in çalışma mantığını gösterir.
Svelte'de değişkenler reaktiftir. Değişkeni güncellemek DOM'u otomatik olarak günceller.
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
Tıklanma sayısı: {count}
</button>
<style>
button {
background: #FF3E00;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
</style>Svelte'in $: sözdizimi ile türetilmiş durumlar kolayca tanımlanır. Aşağıdaki demo Svelte'in reaktivite mantığını Vanilla JS ile simüle etmektedir.
<script>
let count = 2;
// Reaktif değişkenler (Svelte otomatik hesaplar)
$: doubled = count * 2;
$: status = doubled > 10 ? 'Büyük' : 'Küçük';
</script>
<input type="number" bind:value={count} />
<p>Çarpan Etkisi: {doubled}</p>
<p>Toplam Durum: {status}</p>Svelte, diziler üzerinde dönmek için {#each} blokları kullanır ve transition: direktifi ile çok kolay animasyonlar eklenebilir.
<script>
import { fade, slide } from 'svelte/transition';
let newTodo = '';
let todos = [
{ id: 1, text: 'Svelte öğren' },
{ id: 2, text: 'Komponent oluştur' }
];
function addTodo() {
if (!newTodo) return;
todos = [...todos, { id: Date.now(), text: newTodo }];
newTodo = '';
}
function removeTodo(id) {
todos = todos.filter(t => t.id !== id);
}
</script>
<input bind:value={newTodo} placeholder="Görev ekle..." />
<button on:click={addTodo}>Ekle</button>
<ul>
{#each todos as todo (todo.id)}
<li in:fade out:slide>
{todo.text}
<button on:click={() => removeTodo(todo.id)}>X</button>
</li>
{/each}
</ul>Aynı bileşenin Svelte ve React ile yazılmış halleri. Svelte'in ne kadar az boilerplate koda ihtiyaç duyduğuna dikkat edin.
<script>
let name = 'Dünya';
</script>
<input bind:value={name}>
<h1>Merhaba {name}!</h1>
<style>
h1 { color: #FF3E00; }
</style>import { useState } from 'react';
import './styles.css';
export default function App() {
const [name, setName] = useState('Dünya');
return (
<div>
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
<h1 className="title">Merhaba {name}!</h1>
</div>
);
}Sanal DOM olmadığı için düşük güçlü cihazlarda bile son derece akıcı çalışır.
Geleneksel CMS'ler üzerine veya farklı sistemlere entegre edilecek bağımsız bileşenler için idealdir (Çalışma zamanı kütüphanesi olmadan derlenir).
The New York Times tarafından geliştirildiği için, yoğun veri görselleştirme ve grafik ekranlarında sıklıkla tercih edilir.
Çıktı boyutu çok küçük olduğu için edge fonksiyonlarında ve serverless yapılarda hızlı yükleme süreleri sağlar.