Pernah liat aplikasi React yang bundle-nya 200KB+ untuk landing page sederhana? React/Vue itu library — runtime mereka harus ikut ke browser. Svelte balik pendekatannya: bukan library yang dibawa ke browser, tapi compiler yang nge-translate kode kamu jadi vanilla JavaScript optimal saat build. Hasil bundle? Lebih kecil 5-10x dari React. Apple, The New York Times, Spotify pake Svelte buat itu.
💡 Rich Harris (kreator Svelte) mantan dev The Guardian. Frustrasi sama React bundle gede yang lambatin halaman berita. Bikin Svelte 2016 sebagai jawaban: "frontend framework as compiler, not runtime". Sekarang Svelte + SvelteKit = combo yang banyak dilirik untuk performance-critical app.
Kenapa Svelte?
- No Virtual DOM — Svelte mengupdate DOM secara langsung, tanpa overhead diffing
- Compiler — Kode Svelte diconvert menjadi JavaScript optimal saat build
- Lebih sedikit boilerplate — Syntax yang minimal dan mudah dibaca
- Scoped CSS — Style otomatis hanya berlaku untuk komponen itu
Komponen Pertama
<script>
let nama = "Dunia"
</script>
<h1>Halo {nama}!</h1>
File .svelte memiliki tiga bagian: <script> untuk logika, markup HTML di tengah, dan <style> untuk CSS. Svelte digunakan oleh Apple, The New York Times, Spotify, dan banyak lainnya.
🎭 Analogi sehari-hari
React/Vue = microwave bawaan. Kamu kirim makanan + microwave, terima panas matang. Microwave-nya ikut ke setiap penerima (runtime di bundle). Svelte = chef yang masak duluan, kirim makanan jadi. Penerima cuma terima hasil jadi (JavaScript optimal), gak perlu microwave. Hasilnya: paket lebih ringan, sampe lebih cepat.
⚠️ Jebakan yang sering ditemui
- Svelte 4 vs 5 (Runes) — Svelte 5 introduce sintaks baru
$state,$derived. Belajar Svelte modern = belajar runes - Reactivity by assignment —
count += 1reaktif,myArray.push(x)GAK reaktif. PakaimyArray = [...myArray, x] - Komunitas lebih kecil dari React — library third-party lebih sedikit
- Job market Svelte di Indonesia masih kecil — bagus buat side project, masih risky buat full career commit
{#each}lupa key = re-render gak optimal
TL;DR: Svelte = compiler-based UI framework. Bundle lebih kecil 5-10x dari React (no runtime di browser). Sintaks minimal, reactivity built-in. Apple/NYT/Spotify pake. Trade: komunitas lebih kecil + job market terbatas. Cocok untuk performance-critical app + side project.
