Sign in Subscribe

Lihat gimana Svelte membantu kamu bikin aplikasi kontak.

Lihat gimana Svelte membantu kamu bikin aplikasi kontak.
Photo by Arturo Rivera/Unsplash

Halo! Kamu lagi nyari cara asyik buat bikin aplikasi web yang performanya ngebut dan kodenya gampang dipahami, terutama buat aplikasi simpel kayak daftar kontak? Kalau iya, kenalan yuk sama Svelte!

Dibandingkan framework JavaScript lain yang mungkin udah sering kamu dengar, Svelte ini agak beda. Dia bukan framework yang jalan di browser waktu runtime, tapi lebih mirip compiler. Artinya, pas kamu build aplikasi Svelte, Svelte bakal nerjemahin kode Svelte-mu jadi JavaScript "biasa" yang efisien banget, tanpa perlu tambahan runtime Svelte di browser. Hasilnya? Ukuran file lebih kecil dan performa lebih cepat karena nggak ada overhead kayak virtual DOM yang perlu diurusin.

Nah, buat bikin aplikasi kontak sederhana, Svelte itu cocok banget. Kenapa? Karena aplikasi kontak itu dasarnya cuma ngelola daftar data (kontak), nambahin data baru, mungkin ngedit atau nghapus, terus nampilin datanya dalam bentuk daftar. Svelte punya fitur reaktivitas bawaan yang bikin ngurusin data dan nampilinnya itu jadi gampang banget. Kamu nggak perlu pusing mikirin gimana caranya biar UI update otomatis pas data berubah, Svelte yang urusin itu.

Yuk, kita bedah gimana caranya Svelte ngebantu kamu bikin aplikasi kontak ini. Kita bakal mulai dari yang paling dasar sampai nanti aplikasi kontak kita beneran bisa nambahin dan nampilin kontak. Anggap aja ini tutorial santai tapi padat biar kamu langsung bisa praktek.

Persiapan Awal: Memulai Proyek Svelte

Sebelum nyelam lebih dalam, pastiin kamu udah punya Node.js dan npm (atau yarn/pnpm) terinstal di komputermu. Kalau udah, buka terminal atau command prompt, terus ketik perintah ini:

bash
npm create svelte@latest my-contact-app
cd my-contact-app
npm install
  • npm create svelte@latest my-contact-app: Ini perintah buat bikin proyek Svelte baru dengan nama my-contact-app. Kamu bakal ditanya beberapa opsi, pilih aja yang standar (misalnya, Skeleton project, No untuk TypeScript, No untuk ESLint, No untuk Prettier).
  • cd my-contact-app: Masuk ke dalam folder proyek yang baru dibuat.

npm install: Pasang semua dependency* yang dibutuhkan proyek.

Setelah semua beres, kamu bisa jalanin server development dengan perintah npm run dev. Buka browser ke alamat yang dikasih (biasanya http://localhost:5173), dan kamu bakal lihat halaman standar Svelte.

Mikirin Struktur Aplikasi Kontak Kita

Aplikasi kontak sederhana ini bisa kita pecah jadi beberapa bagian (komponen) biar lebih rapi dan gampang diurus:

  1. App.svelte: Ini komponen utama yang bakal jadi wadah buat semua komponen lain. Dia juga yang bakal megang data daftar kontak secara keseluruhan.
  2. AddContactForm.svelte: Komponen ini isinya form buat nginput data kontak baru (nama, nomor telepon, email, dll.). Nanti form ini bakal ngirim data kontak baru ke komponen induk (dalam kasus ini App.svelte).
  3. ContactList.svelte: Komponen ini tugasnya nampilin daftar kontak. Dia bakal nerima data daftar kontak dari induknya.
  4. ContactItem.svelte: Komponen ini bakal nampilin detail satu kontak aja. ContactList nanti bakal pake komponen ini berulang kali buat nampilin setiap kontak dalam daftar.

Data Kontak: Gimana Nyimpennya?

Di Svelte, data yang berubah dan mempengaruhi tampilan itu disebut state. Buat aplikasi kontak, state utamanya adalah daftar kontak itu sendiri, yang bisa kita simpan dalam bentuk array objek. Setiap objek di array itu mewakili satu kontak, isinya { nama: string, telepon: string, email: string, id: string }. Kenapa ada id? Biar gampang ngidentifikasi tiap kontak, apalagi kalau nanti mau ngedit atau nghapus. Kamu bisa pakai sesuatu kayak Date.now() atau library uuid buat bikin ID unik sederhana.

Di App.svelte, kita bisa inisialisasi state ini pake let:

svelte

  let contacts = []; // Array kosong di awal
Aplikasi Daftar Kontak

Tapi gimana caranya biar data contacts ini bisa diakses sama komponen lain (ContactList) dan gimana caranya komponen lain (AddContactForm) bisa nambahin data ke array contacts ini?

Svelte punya beberapa cara buat ngelola state antar komponen:

  1. Props: Kirim data dari komponen induk ke anak. App.svelte bisa ngirim contacts ke ContactList pake props.
  2. Event Dispatching: Kirim pesan atau data dari komponen anak ke induk. AddContactForm bisa ngirim data kontak baru ke App.svelte pake event.
  3. Stores: Ini semacam "tempat penyimpanan" data yang bisa diakses dari komponen manapun di aplikasi. Untuk aplikasi sederhana kayak gini, stores bisa jadi pilihan yang bagus biar AddContactForm dan ContactList nggak harus "ngobrol" lewat App.svelte terus. Tapi, untuk contoh ini, kita pake cara 1 & 2 dulu biar kebayang alurnya dari induk ke anak dan sebaliknya.

Mari kita fokus ke cara 1 & 2 dulu karena lebih fundamental buat aplikasi kecil.

Mulai Bikin Komponen AddContactForm.svelte

Kita bikin komponen form dulu buat nambahin kontak baru. Bikin file baru src/lib/AddContactForm.svelte.

svelte

  import { createEventDispatcher } from 'svelte';<p>// Data buat input form
  let name = '';
  let phone = '';
  let email = '';</p><p>// Dispatcher buat ngirim event ke komponen induk
  const dispatch = createEventDispatcher();</p><p>function handleSubmit() {
    // Bikin objek kontak baru
    const newContact = {
      id: Date.now().toString(), // ID sederhana
      name: name,
      phone: phone,
      email: email
    };</p><p>// Validasi sederhana (contoh: nama gak boleh kosong)
    if (!name) {
      alert('Nama wajib diisi!');
      return;
    }</p><p>// Kirim event 'addcontact' ke komponen induk
    // Data yang dikirim adalah objek newContact
    dispatch('addcontact', newContact);</p><p>// Reset form setelah data dikirim
    name = '';
    phone = '';
    email = '';
  }

  
    Nama:
    
  
  
    Telepon:
    
  
  
    Email:
    
  
  Tambah Kontak

Penjelasan kode AddContactForm.svelte:

import { createEventDispatcher } from 'svelte';: Ini kita impor fungsi buat bikin event dispatcher*. let name = '', phone = '', email = '';: Kita bikin variabel lokal buat nyimpen nilai dari setiap input* form. Pake let biar variabel ini bisa diubah-ubah. const dispatch = createEventDispatcher();: Bikin instance dispatcher*.

: Ini elemen form-nya. on:submit itu buat nangkep event submit form. |preventDefault itu modifier di Svelte yang otomatis manggil event.preventDefault(), jadi halaman nggak refresh* pas form disubmit. handleSubmit itu fungsi yang bakal dipanggil. : Ini elemen input nama. bind:value={name} itu binding dua arah khas Svelte. Artinya, nilai input ini selalu sinkron sama variabel name. Kalau inputnya diketik, variabel name otomatis ke-update. Kalau variabel name diubah (misalnya pas reset form), nilai inputnya juga otomatis ke-update. Keren kan? required itu atribut HTML biasa buat validasi dasar dari browser*. function handleSubmit() { ... }: Fungsi ini jalan pas form disubmit. Dia ambil nilai dari variabel name, phone, email (yang udah sinkron sama input berkat bind:value), bikin objek newContact, validasi sederhana, terus panggil dispatch('addcontact', newContact);. 'addcontact' ini nama event yang kita bikin sendiri, dan newContact itu data yang mau kita kirim bareng event* itu. Terakhir, kita reset variabel name, phone, email jadi string kosong, dan berkat bind:value, input form-nya juga otomatis kosong lagi.

Penjelasan kode ContactItem.svelte:

export let contact;: Ini cara Svelte mendefinisikan props*. Variabel contact ini akan diisi datanya dari komponen induk yang memakai ContactItem. Kita pake export di sini. {contact.name}, {contact.phone}, {contact.email}: Ini cara nampilin nilai variabel di Svelte (interpolasi teks). Kalau nilai contact berubah dari induknya, tampilan di sini otomatis update*. {#if contact.phone} dan {#if contact.email}: Ini conditional rendering di Svelte. Konten di dalamnya cuma bakal ditampilin kalau kondisi contact.phone atau contact.email itu truthy* (misalnya, bukan string kosong).

Penjelasan kode ContactList.svelte:

  • import ContactItem from './ContactItem.svelte';: Impor komponen ContactItem biar bisa dipake di sini.

export let contacts = [];: Definisiin props* contacts. Ini array yang bakal nerima data kontak dari induknya. Dikasih nilai default [] biar aman kalau belum ada data.

  • {#if contacts.length === 0}: Cek kalau array contacts kosong. Kalau ya, tampilin "Belum ada kontak".
  • {:else}: Kalau nggak kosong, baru jalanin yang ini.

{#each contacts as contact (contact.id)}: Ini looping* di Svelte. Dia bakal jalanin blok kode di dalamnya buat setiap item di array contacts. contacts: Array yang mau di-loop*. * as contact: Setiap item di array sementara disimpan di variabel contact buat dipake di dalam loop. (contact.id): Ini penting banget! Ini namanya key di Svelte (mirip kayak di React atau Vue). Ngasih key unik buat setiap item di list bikin Svelte lebih efisien waktu mau update daftar (misalnya nambahin atau nghapus item). ID kontak yang kita bikin tadi (Date.now()) itu cocok banget buat jadi key*. : Di dalam loop, kita pake komponen ContactItem. Sintaks {contact} itu singkatan dari contact={contact}. Kita ngirim objek kontak yang sedang di-loop sebagai props* ke komponen ContactItem.

Menyambungkan Semuanya di App.svelte

Terakhir, kita gabungin semua komponen ini di App.svelte dan atur gimana datanya mengalir.

Edit file src/App.svelte:

svelte

  import AddContactForm from './lib/AddContactForm.svelte';
  import ContactList from './lib/ContactList.svelte';<p>// State utama: array daftar kontak
  let contacts = [
    // Contoh data awal (opsional)
    { id: '1', name: 'Budi Santoso', phone: '08123456789', email: '[email protected]' },
    { id: '2', name: 'Siti Aminah', phone: '08567890123', email: '[email protected]' }
  ];</p><p>// Fungsi buat nambah kontak baru
  function handleAddContact(event) {
    const newContact = event.detail; // Data kontak baru ada di event.detail
    contacts = [...contacts, newContact]; // Tambahkan kontak baru ke array
    // Penting: Untuk array, cara update-nya gini. Svelte mendeteksi perubahan
    // pada variabel <code>contacts</code> ketika nilainya <em>diganti</em> dengan array baru
    // (meskipun isinya nambah). Kalau cuma <code>contacts.push(newContact)</code>,
    // Svelte TIDAK akan mendeteksi perubahan secara otomatis.
  }</p><p>// Reaktivitas Svelte: Contoh, menghitung jumlah kontak
  $: totalContacts = contacts.length; // Ini sintaks reaktivitas ($:)</p><p>
  Aplikasi Daftar Kontak Keren  Total Kontak: {totalContacts}

Penjelasan kode App.svelte:

  • import AddContactForm from './lib/AddContactForm.svelte'; dan import ContactList from './lib/ContactList.svelte';: Mengimpor komponen yang sudah kita buat.

let contacts = [...]: Mendefinisikan state* contacts yang jadi sumber data utama. Kita bisa isi data awal di sini kalau mau. function handleAddContact(event) { ... }: Fungsi ini bakal dipanggil pas event addcontact dari AddContactForm terpicu. Data yang dikirim bareng event* (newContact) ada di event.detail. contacts = [...contacts, newContact];: Ini bagian paling Svelte-nya. Kita tidak pake contacts.push(newContact). Di Svelte, untuk array dan object yang punya state (let), deteksi reaktivitasnya berjalan ketika variabel tersebut ditugaskan dengan nilai baru. Dengan ...contacts (spread syntax) kita bikin array baru yang isinya semua elemen dari array contacts yang lama, terus ditambah newContact. Karena variabel contacts ditugaskan dengan array baru, Svelte tahu ada perubahan dan otomatis update* UI yang bergantung pada variabel contacts (dalam hal ini ContactList). $: totalContacts = contacts.length;: Nah, ini sintaks reaktivitas Svelte yang paling khas: $: (labeled statement). Baris ini artinya, setiap kali nilai contacts berubah, Svelte akan otomatis menghitung ulang contacts.length dan meng-update variabel totalContacts. Dan kalau variabel totalContacts ini dipakai di template HTML (misalnya di

Total Kontak: {totalContacts}

), Svelte juga otomatis akan me-render* ulang bagian itu. Simpel banget, kan? Nggak perlu useEffect atau semacamnya. : Di sini kita pakai komponen AddContactForm dan mendengarkan event addcontact yang dikirimnya. Pas event* itu terjadi, fungsi handleAddContact dipanggil. : Di sini kita pakai komponen ContactList dan mengirim array contacts sebagai props. Karena variabel contacts itu reaktif (bisa berubah), pas nilainya berubah (setelah nambah kontak baru), Svelte otomatis ngasih tahu ContactList buat update* tampilannya.