Membangun Proyek To Do List dengan Svelte

jeditor

7 bulan ago

Membangun Proyek To-Do List bisa jadi cara seru untuk belajar pemrograman, terutama jika menggunakan Framework Svelte. Svelte menawarkan pendekatan modern dalam membangun aplikasi web dengan performa ringan dan sintaks yang mudah dipahami. Dalam proyek ini, kita akan membuat daftar tugas sederhana mulai dari nol, sekaligus memahami konsep dasar seperti komponen, state management, dan interaktivitas. Cocok buat pemula yang ingin eksplor JavaScript tanpa ribet. Yuk, simak langkah-langkahnya dan buat To-Do List versimu sendiri!

Pengenalan Framework Svelte

Svelte adalah framework JavaScript modern yang berbeda dari React atau Vue. Alih-alih menggunakan Virtual DOM seperti kebanyakan framework frontend, Svelte bekerja dengan kompilasi saat build time, menghasilkan kode JavaScript murni yang sangat efisien (sumber resmi Svelte).

Yang bikin Svelte menarik adalah kesederhanaannya. Kamu nggak perlu ribet dengan state management kompleks—cukup tulis variabel biasa, dan Svelte otomatis mengurus pembaruan tampilan. Misal, buat counter, di React perlu useState, di Svelte cuma butuh let count = 0.

Svelte juga punya sintaks yang minimalis. Komponen ditulis dalam file .svelte yang menggabungkan HTML, CSS, dan JavaScript tanpa boilerplate. Contoh:

<script>
let name = 'World';
</script>
<h1>Hello {name}!</h1>

Fitur keren lain adalah built-in transitions dan stores untuk state global, yang mengurangi kebutuhan library tambahan. Performanya juga top—karena hasil kompilasi Svelte adalah vanilla JS, ukuran bundlenya kecil dan cepat di-load.

Buat yang penasaran, coba langsung di Svelte REPL tanpa instalasi. Cocok banget buat proyek kecil seperti To-Do List, di mana kamu bisa fokus ke logika aplikasi tanpa pusing sama konfigurasi.

Catatan: Svelte dikembangkan oleh Rich Harris (Ractive, Rollup) dan sekarang dipakai oleh perusahaan seperti The New York Times dan Spotify.

Persiapan Alat dan Bahan

Sebelum mulai bikin Proyek To-Do List dengan Svelte, pastikan kamu sudah siapin alat dan bahannya. Nggak banyak kok, tapi penting biar nggak mentok di tengah jalan.

1. Node.js & npm Svelte butuh Node.js (versi LTS disarankan) untuk menjalankan tooling-nya. Kalau belum punya, download di situs resmi Node.js. Npm (Node Package Manager) otomatis terinstall bareng Node.js—ini buat manage dependency proyek.

2. Code Editor Pilih editor yang nyaman buat nulis kode. Rekomendasi:

VS Code (ringan + punya ekstensi Svelte resmi)
Atau WebStorm kalau mau yang lebih powerful.

3. Terminal/Command Line Buat menjalankan perintah seperti npm create vite@latest. Kalau pakai Windows, bisa pakai PowerShell atau WSL.

4. Template Proyek Svelte Gunakan Vite atau SvelteKit untuk scaffolding proyek. Contoh:

npm create vite@latest svelte-todo --template svelte

Ini bakal generate folder proyek dengan struktur dasar.

5. Browser Modern Svelte support di Chrome, Firefox, atau Edge versi terbaru. Kalau mau debugging, aktifkan DevTools.

6. (Opsional) Git Berguna buat version control. Install dari git-scm.com, lalu inisialisasi repo di folder proyek.

Cek lagi dengan node -v dan npm -v di terminal. Kalau udah keluar versinya, berarti siap mulai coding! 🚀

Tips: Kalau ada error waktu instalasi, coba update npm dulu pakai npm install -g npm@latest.

Struktur Dasar Proyek To Do List

Setelah proyek Svelte ter-install, kamu bakal nemuin struktur folder seperti ini (kalau pakai template Vite + Svelte):

svelte-todo/
├── node_modules/  # Semua dependency tercantum di sini
├── src/
│   ├── lib/       # Tempat simpan komponen reusable
│   ├── App.svelte # Komponen utama
│   └── main.js    # Entry point aplikasi
├── public/        # File static (favicon, gambar)
├── package.json   # Daftar dependency & scripts
└── vite.config.js # Konfigurasi build tool

File Penting yang Bakal Kamu Modifikasi:

App.svelte Ini “root component” tempat kita bikin kerangka To-Do List. Struktur dasarnya:

<script>
// Logika JavaScript di sini
</script>
<main>
<!-- HTML + fitur Svelte seperti {loop} dan {if} -->
</main>
<style>
/* CSS scoped (hanya berlaku untuk komponen ini) */
</style>

lib/ Buat bikin komponen terpisah, misal TodoItem.svelte untuk tiap task. Nanti di-import ke App.svelte.
main.js File ini nge-mount App.svelte ke HTML. Jarang perlu diutak-atik kecuali mau tambahin global styles atau libraries.

Pertama, Bersihkan Dulu!

Hapus contoh code default di App.svelte.
Buat file Todo.svelte di folder lib/ buat nampung logika daftar tugas.

Referensi:

Tips: Gunakan npm run dev untuk menjalankan development server dan lihat perubahan secara real-time!

Membuat Komponen Utama

Untuk Proyek To-Do List, kita butuh dua komponen utama:

1. `TodoForm.svelte` (Input Task Baru)

Komponen ini berisi form untuk menambah tugas. Contoh sederhana:

<script>
        let newTask = '';
        function addTask() {
                if (newTask.trim()) {
                        // Logika kirim data ke parent component (nanti dibahas)
                        newTask = ''; // Reset input
                }
        }
</script>

<form on:submit| preventDefault={addTask}>
        <input type="text" bind:value={newTask} placeholder="Tulis task baru..." />
        <button type="submit">Tambah</button>
</form>

Fitur keren Svelte: bind:value otomatis sinkronisasi input dengan variabel newTask.

2. `TodoList.svelte` (Daftar Task)

Komponen ini menampilkan dan mengelola daftar tugas. Pakai {#each} untuk looping:

<script>
        export let tasks = []; // Diterima dari parent component
</script>

<ul>
        {#each tasks as task (task.id)}
                <li>
                        <input type="checkbox" bind:checked={task.completed} />
                        <span class:completed={task.completed}>{task.text}</span>
                </li>
        {/each}
</ul>

<style>
        .completed {
                text-decoration: line-through;
        }
</style>

Gabungkan di `App.svelte`

<script>
        import TodoForm from "./lib/TodoForm.svelte";
        import TodoList from "./lib/TodoList.svelte";
        let tasks = [];
</script>
<TodoForm />
<TodoList {tasks} />

Referensi:

Tips: Gunakan (task.id) di {#each} untuk optimasi performa saat list berubah. Kalau task belum punya ID, bisa pakai crypto.randomUUID() (built-in di browser modern).

Menambahkan Fungsi Tambah dan Hapus

Fungsi Tambah Task Di TodoForm.svelte, kita perlu kirim data task baru ke parent (App.svelte). Caranya:

Buat Custom Event di child component:

<script>
        import { createEventDispatcher } from 'svelte';
        const dispatch = createEventDispatcher();
        let newTask = "";
        function addTask() {
                if (newTask.trim()) {
                        dispatch('add', {
                                text: newTask,
                                id: crypto.randomUUID(),
                                completed: false
                        });
                        newTask = "";
                }
        }
</script>

Tangkap Event di parent (App.svelte):

<script>
        function handleAdd(event) {
                tasks = [...tasks, event.detail]; // Immutable update
        }
</script>
<TodoForm on:add={handleAdd} />

Fungsi Hapus Task

Tambahkan tombol hapus di TodoList.svelte:

<li>
...
<button on:click={() => dispatch('delete', task.id)}>Hapus</button>
</li>

Handle di parent:

<TodoList
{tasks}
on:delete={(e) => tasks = tasks.filter(t => t.id !== e.detail)}
/>

Kenapa Immutable Update? Svelte perlu assignment (tasks = [...]) untuk trigger reactivity. Solusi lain pakai Svelte stores kalau state kompleks.

Tips:

Pakai crypto.randomUUID() untuk generate ID unik (support di Chrome/Firefox/Edge).
Tambahkan confirmasi sebelum hapus:

<button on:click={() => confirm('Yakin hapus?') && dispatch('delete', task.id)}>

Mengelola State dengan Svelte Store

Ketika Proyek To-Do List makin kompleks, mengelola state antar komponen bisa berantakan. Solusinya? Pakai Svelte Store—sistem state management bawaan yang lebih efisien daripada props drilling.

1. Buat Store

Bikin file stores.js di folder src:

import { writable } from 'svelte/store';
// Inisialisasi store dengan array kosong
export const tasks = writable([]);

2. Gunakan Store di Komponen

Contoh di TodoForm.svelte:

<script>
        import { tasks } from '../stores.js';
        let newTask = '';
        function addTask() {
                if (newTask.trim()) {
                        tasks.update(currentTasks => [
                        ...currentTasks,
                        { id: crypto.randomUUID(), text: newTask, completed: false }
                        ]);
                        newTask = '';
                }
        }
</script>

3. Akses Data di `TodoList.svelte`

Gunakan $ untuk auto-subscribe ke perubahan store:

<script>
        import { tasks } from '../stores.js';
</script>
<ul>
        {#each $tasks as task (task.id)}
        <!-- tampilkan task -->
        {/each}
</ul>

Keunggulan Store:

Reaktivitas Otomatis: Komponen langsung update ketika store berubah.
Akses Global: Bisa dipakai di mana saja tanpa kirim props.
Fitur Lanjutan: Ada readable dan derived store untuk kasus kompleks (docs).

Contoh Hapus Task dengan Store:

// Di komponen hapus:
tasks.update(tasks => tasks.filter(t => t.id !== taskId));

Tips:

Untuk proyek kecil, store biasa cukup. Kalau butuh struktur kompleks, coba Svelte context API.
Gunakan localStorage + store untuk persistensi data (contoh: svelte-persisted-store).

Menambahkan Fitur Edit Tugas

Cara Tambah Fitur Edit

Agar task bisa diedit, kita perlu:

Mode Edit – Toggle antara tampilkan teks dan input field.
Simpan Perubahan – Update state saat teks diubah.

1. Modifikasi `TodoList.svelte`

Tambahkan logika edit langsung di komponen item:

<script>
        export let task;
        let isEditing = false;
        let editedText = task.text;
        function saveEdit() {
                if (editedText.trim()) {
                        task.text = editedText; // Langsung mutasi object (karena pakai store, reactivity tetap bekerja)
                        isEditing = false;
                }
        }
</script>
<li>
        {#if !isEditing}
                <span on:dblclick={() => isEditing = true}>{task.text}</span>
        {:else}
                <input
                        type="text"
                        bind:value={editedText}
                        on:blur={saveEdit}
                        on:keydown={(e) => e.key === 'Enter' && saveEdit()}
                        autofocus
                />
        {/if}
</li>

2. Handle di Store (Opsional)

Kalau pakai Svelte store, bisa update via tasks.update():

tasks.update(currentTasks =>
        currentTasks.map(t =>
                t.id === task.id ? { ...t, text: editedText } : t
        )
);

Fitur Tambahan

Double-click untuk edit – Lebih natural daripada tombol.
Simpan otomatis – Trigger saat input kehilangan fokus (on:blur) atau tekan Enter.

Referensi:

Tips:

Pakai autofocus biar input langsung fokus saat mode edit aktif.
Tambahkan escape untuk cancel edit:

on:keydown={(e) => e.key === 'Escape' && (isEditing = false)}

Mendesain Antarmuka Pengguna

Tips Desain To-Do List yang Minimalis

Gunakan Scoped CSS Di Svelte, style di dalam komponen otomatis terisolasi. Contoh di TodoList.svelte:

<style>
        ul {
        list-style: none;
        padding: 0;
        }
        li {
                display: flex;
                gap: 10px;
                padding: 8px;
                border-bottom: 1px solid #eee;
        }
        .completed {
                color: #999;
                text-decoration: line-through;
        }
</style>

Tambahkan Transisi Svelte punya modul bawaan untuk animasi. Contoh fade saat task ditambah:
Responsif dengan CSS Grid/Flexbox Atur layout form agar adaptif:
Dark Mode Sederhana Pakai CSS variables dan class dinamis:
Debugging Langsung di Browser
- Pakai Svelte DevTools untuk inspeksi komponen dan state.
- console.log di <script> akan muncul di terminal (Vite) dan browser console.
Error Handling Sederhana Tambahkan validasi di form:

<script>
        import { fade } from 'svelte/transition';
</script>
{#each $tasks as task (task.id)}
        <li transition:fade>...</li>
{/each}

Dokumentasi: Svelte Transitions

form {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
}
input[type="text"] {
        flex-grow: 1;
}

<script>
        let darkMode = false;
</script>
<main class:dark={darkMode}>
        <button on:click={() => darkMode = !darkMode}>
                Toggle Dark Mode
        </button>
</main>
<style>
        .dark {
                background: #222;
                color: white;
        }
</style>

Inspirasi Desain:

Tips:

Pakai :global() untuk style yang perlu memengaruhi child komponen.
Library UI seperti Skeleton UI bisa mempercepat development.

Testing dan Debugging

Testing Proyek To-Do List

Unit Testing dengan Jest Install svelte-jester dan @testing-library/svelte:

npm install --save-dev jest svelte-jester @testing-library/svelte

Contoh test untuk store:

import { tasks } from '../stores.js';
test('menambah task baru', () => {
        tasks.set([]);
        tasks.update(t => [...t, { id: '1', text: 'Test', completed: false }]);
        expect($tasks.length).toBe(1);
});

{#if error}
        <p class="error">{error}</p>
{/if}
<script>
        let error = '';
        function addTask() {
                if (!newTask.trim()) error = 'Task tidak boleh kosong!';
                else error = '';
        }
</script>

Tools Penting

ESLint – Cek error sintaks (pakai plugin eslint-plugin-svelte).
Playwright – Testing end-to-end (contoh setup).

Tips Debugging:

Gunakan @debug di Svelte untuk track perubahan variabel:

{@debug tasks}

Jika state tidak update, pastikan ada assignment (tasks = [...]) untuk trigger reactivity.

Referensi:

Deploy Proyek ke Web

Deploy To-Do List ke Web

Build Produksi Jalankan perintah ini untuk generate file statis:Hasilnya ada di folder dist/—siap diupload ke hosting apa pun.
Pilih Hosting Gratis
- Vercel: Auto-deteksi proyek Svelte, cukup drag-drop folder dist/.
- Netlify: Hubungkan repo GitHub/GitLab, aktifkan auto-deploy.
- GitHub Pages: Upload manual atau pakai action (contoh workflow).
Deploy dengan Adaptor Khusus (Opsional) Jika pakai SvelteKit, install adaptor untuk target hosting:

npm run build

npx svelte-kit sync
npm install @sveltejs/adapter-vercel --save-dev

Lalu update svelte.config.js.

Tips Penting

Cek Routing Jika pakai client-side routing, pastikan hosting support SPA fallback (misal: tambah file _redirects di Netlify dengan /* /index.html 200).
Env Variables Simpan sensitive data di .env dan tambahkan ke ignore Git. Contoh konfig di Vercel:

VITE_API_KEY=xxx

Optimasi Performa
Aktifkan compression di hosting (biasanya otomatis).
Cek skor di PageSpeed Insights.

Referensi:

Svelte Deployment Guide
Vercel Svelte Tutorial

Bonus: Untuk simpan data user, gabungkan dengan Supabase atau Firebase.

Membangun Proyek To-Do List dengan Framework Svelte ternyata nggak serumit kelihatannya! Dari setup awal pakai Vite, bikin komponen modular, sampai deploy ke web, Svelte bikin semuanya jadi simpel dan efisien. Kamu bisa eksplor fitur keren seperti store, transitions, dan reactivity tanpa ribet konfigurasi. Hasilnya? Aplikasi ringan dengan kode yang mudah dibaca. Cocok banget buat yang pengen belajar frontend modern. Sekarang tinggal dikembangin lagi—tambah fitur due date, kategori, atau sync ke database. Happy coding! 🚀

Pengenalan Framework Svelte

Persiapan Alat dan Bahan

Struktur Dasar Proyek To Do List

Membuat Komponen Utama

1. TodoForm.svelte (Input Task Baru)

2. TodoList.svelte (Daftar Task)

Gabungkan di App.svelte

Menambahkan Fungsi Tambah dan Hapus

Mengelola State dengan Svelte Store

1. Buat Store

2. Gunakan Store di Komponen

3. Akses Data di TodoList.svelte

Keunggulan Store:

Menambahkan Fitur Edit Tugas

Cara Tambah Fitur Edit

1. Modifikasi TodoList.svelte

2. Handle di Store (Opsional)

Fitur Tambahan

Mendesain Antarmuka Pengguna

Tips Desain To-Do List yang Minimalis

Testing dan Debugging

Testing Proyek To-Do List

Tools Penting

Deploy Proyek ke Web

Deploy To-Do List ke Web

Tips Penting

1. `TodoForm.svelte` (Input Task Baru)

2. `TodoList.svelte` (Daftar Task)

Gabungkan di `App.svelte`

3. Akses Data di `TodoList.svelte`

1. Modifikasi `TodoList.svelte`