Dari Nol Sampai Hero: Membangun Aplikasi Interaktif Pertama dengan Svelte

Pernahkah Anda merasa frustrasi dengan kerumitan framework JavaScript modern seperti React atau Vue? Banyaknya boilerplate, konsep yang rumit, dan ukuran bundle yang besar sering kali menjadi hambatan bagi pemula. Namun, ada satu bintang baru yang bersinar terang: Svelte.

Svelte bukan sekadar framework, melainkan sebuah kompiler. Alih-alih menjalankan kode di browser seperti framework lain, Svelte mengubah kode yang Anda tulis menjadi JavaScript vanilla yang super cepat dan ringkas saat proses build. Hasilnya? Aplikasi yang lebih kecil, lebih cepat, dan pengalaman pengembangan yang jauh lebih menyenangkan.

Artikel ini akan memandu Anda dari nol untuk membangun aplikasi interaktif pertama dengan Svelte, mulai dari persiapan hingga pemahaman konsep inti. Siap? Mari kita mulai!

Baca juga: Mengungkap Rahasia Desain Aplikasi Cantik dengan GrialUIKit: Dari Nol hingga Tampilan Profesional

Mengapa Svelte? Keunggulan yang Sulit Diabaikan

Sebelum kita melangkah lebih jauh, mari kita pahami mengapa Svelte layak untuk dicoba.

1. Tidak Ada Virtual DOM: Tidak seperti React atau Vue yang menggunakan Virtual DOM untuk membandingkan perubahan, Svelte langsung memanipulasi DOM. Ini menghilangkan overhead dan membuat performa aplikasi sangat cepat.
2. Ukuran Bundle yang Sangat Kecil: Svelte mengkompilasi komponen Anda menjadi JavaScript murni, tanpa menyertakan runtime framework. Aplikasi yang dihasilkan akan memiliki ukuran file yang jauh lebih kecil, yang berarti waktu muat lebih cepat.
3. Sintaks yang Sederhana dan Intuitif: Svelte menggunakan sintaks yang mirip dengan HTML, CSS, dan JavaScript standar. Anda tidak perlu mempelajari konsep baru yang rumit seperti JSX atau template syntax yang kompleks.
4. Reaktivitas Otomatis: Svelte menyediakan reaktivitas tanpa perlu boilerplate. Cukup deklarasikan variabel dengan let, dan Svelte akan secara otomatis memperbarui DOM ketika nilainya berubah.

Persiapan Awal: Memulai Proyek Svelte

Untuk memulai, Anda hanya membutuhkan Node.js dan npm atau yarn yang terinstal di komputer Anda. Jika belum, instal terlebih dahulu. Setelah itu, buka terminal Anda dan jalankan perintah berikut:

Bash

npm create vite@latest

Vite adalah tool build modern yang sangat cepat dan direkomendasikan untuk Svelte. Saat diminta, pilih Svelte sebagai framework dan JavaScript (atau TypeScript jika Anda mau).

Setelah proyek dibuat, masuk ke direktori proyek dan instal dependensi yang diperlukan:

Bash

cd nama-proyek-Anda
npm install

Sekarang, jalankan server pengembangan:

Bash

npm run dev

Selamat! Aplikasi Svelte pertama Anda sudah berjalan di localhost:5173. Buka browser Anda dan lihat hasilnya.

Memahami Komponen Svelte

Setiap file .svelte adalah sebuah komponen. Sebuah komponen Svelte terdiri dari tiga bagian utama:

• <script>: tempat Anda menulis logika JavaScript.
• <style>: tempat Anda menulis CSS yang terlingkup (scoped) untuk komponen tersebut.
• Markup HTML: tempat Anda menulis struktur dan tampilan komponen.

Mari kita buka file src/App.svelte. Anda akan melihat struktur yang mirip dengan yang dijelaskan di atas.

Svelte

<script>
  let count = 0;

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

<main>
  <h1>Hello Svelte!</h1>
  <button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
  </button>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  button {
    /* Beberapa gaya CSS */
  }
</style>

Mari kita bedah kode di atas:

• Logika (<script>): Variabel count dideklarasikan dengan let, menjadikannya reaktif. Fungsi handleClick memodifikasi nilai count.
• Reaktivitas ({count}): Di dalam tag <button>, kita menampilkan nilai count menggunakan sintaks {...}. Karena count adalah variabel reaktif, Svelte akan secara otomatis memperbarui tampilan tombol setiap kali nilai count berubah.
• Event Handling (on:click): Menggunakan on: diikuti dengan nama event, kita dapat dengan mudah menangani interaksi pengguna. Dalam kasus ini, on:click akan memanggil fungsi handleClick saat tombol diklik.

Membangun Aplikasi "Pencatat Belanja" Sederhana

Sekarang, mari kita terapkan konsep-konsep ini untuk membangun aplikasi yang lebih bermakna. Kita akan membuat daftar belanjaan interaktif.

1. Membuat Komponen Baru

Buat file baru di src/components/ bernama ShoppingList.svelte.

Svelte

<script>
  let items = ['Apel', 'Susu', 'Roti'];
  let newItem = '';

  function addItem() {
    if (newItem.trim() !== '') {
      items = [...items, newItem];
      newItem = '';
    }
  }
  
  function removeItem(index) {
    items = items.filter((_, i) => i !== index);
  }
</script>

<style>
  /* Tambahkan gaya CSS di sini */
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    margin: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 4px;
  }
</style>

<div>
  <h2>Daftar Belanja</h2>
  <input 
    type="text" 
    placeholder="Tambahkan item baru..."
    bind:value={newItem}
    on:keydown={e => {
      if (e.key === 'Enter') {
        addItem();
      }
    }}
  />
  <button on:click={addItem}>Tambah</button>
  
  <ul>
    {#each items as item, index (index)}
      <li>
        {item}
        <button on:click={() => removeItem(index)}>Hapus</button>
      </li>
    {/each}
  </ul>
</div>

2. Membedah Kode Komponen

• bind:value={newItem}: Ini adalah salah satu fitur ajaib Svelte. bind: menciptakan two-way data binding. Setiap kali pengguna mengetik di input, variabel newItem akan diperbarui secara otomatis.
• #each...: Ini adalah sintaks Svelte untuk melakukan perulangan. Svelte menyediakan blok {#each} yang efisien untuk me-render daftar elemen. (index) di sini adalah key yang membantu Svelte melacak elemen mana yang harus diperbarui, ditambahkan, atau dihapus secara efisien.
• Mutasi Array: Perhatikan cara kita memperbarui array items di fungsi addItem. Kita menggunakan items = [...items, newItem]. Ini penting karena Svelte hanya mendeteksi perubahan jika Anda menetapkan kembali nilai variabel. items.push(newItem) tidak akan memicu reaktivitas.

3. Menggunakan Komponen di App.svelte

Sekarang, impor dan gunakan komponen ShoppingList di App.svelte Anda.

Svelte

<script>
  import ShoppingList from './components/ShoppingList.svelte';
</script>

<main>
  <ShoppingList />
</main>

<style>
  /* Gaya global jika ada */
</style>

Hapus kode bawaan di App.svelte dan ganti dengan kode di atas. Simpan, dan lihatlah browser Anda. Anda sekarang memiliki aplikasi daftar belanja interaktif yang berfungsi penuh!

Langkah Selanjutnya: Dari Aplikasi ke Proyek Besar

Aplikasi daftar belanja ini hanyalah permulaan. Setelah Anda merasa nyaman dengan Svelte, ada banyak hal lain yang bisa Anda eksplorasi:

• Store: Untuk manajemen state yang lebih kompleks, gunakan Svelte Store untuk berbagi data antar komponen.
• Component Props: Pelajari cara meneruskan data dari komponen induk ke komponen anak menggunakan export let.
• Routing: Gunakan pustaka seperti svelte-routing atau SvelteKit untuk membangun aplikasi multi-halaman.
• SvelteKit: SvelteKit adalah framework Svelte yang resmi untuk membangun aplikasi skala penuh, termasuk server-side rendering, routing berbasis filesystem, dan banyak lagi.

Baca juga: Mendiktisaintek Brian Yuliarto Apresiasi Tinggi Digital Smart Composter Karya Universitas Teknokrat Indonesia

Kesimpulan

Svelte membuktikan bahwa membangun aplikasi web yang modern dan interaktif tidak harus rumit. Dengan sintaks yang sederhana, reaktivitas yang intuitif, dan performa yang luar biasa, Svelte adalah pilihan yang sempurna baik untuk pemula maupun pengembang berpengalaman.

Dengan mengikuti panduan ini, Anda telah berhasil melewati fase "nol" dan memulai perjalanan Anda sebagai "hero" Svelte. Sekarang, kembangkan ide-ide Anda dan ciptakan aplikasi luar biasa lainnya. Selamat mencoba!

Penulis: Eka sri indah lestary