Apa itu Svelte? — Svelte

Pernah liat aplikasi React yang bundle-nya 200KB+ untuk landing page sederhana? React/Vue itu library — runtime mereka harus ikut ke browser. Svelte balik…

Svelte adalah compiler untuk membangun tampilan web. Kamu menulis komponen di file .svelte yang isinya mirip HTML biasa, lalu sebelum aplikasinya dipakai, compiler Svelte menerjemahkannya jadi JavaScript biasa yang langsung mengubah halaman. Bayangin Warung Bu Sri yang jualan es teh lewat ojek online. Cara pertama: tiap pembeli dikirimi teh, gula, es, termos, dan buku resep, lalu pembeli meracik sendiri tiap kali mau minum. Cara kedua: Bu Sri meracik di dapur sebelum warung buka, pembeli cuma menerima es teh yang sudah jadi. React dan Vue mirip cara pertama: library-nya ikut dikirim ke browser dan bekerja di sana tiap data berubah. Svelte cara kedua: kerjanya dilakukan sekali di komputermu, browser cuma menerima hasil jadinya.

🧪 Tebakan cepat: komponen Svelte punya tombol +1 Es Teh dan teks Dipesan: 0 porsi. Kamu klik tombolnya sekali. Berapa elemen yang dibuat ulang di halaman: 0, 1, atau 2? Jawabannya ada di bagian "Kode hasil compile".

Compiler, bukan library

Compiler adalah program yang menerjemahkan kode jadi kode lain sebelum kode itu dijalankan. Kamu sudah kenal contohnya kalau pernah dengar TypeScript: file .ts diterjemahkan jadi .js dulu. Svelte sama: browser gak pernah membaca file .svelte. Yang dikirim ke browser adalah JavaScript hasil terjemahannya.

Terjemahan itu terjadi saat build, yaitu saat kamu menyiapkan aplikasi untuk dipakai orang (npm run build), atau diam-diam tiap kamu menyimpan file selama dev server jalan (npm run dev).

Bedanya dengan React:

Komponen pertamamu

Satu file .svelte adalah satu komponen. HTML biasa sudah termasuk komponen Svelte yang sah:

<h1>Halo Svelte!</h1>

Hasilnya satu heading <h1> berisi Halo Svelte!. Ini juga jawaban latihan pelajaran ini: kodenya sudah ada di editor, tinggal dijalankan.

Kalau butuh data, tulis JavaScript di dalam <script>, lalu tampilkan dengan kurung kurawal:

<script>
  let warung = "Warung Bu Sri"
</script>

<h1>Selamat datang di {warung}!</h1>

Di jalur ini kita bikin aplikasi kecil untuk Warung Bu Sri: daftar menu (Nasi Goreng, Mie Ayam, Es Teh) dan keranjang pesanan. Tiap pelajaran menambah satu bagian.

Kode hasil compile

Ini komponen pesanan es teh, dan potongan JavaScript yang dihasilkan compiler Svelte 4.2.19 darinya (bagian yang gak dibahas diganti komentar):

<script>
  let porsi = 0
</script>

<button on:click={() => porsi += 1}>+1 Es Teh</button>
<p>Dipesan: {porsi} porsi</p>

function create_fragment(ctx) {
  // ...
  return {
    c() {
      button = element("button");
      button.textContent = "+1 Es Teh";
      t1 = space();
      p = element("p");
      t2 = text("Dipesan: ");
      t3 = text(/*porsi*/ ctx[0]);
      t4 = text(" porsi");
    },
    // m() memasang elemen-elemen itu ke halaman
    p(ctx, [dirty]) {
      if (dirty & /*porsi*/ 1) set_data(t3, /*porsi*/ ctx[0]);
    },
    // ...
  };
}

function instance($self, $props, $invalidate) {
  let porsi = 0;
  const click_handler = () => $invalidate(0, porsi += 1);
  return [porsi, click_handler];
}

Jadi satu klik membuat 0 elemen baru. Yang berubah cuma satu text node, dari 0 jadi 1. Itu jawaban tebakannya. React juga akhirnya cuma mengubah text node yang sama, tapi sebelum itu dia memanggil komponennya lagi dan membandingkan virtual DOM lama dan baru. Svelte melewati kerja membandingkan itu karena jawabannya sudah ditulis compiler.

Ukuran yang dikirim ke browser

Komponen pesanan es teh tadi di-build dengan tiga cara, lalu diukur setelah diperkecil (minify) dan dikompres gzip:

Dibangun dengan JavaScript yang dikirim
Svelte 4.2.19 2,9 KB
Svelte 5.16 9,0 KB
React 19.2 60,4 KB

React selalu membawa react-dom, mesin pembanding virtual DOM-nya, sekecil apa pun aplikasinya. Svelte cuma membawa fungsi bantu kecil yang benar-benar dipakai kode hasil compile. Supaya adil: tiap komponen Svelte menghasilkan kode yang lebih panjang dari JSX-nya, jadi di aplikasi besar selisihnya mengecil. Untuk halaman kecil, widget, dan landing page, selisihnya besar.

Svelte 4, Svelte 5, dan editor latihan

Svelte 5 (rilis Oktober 2024) adalah versi sekarang. Dia membawa cara menulis baru bernama runes, misalnya $state dan $props. Svelte 5 masih bisa menjalankan komponen bergaya Svelte 4, satu per satu, selama komponen itu gak memakai runes. Tapi proyek baru dari npx sv create menyalakan runes untuk semua file proyeknya, jadi di sana gaya Svelte 4 seperti export let ditolak compiler (Cannot use export let in runes mode), kecuali komponennya diberi <svelte:options runes={false} />.

Untuk Gaya Svelte 4 (jalur ini) Svelte 5 dengan runes
Data yang berubah let porsi = 0 let porsi = $state(0)
Menerima prop export let nama let { nama } = $props()
Event klik on:click={...} onclick={...}

Jalur ini menulis gaya Svelte 4 dulu, karena latihannya memeriksa bentuk itu (misalnya export let), dan menunjukkan bentuk Svelte 5 di sampingnya. Runes dibahas penuh di pelajaran terakhir.

Editor latihan meng-compile kodemu dengan compiler Svelte asli: Svelte 4.2, atau Svelte 5 kalau kodemu memakai rune seperti $state(...).

Mulai proyek sendiri

Di komputermu, proyek Svelte biasanya dibuat lewat SvelteKit, framework resmi yang dibangun di atas Svelte (dia menambah routing, server, dan build):

npx sv create warung-bu-sri
cd warung-bu-sri
npm install
npm run dev

⚠️ Jebakan yang sering ketemu

TL;DR: Svelte adalah compiler, bukan library: file .svelte diterjemahkan jadi JavaScript biasa saat build, dan browser gak pernah melihat file .svelte. Gak ada virtual DOM: kode hasil compile langsung membuat elemen dan, saat data berubah, cuma mengganti text node yang bergantung padanya (satu klik di contoh es teh = 0 elemen baru, 1 teks diganti). Bundle-nya kecil: 2,9 KB untuk Svelte 4 dan 9,0 KB untuk Svelte 5, dibanding 60,4 KB untuk React di contoh yang sama. HTML biasa seperti <h1>Halo Svelte!</h1> sudah komponen Svelte yang sah. Proyek baru dibuat dengan npx sv create. Jalur ini menulis gaya Svelte 4 (export let, on:click), yang masih dijalankan Svelte 5 per komponen tapi ditolak di proyek baru dari npx sv create karena runes menyala di sana, dengan bentuk runes Svelte 5 ditunjukkan di sampingnya.

Yang akan kamu pelajari