Svelte, conceput de Rich Harris, a produs una dintre cele mai mari revoluții de paradigmă în ingineria web. În timp ce framework-urile tradiționale precum React sau Vue rulează un motor greoi de comparare în browser (Virtual DOM diffing la runtime), Svelte este un compilator pur: transformă componentele declarative direct în cod JavaScript nativ microscopic și ultra-optimizat care actualizează DOM-ul chirurgical exact la nivelul nodului modificat.
Odată cu lansarea Svelte 5, limbajul a introdus sistemul revoluționar de Runes (simboluri speciale de compilare: $state, $derived, $effect, $props), eliminând limitele vechii sintaxe și permițând reactivitate granulară universală atât în interiorul fișierelor .svelte, cât și în module JavaScript/TypeScript obișnuite (.svelte.js).
# Modelul Virtual DOM (React):
# Modificare Stare ──► Re-randare completă a arborelui de componente în memorie
# ──► Diffing: Compară vechiul VDOM cu noul VDOM (consum CPU!)
# ──► Aplică diferențele pe DOM-ul real din browser.
# Modelul Compilat Svelte (Zero Virtual DOM):
# Modificare Stare ($state) ──► Salt direct la instrucțiunea DOM generată la build:
# element.textContent = newState;
# Consecință: Viteză nativă a browserului, zero pauze, consum minim de memorie!Pilonii Tehnologici ai Svelte 5
| Rune în Svelte 5 | Sintaxă Exemplu | Rol Tehnic Asigurat |
|---|---|---|
$state |
let count = $state(0); |
Declară o variabilă reactivă profundă (deep reactive state). |
$derived |
let double = $derived(count * 2); |
Valoare calculată automat (memoizată) ce se actualizează doar când dependențele se schimbă. |
$effect |
$effect(() => { localStorage.setItem('val', count); }); |
Execută efecte secundare după ce DOM-ul a fost actualizat (înlocuiește vechiul afterUpdate). |
$props |
let { title, active = false } = $props(); |
Destructurarea proprietăților de intrare ale componentei cu valori implicite și tipizare TypeScript. |
<script>
// Svelte 5 Runes:
let count = $state(0);
let isPositive = $derived(count > 0);
function increment() {
count += 1;
}
</script>
<div class="counter">
<h2>Contor Svelte 5: {count}</h2>
{#if isPositive}
<p style="color: green;">Numărul este pozitiv!</p>
{/if}
<button onclick={increment}>Apasă (+1)</button>
</div>
<style>
.counter {
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
}
button {
background: #ff3e00;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}
</style>