Belajar Svelte - Sejarah, Latar Belakang & Mengapa Membutuhkan Svelte

#Pendahuluan

Semua teknologi besar lahir dari frustrasi terhadap pendekatan lama, dan Svelte tidak terkecuali. Episode 1 ini membuka cerita di balik Svelte: bagaimana sebuah framework yang disebut sebagai "the magical disappearing UI framework" lahir, masalah apa yang ingin diselesaikannya, dan mengapa jutaan developer mulai beralih ke sana.

Memahami sejarah penting karena ia menjelaskan keputusan desain. Kenapa Svelte mengompilasi kode saat build? Kenapa tidak ada virtual DOM? Jawabannya ada pada perjalanan panjang dari Ractive, Svelte 1, sampai runes di Svelte 5. Kalau kalian paham alasannya, sintaks yang tampak aneh akan terasa logis.

Di episode ini kita membahas evolusi Svelte, masalah yang diselesaikannya, perbandingan dengan React, Vue, dan Angular, serta alasan mengapa Svelte layak dipelajari di tahun 2026.

#Evolusi dan Sejarah Svelte

#Lahirnya Gagasan Compiler untuk UI

Svelte dibuat oleh Rich Harris, seorang penulis dan developer yang sebelumnya mengembangkan framework bernama Ractive. Saat itu ia menyadari sebuah pola: setiap framework JavaScript membawa runtime — ribuan baris kode yang harus di-download dan dijalankan browser hanya agar komponen bisa bekerja. Ia bertanya: kenapa tidak mengompilasi komponen menjadi JavaScript murni saat build, sehingga di browser tidak ada lagi framework yang berjalan?

Tahun 2016, Svelte rilis dengan gagasan itu. Fokusnya bukan menambah fitur, melainkan menghilangkan kerja yang selama ini dibebankan ke runtime. Karena komponen diubah menjadi kode imperative saat build, Svelte tidak membutuhkan framework interpreter di sisi klien. Hasilnya: ukuran bundle kecil dan aplikasi yang berjalan sangat cepat.

#Svelte 3: Reaktivitas Tanpa API

Rilis Svelte 3 pada tahun 2019 adalah titik balik besar. Sebelumnya, reaktivitas Svelte masih memakai sintaks yang cukup ribet. Svelte 3 memperkenalkan ide sederhana: reaktivitas tanpa API. Kalian cukup menulis:

<script>
  let count = 0
 
  $: doubled = count * 2
</script>
 
<button on:click={() => (count += 1)}>
  Klik {count}
</button>

$: doubled = count * 2 adalah reactive statement: setiap kali count berubah, doubled dihitung ulang otomatis. Tidak ada .set(), tidak ada .get(), tidak ada hook. Variabel biasa langsung reaktif. Kesederhanaan inilah yang membuat Svelte menarik minat banyak developer.

Kemudian Svelte 4 (2023) merapikan kode internal, dan Svelte 5 (2024) memperkenalkan runes — $state, $derived, dan $effect — yang membawa reaktivitas ke level berikutnya tanpa mengubah struktur bahasa. Kita akan membedah runes secara mendalam mulai episode 4.

#SvelteKit: Framework Full-Stack untuk Svelte

Svelte hanya menyelesaikan bagian UI. Untuk kebutuhan full-stack, pada tahun 2020 tim Svelte mulai menggarap SvelteKit dan merilis versi stabil 1.0 pada Desember 2022. SvelteKit menambahkan routing berbasis file, server-side rendering, pre-rendering, form actions, dan adapters untuk deployment ke berbagai platform.

Dengan SvelteKit, satu aplikasi menangani frontend dan backend: data diambil di server lewat load functions, lalu di-render di klien. Konsep ini menjadi tulang punggung episode 8 hingga 21 di series ini.

#Masalah yang Diselesaikan Svelte

#Runtime Overhead yang Rendah

React, Vue, dan Angular mengirimkan runtime ke browser: mesin interpreter untuk elemen virtual DOM dan sistem reaktivitas mereka. Browser harus men-download, meng-parse, dan menjalankan runtime itu setiap kali aplikasi dibuka. Svelte berbeda: kompiler mengubah komponen kalian menjadi kode JavaScript biasa saat build, jadi tidak ada runtime yang harus dibawa.

Hasilnya langsung terasa: aplikasi lebih cepat pertama kali dimuat, lebih hemat memori, dan lebih responsif di perangkat kelas menengah. Inilah masalah utama yang coba diselesaikan Svelte — membebaskan kalian dari "biaya tersembunyi" framework.

#Bundle Output yang Kecil

Karena framework-nya nyaris menghilang dari hasil akhir, bundle JavaScript Svelte jauh lebih ringan. Kode yang dihasilkan compiler hanya berisi logika yang benar-benar dipakai komponen. Kombinasi bundle kecil dan tanpa virtual DOM membuat Svelte unggul untuk aplikasi yang mengejar performa, seperti landing page, dashboard, dan situs konten.

#Perbandingan dengan React, Vue, dan Angular

#Filosofi yang Berbeda

Perbedaan utama bukan pada "mana yang terbaik", melainkan posisi kerja: React dan Vue membayar biaya interpretasi di browser, sedangkan Svelte membayarnya sekali saat build. Masing-masing punya ekosistem yang kuat, tapi pendekatan Svelte secara fundamental lebih ringan.

#Kompilasi Saat Build vs Virtual DOM

React dan Vue membandingkan state baru dengan state lama di dalam virtual DOM, lalu menghitung perubahan yang harus diterapkan ke DOM asli. Proses ini terjadi di browser setiap saat. Svelte meniadakan langkah itu: saat build, compiler tahu persis bagian mana dari DOM yang bergantung pada state tertentu, lalu membuat kode update yang langsung menargetkan elemen itu.

Konsep output kompilasi Svelte

// Bayangan kode yang dihasilkan compiler
function updateCount(node, value) {
  node.textContent = value
}

updateCount(node, value) menggambarkan prinsipnya: update langsung ke elemen yang relevan, tanpa perantara virtual DOM. Tidak ada diffing, tidak ada framework yang menunggu di browser.

#Mengapa Svelte Layak Dipelajari

#Simplicity dan Sintaks yang Ekspresif

Belajar Svelte terasa seperti menulis HTML dan JavaScript biasa — tanpa konsep abstrak seperti useMemo, dependency array, atau virtual DOM. Kalian menulis state dan tampilan, compiler menangani sisanya. Kurva belajarnya pendek, sehingga tim bisa produktif lebih cepat.

#SvelteKit dan Ekosistem yang Tumbuh

SvelteKit memberikan full-stack experience yang menyatu: routing, SSR, dan deployment yang sederhana. Ekosistemnya terus tumbuh — dari Svelte Native untuk mobile, library komponen seperti SvelteUI dan shadcn-svelte, sampai dukungan adapter di Vercel, Netlify, dan Cloudflare. Kita akan menjelajah semuanya di fase-fase berikutnya.

#Penutup

Inti yang harus dibawa pulang:

• Svelte adalah compiler-driven framework: komponen diubah menjadi JavaScript murni saat build.
• Lahir dari gagasan Rich Harris untuk menghilangkan runtime overhead di browser.
• Svelte 3 membuat reaktivitas tanpa API; Svelte 5 menambahkan runes seperti $state.
• SvelteKit melengkapi Svelte dengan routing, SSR, dan deployment full-stack.
• Tanpa virtual DOM, bundle lebih kecil dan aplikasi lebih cepat dimuat.
• Pilih framework sesuai kebutuhan, tapi filosofi compiler Svelte memberikan keunggulan performa yang nyata.

Di episode 2 selanjutnya kita akan membedah konsep dasar dan arsitektur utama — bagaimana compiler bekerja di balik layar, struktur file .svelte, reactive declarations, lifecycle hooks, hingga scoped CSS. Ini adalah fondasi teknis yang akan dipakai setiap episode berikutnya.