Back

Belajar Svelte – Framework JavaScript untuk Pemula

Cara terbaik belajar Svelte adalah melalui Svelte tutorial yang sangat lengkap namun informasinya terlalu banyak bagi orang hanya ingin mulai menulis kode Svelte.Di artikel ini, saya akan mengajak kalian mengenali sebagian besar yang perlu diketahui untuk membangun website dengan Svelte.

Sebelum melanjutkan, saya berharap kalian sudah pernah mempelajari HTML, CSS dan JavaScript. Jika belum, sebaiknya pelajari terlebih dulu materi-materi tadi supaya lebih mudah saat belajar menggunakan Svelte.

Apa Itu Svelte?

Menulis Svelte terasa seperti menulis HTML, CSS, dan JavaScript biasa.
Svelte adalah framework JavaScript yang dibuat oleh Rich Harris. Tujuannya adalah mengurangi ketergantungan pada JavaScript di web sambil memberikan pengalaman pengembang dan pengguna yang menyenangkan.

Berbeda dengan React atau Vue, Svelte tidak memerlukan runtime. Kode Svelte dikompilasi menjadi JavaScript murni saat build, sehingga ukuran bundel-nya lebih kecil. Fitur seperti animasi bisa dimasukkan tanpa khawatir membebani ukuran akhir aplikasi.

Komponen File Tunggal

Svelte menggunakan Komponen File Tunggal (.svelte) yang menggabungkan HTML, CSS, dan JavaScript dalam satu file.

Sebelum menggunakan Svelte, mari kita coba membuat contoh kode Counter dengan HTML dan JavaScript tanpa framework. Kalian juga bisa mencobanya di Codepen.

contoh.html

<p></p>
<button onclick="increment()">Klik</button>

<script>
	// inisiasi nilai variabel count dengan nilai awal 0 (nol)
  let count = 0

  function increment() {
		// menambahkan nilai variabel count dengan angka 1 (satu)
    count += 1
		// memanggil fungsi untuk merubah tampilan UI
    updateUI()
  }

  function updateUI() {
		// menyimpan elemen HTML p dalam variabel
    let counterElement = document.querySelector('p')
		// mengupdate nilai properti innerText dengan tampilan berisi variabel count
    counterElement.innerText = `
			Diklik ${count} kali
		`
  }

  updateUI()
</script>

Kini, kita coba gunakan Svelte untuk membuat kode dengan fungsi yang serupa. Kalian juga bisa mencoba dengan menggunakan PlayGround Svelte.

App.svelte

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<p>Diklik {count} kali</p>
<button on:click={increment}>Klik</button>
  • <script>: Menulis logika JavaScript.
  • <style>: Menulis CSS yang scoped (hanya berlaku untuk komponen ini).
  • Bagian HTML: Menulis tampilan dengan sintaksis yang diperkaya (misal: {count} untuk menampilkan nilai variabel).

Bisa kalian bandingkan antara kode Regular dan Svelte, terlihat Svelte lebih sederhana namun tidak mengurangi fungsi yang diharapkan. Dengan menempatkan tampilan secara langsung pada elemen HTML kode menjadi lebih mudah dibaca, dan bagi saya hal ini sangat menguntungkan karena mesin pencari dapat lebih mudah membacanya dibandingkan dengan teknik dengan Reqular, meski sudah banyak mesin pencari dapat membaca hasil pembuatan elemen dari javascript.

Svelte memperlakukan App.svelte sebagai komponen file tunggal, dimana tag <script> adalah lokasi untuk kode JavaScript dan tag <style> sebagai CSS, selebihnya diperlakukan sebagai HTML. Coba tambahkan tag <style> ke dalam file App.svelte, dan CSS hanya akan berlaku pada file App.svelte saja.

<style>
	p {
		color: orange;
	}
</style>

Reaktivitas

Bayangkan kalian memiliki sebuah jam pasir ajaib. Setiap kali membaliknya, pasir mulai mengalir ke bawah. Namun, jam ini tidak perlu dibalik manual—ia langsung berputar sendiri begitu pasir di bagian atas habis. Inilah konsep reaktivitas di Svelte: perubahan data otomatis memicu pembaruan antarmuka pengguna (UI) tanpa perlu perintah tambahan.

Reaktivitas di Svelte didasarkan pada penugasan variabel. Perubahan nilai variabel langsung memperbarui UI.

Contoh Reaktivitas dengan $::

<script>
  let items = [1, 2, 3];
  $: total = items.reduce((sum, item) => sum + item, 0);
</script>

<p>Total: {total}</p>
<button on:click={() => items = [...items, items.length + 1]}>
  Tambah Item
</button>


Kode di dalam $: akan dijalankan ulang setiap kali items berubah.

Contoh lainnya:

<script>
  let harga = 10000;
  $: diskon = harga * 0.1; // Otomatis hitung ulang saat `harga` berubah
</script>

<input type="number" bind:value={harga} />
<p>Diskon: {diskon}</p>

Bedanya dengan Framework Lain?

  • React/Vue: Butuh state management (Redux, Vuex) dan fungsi khusus untuk pembaruan UI.
  • Svelte: Cukup tulis variabel seperti JavaScript biasa—Svelte mengurus sisanya!

Logika

Oleh karena HTML tidak dapat menggunakan logika seperti sebuah kondisi dan perulangan, maka kita harus menggunakan JavaScript untuk mewujudkannya.

contoh.html:

<div id="app"></div>

<script>
	let appElement = document.querySelector('#app')

	let user = {
		loggedIn: false
	}
	let todos = [
		{ id: 1, text: "Belajar Svelte", selesai: true },
		{ id: 2, text: "Buat Projek", selesai: false },
	];

	function toggle() {
		user.loggedIn = !user.loggedIn
		updateUI()
	}

	function updateUI() {
		let loginHtml = ''
		let todosHtml = ''

		if (user.loggedIn) {
			loginHtml = `<button>Log out</button>`

			for (let todo of todos) {
				let checked = todo.selesai ? 'checked' : null

				todosHtml += `
				<li data-id=${todo.id}>
					<input ${checked} type="checkbox" />
					<span>${todo.text}</span>
				</li>
			`
			}
			todosHtml = `<ul>${todosHtml}</ul>`
		}

		if (!user.loggedIn) {
			loginHtml = `<button>Log in</button>`
		}

		appElement.innerHTML = `${loginHtml}${todosHtml}`
		appElement.querySelector('button').onclick = toggle
	}

	updateUI()
</script>

Selanjutnya kita buat aplikasi yang sama dengan Svelte:

Contoh #if dan #each:

<script>
  let user = { loggedIn: false };
  let todos = [
    { id: 1, text: "Belajar Svelte", selesai: true },
    { id: 2, text: "Buat Projek", selesai: false },
  ];
</script>

{#if user.loggedIn}
  <button on:click={() => (user.loggedIn = false)}>Logout</button>
{:else}
  <button on:click={() => (user.loggedIn = true)}>Login</button>
{/if}

{#if user.loggedIn}
<ul>
  {#each todos as { id, text, selesai }, index(id)}
    <li>
      <input type="checkbox" checked={selesai} />
      {text}
    </li>
  {/each}
</ul>
{/if}

Event: Seperti Remote Control untuk Komponen

Bayangkan kalian memiliki remote control yang bisa memicu aksi spesifik di TV, seperti mengganti saluran atau menaikkan volume. Di Svelte, event bekerja dengan cara serupa: komponen atau elemen HTML bisa “mendengarkan” interaksi pengguna (klik, input, hover) dan menjalankan fungsi tertentu.

Cara Kerja Event di Svelte

Svelte menggunakan directive on: untuk menghubungkan event dengan fungsi. Contoh:

<button on:click={handleClick}>Klik Saya</button>
  • on:click = Jenis event (klik).
  • handleClick = Fungsi yang dijalankan saat event terjadi.

Analoginya

  1. Remote Control = Directive on: di Svelte.
  2. Tombol Remote = Event (klik, input, mousemove).
  3. Aksi di TV = Fungsi JavaScript yang dipanggil.

Contoh: Saat pengguna mengklik tombol (on:click), Svelte “mengirim sinyal” ke fungsi handleClick untuk memperbarui data atau UI.

Keuntungan Event Handling di Svelte

1. Sintaksis Sederhana
Tidak perlu addEventListener atau removeEventListener seperti di JavaScript biasa. Cukup tulis on: di elemen HTML.Contoh JavaScript vs Svelte:

// JavaScript  
document.querySelector("button").addEventListener("click", handleClick);  
<!-- Svelte -->  
<button on:click={handleClick}>Klik</button>

2. Modifier untuk Kontrol Lebih
Tambahkan modifier seperti preventDefault untuk menghentikan perilaku default browser.

<form on:submit|preventDefault={handleSubmit}>  
  <!-- Form tidak akan reload halaman -->  
</form>

3. Event Forwarding
Komponen anak bisa “meneruskan” event ke komponen induk. Misal, tombol di dalam komponen <Child> bisa memicu aksi di <Parent>.

<!-- Child.svelte -->  
<button on:click>Kirim Event</button>  

<!-- Parent.svelte -->  
<Child on:click={handleParentClick} />

4. Inline Handler
Bisa langsung menulis logika sederhana tanpa fungsi terpisah:

<button on:click={() => count += 1}>+1</button>

Contoh Praktis

1. Pelacakan Posisi Mouse

<script>  
  let mouse = { x: 0, y: 0 };  

  function handleMouseMove(event) {  
    mouse.x = event.clientX;  
    mouse.y = event.clientY;  
  }  
</script>  
<style>
	div {
		height: 100%;
		width: 100%;
	}
</style>

<div on:mousemove={handleMouseMove}>  
  Posisi mouse: {mouse.x} x {mouse.y}  
</div>

2. Form dengan Prevent Default

<script>  
  function handleSubmit() {  
    alert("Form terkirim!");  
  }  
</script>  

<form on:submit|preventDefault={handleSubmit}>  
  <input type="text" />  
  <button>Kirim</button>  
</form>

Apa Bedanya dengan Framework Lain?

  • React: Menggunakan onClick={handleClick} dengan synthetic event.
  • Vue: Menggunakan @click="handleClick".
  • Svelte: Lebih dekat ke JavaScript asli dengan on:click={handleClick}.

Event di Svelte ibarat remote control yang memungkinkan komponen merespons interaksi pengguna dengan intuitif. Tidak perlu kode rumit—cukup pasang on: dan fokus ke logika aplikasi kalian! 🎮✨

<!-- Contoh Event Sederhana -->  
<script>  
  let pesan = "Tekan tombol!";  
</script>  

<button on:click={() => pesan = "Tombol diklik!"}>  
  Klik Saya  
</button>  
<p>{pesan}</p>

Binding Data

Binding memastikan sinkronisasi antara state dan UI.

Svelte mendukung data binding dengan printah bind: .

Untuk memperjelas, kita akan membuat daftar data yang akan ditampilkan/difilter sesuai dengan teks yang dimasukkan ke dalam elemen <input>.

Memfilter daftar data dengan JavaScript:

<input type="text" />
<ul></ul>

<script>
	let list = ["Apel", "Mangga", "Jeruk"]
	let filteredList = list

	let inputElement = document.querySelector('input')
	let listElement = document.querySelector('ul')

	function filterList(event) {
		let searchQuery = event.target.value
		filteredList = list.filter(item => {
			return item
				.toLowerCase()
				.includes(searchQuery.toLowerCase())
		})
		updateUI()
	}

	function updateUI() {
		listElement.innerHTML = filteredList.map(item =>
			`<li>${item}</li>`).join('')
	}

	updateUI()

	inputElement.addEventListener('input', filterList)
</script>

Memfilter daftar data dengan Svelte:

<script>
  let searchQuery = "";
  let list = ["Apel", "Mangga", "Jeruk"];
  $: filteredList = list.filter(item => item.toLowerCase().includes(searchQuery));
</script>

<input type="text" bind:value={searchQuery} />
<ul>
  {#each filteredList as item}
    <li>{item}</li>
  {/each}
</ul>

Komponen dan Slot

Komponen memungkinkan pengorganisasian kode yang modular.

Contoh Komponen dengan Slot:

<!-- Button.svelte -->
<button>
  <slot>Tombol</slot>
</button>

<!-- App.svelte -->
<script>
  import Button from "./Button.svelte";
</script>

<Button>Hapus</Button>
<Button /> <!-- Menampilkan "Tombol" sebagai fallback -->

Named Slot:

<!-- Button.svelte -->
<button>
  <slot name="icon" />
  <slot name="text" />
</button>

<!-- App.svelte -->
<Button>
  <span slot="icon">🗑️</span>
  <span slot="text">Hapus</span>
</Button>

Transisi

Svelte menyediakan transisi bawaan seperti fade, fly, dan slide.

Contoh Animasi Fade:

<script>
  import { fade } from "svelte/transition";
  let tampil = false;
</script>

<button on:click={() => (tampil = !tampil)}>Toggle</button>

{#if tampil}
  <div transition:fade={{ duration: 300 }}>
    Konten muncul dengan efek fade!
  </div>
{/if}

Svelte Store

Store digunakan untuk mengelola state global.

Contoh Writable Store:

// stores.js
import { writable } from "svelte/store";
export const pesan = writable("Halo!");
<!-- App.svelte -->
<script>
  import { pesan } from "./stores.js";
</script>

<p>{$pesan}</p>
<button on:click={() => $pesan = "Selamat datang!"}>Ubah Pesan</button>
Photo by Christopher Gower on Unsplash

Kesimpulan

Svelte menawarkan pengalaman pengembang yang intuitif dengan sintaksis mirip HTML dan performa tinggi. Mulailah dengan membuat komponen sederhana, lalu eksplorasi fitur seperti reaktivitas, transisi, dan store untuk membangun aplikasi yang lebih kompleks.

📚 Lanjutkan Belajar:

Selamat coding! 🚀

Tag:, , , , , , , , , , , , , , , , , , , , , , , ,

Joko Nugroho

Leave A Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *