Membuat aplikasi dengan Svelte

MASKODING

3 min read

·

01-09-2024

12

0

Share

Svelte merupakan sebuah framework JavaScript untuk membangun antarmuka pengguna yang cepat dan ringan. Berbeda dengan framework seperti React atau Vue.js, Svelte tidak berjalan di browser, tetapi dikompilasi menjadi kode JavaScript yang sederhana dan efisien.

Keuntungan utama Svelte adalah kecepatannya. Aplikasi Svelte lebih cepat karena mereka tidak membutuhkan virtual DOM untuk memperbarui tampilan. Hal ini membuat Svelte ideal untuk aplikasi yang membutuhkan kinerja tinggi dan pengalaman pengguna yang halus.

Kenapa Memilih Svelte?

Berikut adalah beberapa alasan mengapa Anda mungkin ingin memilih Svelte untuk proyek pengembangan web Anda:

• Performa Tinggi: Svelte sangat cepat karena framework ini dikompilasi menjadi kode JavaScript yang ringkas dan efisien. Aplikasi Svelte lebih ringan dan lebih cepat daripada aplikasi yang dibangun dengan framework lain.
• Kemudahan Penggunaan: Svelte mudah dipelajari dan digunakan, bahkan untuk pemula. Sintaks Svelte sederhana dan mudah dipahami, dan ada banyak sumber daya online untuk membantu Anda belajar.
• Keamanan: Svelte memiliki ekosistem keamanan yang baik, dengan fitur-fitur keamanan bawaan untuk membantu melindungi aplikasi Anda dari serangan berbahaya.
• Komunitas yang Aktif: Svelte memiliki komunitas yang berkembang pesat dan aktif, yang menyediakan dukungan dan sumber daya yang luas untuk pengembang.

Langkah-langkah Membuat Aplikasi dengan Svelte

Berikut adalah langkah-langkah dasar untuk membuat aplikasi dengan Svelte:

1. Instal Svelte: Anda dapat menginstal Svelte dengan menggunakan npm (Node Package Manager):

npm install -g svelte

2. Buat Proyek Baru: Anda dapat menggunakan perintah svelte init untuk membuat proyek Svelte baru:

svelte init my-svelte-app

3. Jalankan Proyek: Setelah Anda membuat proyek Svelte, Anda dapat menjalankannya dengan menggunakan perintah npm run dev:

npm run dev

4. Buat Komponen: Aplikasi Svelte dibangun dari komponen. Sebuah komponen adalah bagian dari antarmuka pengguna yang dapat digunakan kembali. Untuk membuat komponen baru, buat file .svelte baru di direktori src/ dari proyek Anda. Misalnya, Anda dapat membuat komponen Counter.svelte dengan konten berikut:

<script>
  let count = 0;
</script>

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

5. Gunakan Komponen: Anda dapat menggunakan komponen Svelte dalam komponen lain atau di dalam file App.svelte utama aplikasi Anda. Misalnya, Anda dapat menggunakan komponen Counter dalam App.svelte:

<script>
  import Counter from './Counter.svelte';
</script>

<main>
  <h1>Svelte App</h1>
  <Counter />
</main>

Contoh Aplikasi Svelte

Berikut adalah contoh sederhana aplikasi Svelte yang menampilkan daftar tugas:

<script>
  let tasks = [
    { id: 1, title: 'Beli Groceries', completed: false },
    { id: 2, title: 'Selesaikan Project', completed: true },
  ];

  let newTask = '';

  function addTask() {
    if (newTask.trim() !== '') {
      tasks.push({ id: tasks.length + 1, title: newTask, completed: false });
      newTask = '';
    }
  }

  function toggleTask(taskId) {
    const task = tasks.find(t => t.id === taskId);
    if (task) {
      task.completed = !task.completed;
    }
  }
</script>

<h1>Daftar Tugas</h1>

<input type="text" bind:value={newTask} placeholder="Tambahkan tugas...">
<button on:click={addTask}>Tambahkan</button>

<ul>
  {#each tasks as task}
    <li class:completed={task.completed}>
      <input type="checkbox" bind:checked={task.completed} />
      {task.title}
      <button on:click={() => toggleTask(task.id)}>
        {task.completed ? 'Batalkan' : 'Selesaikan'}
      </button>
    </li>
  {/each}
</ul>

Contoh ini menunjukkan penggunaan beberapa fitur Svelte, termasuk:

• Variabel Reaktif: Variabel tasks, newTask dan completed adalah variabel reaktif, yang berarti perubahan nilai variabel ini secara otomatis akan menyebabkan pembaruan tampilan.
• Pengikatan Data: Atribut bind:value mengikat nilai input teks dengan variabel newTask.
• Perulangan: Blok {#each tasks as task} mengulangi setiap tugas dalam array tasks.
• Kondisi: Atribut class:completed={task.completed} menambahkan kelas completed ke elemen <li> jika tugas telah diselesaikan.
• Event Handling: Fungsi addTask dan toggleTask dipanggil ketika tombol diklik.

Kesimpulan

Svelte adalah framework JavaScript yang mudah digunakan dan berorientasi pada performa untuk membangun antarmuka pengguna. Framework ini menawarkan performa tinggi, kemudahan penggunaan, dan komunitas yang aktif. Svelte adalah pilihan yang baik untuk pengembangan aplikasi web modern yang membutuhkan performa dan pengalaman pengguna yang unggul.