Svelte 5: Derleyici Odaklı Yaklaşım ve Zihinsel Model
Oluşturma sırasında tamamen kaybolan bir JavaScript çerçevesi hayal edin. İndirilecek kütüphane yok, hayır çalışma zamanında mutabakata varılacak sanal DOM, tarayıcı denetçisinde hiçbir çerçeve ek yükü görülmez. Bu ve Svelte: geleneksel anlamda bir çerçeve değil, .svelte bileşenlerini dönüştüren derleyici saf ve optimize edilmiş JavaScript'te. Ekim 2024'te piyasaya sürülen Svelte 5, bu modeli yeni bir boyuta taşıyor Dünyada devrim yaratan evrensel sinyal tabanlı tepkime sistemi olan Runes ile seviye atlayın uygulamalarda durumu yönettiğiniz yer.
React, Vue veya Angular'dan geliyorsanız Svelte'nin zihinsel modeli bakış açısı değişikliği gerektirir. bununla ilgili değil yeni bir API öğrenmek, ancak çerçevenin kendisinin çalışma zamanında mevcut olmadığını anlamak. Bu kılavuz size yardımcı olur bu zihinsel modeli oluşturmak, Svelte derleyicisinin dahili olarak nasıl çalıştığını ve Runes'ın neden çalıştığını keşfetmek bu yaklaşımın doğal gelişimini temsil etmektedir.
Ne Öğreneceksiniz
- Svelte derleyicisi bileşenleri saf JavaScript'e nasıl dönüştürür?
- Çünkü Svelte'nin sanal bir DOM'a ihtiyacı yok
- Svelte 5 ile çalışmak için doğru zihinsel model
- Runes ve sinyal tabanlı reaktiviteye giriş
- React ve Vue ile performans karşılaştırması (2025-2026 verileri)
- Runes ile ilk Svelte 5 bileşeni nasıl oluşturulur?
Sanal DOM'larla İlgili Sorun
Svelte'nin neden var olduğunu anlamak için öncelikle neyi çözdüğünü anlamalısınız. React, Vue ve Angular'ın tümü bir sanal DOM: Çerçevenin hesaplamak için kullandığı gerçek DOM'un bellek içi temsili farkları (farklılıkları) belirleyin ve yalnızca gerekli değişiklikleri uygulayın. Bu yaklaşım sezgisel olarak mantıklıdır ve Bellek içi temsili güncellemek, DOM'u doğrudan değiştirmekten daha verimlidir ancak bunun bir bedeli vardır gizli: hiçbir şey değişmese bile sanal DOM mutabakatı her zaman gerçekleşir.
Svelte'nin yaratıcısı Rich Harris bu terimi icat etti "sanal DOM tamamen ek yüktür" içinde toplulukta canlı bir tartışmaya yol açan 2019 tarihli bir makale. Önemli olan sanal DOM değil genel olarak yavaştır ancak derleyicinin ortadan kaldırabileceği gereksiz çalışmalara neden olur.
Bir sayacı görüntüleyen bir React bileşenini düşünün:
// React: il virtual DOM riconcilia ad ogni render
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Contatore: {count}</p>
<button onClick={() => setCount(count + 1)}>
Incrementa
</button>
</div>
);
}Durum her değiştiğinde React şunları yapmalıdır: Bileşen için yeni bir sanal DOM oluşturmalı ve onu aşağıdakilerle karşılaştırmalıdır: öncekini (farklı), neyin değiştiğini belirleyin ve son olarak gerçek DOM'u güncelleyin. Derleyici Svelte, oluşturma sırasında neyin değişebileceğini zaten biliyor (sadece paragrafın metni) ve onu doğrudan oluşturuyor herhangi bir ara adım olmadan güncellemek için kod.
Svelte Derleyici Nasıl Çalışır?
Bir Svelte bileşeni ve .svelte isteğe bağlı üç bölüm içerir: komut dosyası, şablon ve
stiller. Derleme sırasında derleyici bu dosyayı ayrıştırır ve dosyayı doğrudan yöneten JavaScript'i üretir.
Ayrıntılı ve cerrahi güncellemeler içeren DOM.
<!-- Counter.svelte - Il componente sorgente -->
<script>
let count = $state(0);
</script>
<p>Contatore: {count}</p>
<button onclick={() => count++}>
Incrementa
</button>
Derleyici şablonu analiz eder ve şunu anlar: {count} ve değişen tek kısım.
Oluşturulan JavaScript doğrudan şunları içerir: Düğümü oluştur <p>, bir metin düğümü ekleyin,
ve yalnızca şu durumlarda söz konusu metin düğümünü güncelleyen bir efekt kaydedin: count değiştirmek. Sanal DOM yok,
ayrılık yok, uzlaşma yok.
Basitleştirilmiş derlenmiş kod şuna benzer:
// Output del compilatore Svelte (semplificato)
import { mount, text, element } from 'svelte/internal';
export function Counter(target) {
let count = 0;
const p = element('p');
const countText = text(`Contatore: ${count}`);
const button = element('button');
button.addEventListener('click', () => {
count++;
// Aggiorna SOLO il text node specifico
set_data(countText, `Contatore: ${count}`);
});
append(p, countText);
append(target, p);
append(target, button);
}Derleyici odaklı yaklaşımın özü budur: derleyici neyi değiştirebileceğini tam olarak bilir ve onu üretir. Bu işi çalışma zamanında genel bir farklılaştırma algoritmasına devretmek yerine, bunu işlemek için en uygun kodu kullanın.
Paket Boyutu Karşılaştırması (2025)
Eşdeğer bir TodoList bileşeni, ana çerçeveler arasında çok farklı boyutlarda JavaScript paketleri üretir:
- Reaksiyon 19 + ReactDOM: ~42 KB gzip'li (çalışma zamanı dahil)
- Vue 3.5: ~22 KB gzip'li (çalışma zamanı dahil)
- Açısal 19 (bağımsız): ~35 KB gzip'li (çalışma zamanı dahil)
- Hızlı 5: ~2-5 KB gzip'li (çalışma zamanı yok, yalnızca bileşen)
Çok bileşenli büyük uygulamalarda avantaj azalır çünkü her Svelte bileşeni şunları içerir: güncelleme kodu. Ancak orta ölçekli uygulamalarda Svelte genel kazanan olmaya devam ediyor tarayıcıya yük açısından.
Svelte 5'in Paradigma Değişimi: Runes
Svelte 4, atamalara dayalı sihirli bir tepkime sistemi kullandı: bloktaki her değişken
<script> otomatik olarak reaktifti ve derleyici bağımlılıkları takip etti
yapı. Bu basit durumlarda işe yaradı ancak önemli sınırlamaları vardı: Reaktivite işe yaradı
yalnızca .svelte bileşenleri içindeydi ve büyülü davranış, kodun akıl yürütmesini zorlaştırıyordu.
Svelte 5 i tanıtıyor Rünler: öneki olan özel işlevler $ kim iletişim kurar
doğrudan derleyiciyle. Rünler normal işlevler değildir — $state() bu bir fonksiyon değil
içe aktarır ve çağırır - ancak derleyici tarafından tanınan özel bir sözdizimi, buna benzer useState()
React'ta aktarıcı tarafından tüy ve tip kontrolleri için tanınır, ancak aslında sıradan bir fonksiyondur.
Temel fark: Rünler işe yarar her yer, yalnızca .svelte dosyalarında değil:
// counter.svelte.ts - Un modulo TypeScript puro con reattivita Svelte 5
export function createCounter(initial: number = 0) {
let count = $state(initial);
// $derived calcola automaticamente quando count cambia
const doubled = $derived(count * 2);
const isEven = $derived(count % 2 === 0);
function increment() { count++; }
function decrement() { count--; }
function reset() { count = initial; }
return {
get count() { return count; },
get doubled() { return doubled; },
get isEven() { return isEven; },
increment,
decrement,
reset
};
}
// Usabile in qualsiasi componente .svelte
// o in altri file TypeScript che importano questo moduloBu, Svelte 4 ile karşılaştırıldığında radikal bir değişiklik: tepkiselliğiyle iş mantığı yaşayabilir ayrı TypeScript modüllerinde, bileşenler arasında paylaşılabilir, normal birim testleriyle ayrı ayrı test edilebilir, işleme ortamına bağımlılık olmadan.
Dört Temel Rün
Svelte 5, çoğu kullanım durumunu kapsayan dört ana runeyi tanıtıyor:
<script lang="ts">
// $state: stato reattivo (sostituisce let reattivo di Svelte 4)
let name = $state('Federico');
let items = $state<string[]>([]);
// $derived: valori computati (sostituisce $: di Svelte 4)
const greeting = $derived(`Ciao, ${name}!`);
const itemCount = $derived(items.length);
// $effect: side effects (sostituisce $: con side effects di Svelte 4)
$effect(() => {
console.log('name cambiato:', name);
// Cleanup automatico quando l'effetto si ri-esegue
return () => console.log('cleanup prima del prossimo run');
});
// $props: props del componente (sostituisce export let di Svelte 4)
const { title, onClose = () => {} } = $props<{
title: string;
onClose?: () => void;
}>();
</script>Svelte 4 ve Svelte 5: Temel Farklılıklar
Svelte 4 deneyiminiz varsa, Runes sözdizimini önemli ölçüde değiştirir:
- Hızlı 4:
let count = 0;(örtük büyü) → Hızlı 5:let count = $state(0);(açık) - Hızlı 4:
$: doubled = count * 2;→ Hızlı 5:const doubled = $derived(count * 2); - Hızlı 4:
export let prop;→ Hızlı 5:const { prop } = $props(); - Hızlı 4:
on:click={handler}→ Hızlı 5:onclick={handler}
Svelte 5, "eski modda" Svelte 4 ile geriye dönük uyumluluğu korur, böylece geçiş kademeli olabilir.
Svelte 5 ve React: Pratik Bir Karşılaştırma
Yaklaşımdaki farkı somut olarak anlamak için aynı bileşenin React ve Svelte 5'te uygulandığını görelim:
// React 19: SearchBox con debounce
import { useState, useEffect, useCallback } from 'react';
function SearchBox({ onSearch }: { onSearch: (q: string) => void }) {
const [query, setQuery] = useState('');
const [debouncedQuery, setDebouncedQuery] = useState('');
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedQuery(query);
}, 300);
return () => clearTimeout(timer);
}, [query]);
useEffect(() => {
if (debouncedQuery) onSearch(debouncedQuery);
}, [debouncedQuery, onSearch]);
return (
<input
value={query}
onChange={e => setQuery(e.target.value)}
placeholder="Cerca..."
/>
);
}<!-- Svelte 5: SearchBox con debounce -->
<script lang="ts">
const { onSearch }: { onSearch: (q: string) => void } = $props();
let query = $state('');
$effect(() => {
const timer = setTimeout(() => {
if (query) onSearch(query);
}, 300);
return () => clearTimeout(timer);
});
</script>
<input bind:value={query} placeholder="Cerca..." />
Svelte 5 sürümü daha özlüdür çünkü "sihirli" değildir: bunun nedeni derleyicinin senkronizasyonu yönetmesidir
arasında query ve aracılığıyla giriş yapın bind:value, Ve $effect otomatik olarak takip et
bağımlılık query bağımlılık dizisinde açıkça beyan etmek zorunda kalmadan.
Gerçek Performans: Veri ve Karşılaştırma
Sentetik kıyaslamalar genellikle yanıltıcıdır, ancak veriler JS Çerçeve Karşılaştırması 2025 (yoğun DOM işlemleriyle gerçek donanım üzerinde çalışan) Svelte 5'i sürekli olarak en üst çeyrekte gösteriyor neredeyse tüm test edilen işlemler için:
- 10.000 satır oluşturma: Vanilla JS'ye kıyasla Svelte 5 ~1,2x genel gider, React ~2,1x
- Her 10. satırda bir güncelleyin: İnce 5 ~1,1x, Tepki ~1,8x
- Satır vurgusunu seçin: İnce 5 ~1,05x, Tepki ~1,4x
- Oluşturulduktan sonraki hafıza: Svelte 5, React'tan ~%40 daha az bellek kullanır
Avantaj, en çok JavaScript'in ayrıştırılıp çalıştırıldığı düşük kaliteli mobil cihazlarda belirgindir. daha pahalıya mal oluyorlar. Modern masaüstü bilgisayarlarda tipik uygulamalar arasındaki pratik fark çoğu zaman görünmez son kullanıcıya.
İlk Hızlı Projeyi Oluşturmak 5
Svelte 5'e başlamanın en hızlı yolu, Svelte'yi temel alan resmi tam yığın çerçeve olan SvelteKit'i kullanmaktır:
# Crea un nuovo progetto SvelteKit con Svelte 5
npm create svelte@latest my-svelte-app
cd my-svelte-app
# Seleziona: Skeleton project, TypeScript, ESLint, Prettier
npm install
# Avvia il dev server
npm run dev
Projenin Svelte 5 kullandığını kontrol ederek doğrulayın. package.json:
{
"dependencies": {
"@sveltejs/kit": "^2.5.0",
"svelte": "^5.0.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"vite": "^5.0.0"
}
}
Runes ile ilk bileşeninizi oluşturun src/lib/components/Hello.svelte:
<script lang="ts">
// $props: tipo sicuro per le props del componente
const { name = 'Mondo' }: { name?: string } = $props();
// $state: stato locale reattivo
let clickCount = $state(0);
// $derived: valore computato da state e props
const message = $derived(
clickCount === 0
? `Ciao, ${name}!`
: `Ciao, ${name}! Hai cliccato ${clickCount} volt${clickCount === 1 ? 'a' : 'e'}`
);
</script>
<div class="hello">
<p>{message}</p>
<button onclick={() => clickCount++}>
Clicca qui
</button>
</div>
<style>
.hello {
padding: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
margin-top: 0.5rem;
padding: 0.5rem 1rem;
}
</style>SvelteKit: Tam Yığın Çerçevesi
Tek başına hızlı ve yalnızca kullanıcı arayüzü katmanı. İnceKit ve Svelte üzerine kurulu uygulama çerçevesi yönlendirme, SSR (Sunucu Tarafı Oluşturma), SSG (Statik Site Oluşturma), form eylemleri ve yükleme ekler Veri alma işlevleri. Ve React için Next.js veya Vue için Nuxt'un eşdeğeri.
Bir SvelteKit projesinin yapısı dosya tabanlı kuralları takip eder:
src/
├── routes/
│ ├── +layout.svelte # Layout globale
│ ├── +page.svelte # Homepage (/)
│ ├── about/
│ │ └── +page.svelte # Pagina /about
│ └── blog/
│ ├── +page.svelte # Lista articoli (/blog)
│ ├── +page.server.ts # Data fetching server-side
│ └── [slug]/
│ ├── +page.svelte # Articolo singolo (/blog/nome)
│ └── +page.server.ts
├── lib/
│ ├── components/ # Componenti condivisibili
│ └── utils/ # Utilita
└── app.html # Template HTML baseSvelte 5 Ne Zaman Seçilmeli?
Svelte 5 aşağıdaki durumlarda en uygun seçimdir:
- Yükleme performansı kritik öneme sahiptir (mobil, yavaş bağlantılar)
- Paket boyutu minimum olmalıdır
- Ekip, React'tan farklı bir zihinsel model öğrenmeye istekli
- Daha az standartla mükemmel bir DX (Geliştirici Deneyimi) istiyorsunuz
- SvelteKit ile SSR/SSG'den yararlanan, içerik ağırlıklı bir site oluşturursunuz
Svelte 5 şu durumlarda doğru seçim OLMAYABİLİR:
- Ekibin güçlü bir React deneyimi var ve geçiş çok maliyetli olacak
- Birçok kullanıcı arayüzü bileşen kütüphanesi aranır (React ekosistemi daha geniştir)
- React'ı (başsız kullanıcı arayüzü, Radix vb.) alan kütüphanelerle entegre olmalıdır.
Zihinsel Model: Akılda Tutulması Gerekenler
Svelte 5 ile çalışmak, çerçevelerle karşılaştırıldığında bazı temel farklılıkların içselleştirilmesini gerektirir sanal DOM'a dayalı:
- Derleyici sizin aracınızdır, çalışma zamanı değil. Bir şey şu şekilde çalışmadığında beklediğiniz gibi, bir işleme döngüsü değil, derleyicinin kodunuzu nasıl yorumlayacağını düşünün.
-
Runes derleyiciyle iletişim kurar.
$state(),$derived()ve diğerleri basit işlevler değildir: derleyiciye reaktivitenin nasıl ele alınacağına ilişkin talimatlardır. -
Yanıt verme özelliği tasarım gereği ayrıntılıdır. Yalnızca gerçekte orada olanı hızla günceller
değişti. Manuel olarak optimize edilecek bir mekanizma yok
useMemoouseCallback. -
.svelte.ts dosyaları evrensel duyarlılığı etkinleştirir. Runes'u herhangi bir şekilde kullanabilirsiniz.
uzantılı dosya
.svelte.tso.svelte.jssadece bileşenlerde değil.
Sonuçlar ve Sonraki Adımlar
Svelte 5, çerçevenin yaratılışından bu yana en önemli evrimini temsil ediyor. Yaklaşım derleyici odaklı yeni bir şey değil, ancak Runes, sinyal tabanlı duyarlılığı bileşenlerin sınırlarının dışına taşıyor. daha esnek ve test edilebilir mimari kalıpların sağlanması. Sonuç, şunları birleştiren bir çerçevedir: mükemmel performans, minimum paket ve işe yaramaz standartlardan arınmış bir geliştirici deneyimi.
Serideki bir sonraki makale derinlemesine araştırıyor $state ve $türetilmiş: nasıl çalışıyor
Proxy ES6 aracılığıyla derin yanıt verme yeteneği $derived notlandırmayı uygulayın ve nasıl
Bileşenler arasında paylaşılan TypeScript dosyalarında Runes'ı kullanın.
Seri: Svelte 5 ve Ön Uç Derleyici Tabanlı
- Madde 1 (bu): Derleyici Odaklı Yaklaşım ve Zihinsel Model
- Madde 2: $state ve $derived — Runes ile Evrensel Reaktivite
- Madde 3: $ effect ve Yaşam Döngüsü - Ne Zaman Kullanılmalı (ve Ne Zaman Kullanılmamalı)
- Madde 4: SvelteKit SSR, Akış ve Yükleme İşlevleri
- Madde 5: Svelte 5'teki Geçişler ve Animasyonlar
- Madde 6: Svelte'de Erişilebilirlik: Derleyici Uyarıları ve En İyi Uygulamalar
- Madde 7: Küresel Devlet Yönetimi: Bağlam, Rünler ve Mağazalar
- Madde 8: Svelte 4'ten Svelte 5'e Geçiş — Pratik Kılavuz
- Madde 9: Svelte 5'te Test Yapma: Vitest, Test Kütüphanesi ve Oyun Yazarı