Jenuh dengan React atau Vue? Coba Svelte

5 min readAug 22, 2019

Mencoba Svelte untuk menghilangkan kejenuhan

Hallo semuanya, udah lama rasanya saya gak nulis lagi di Medium, jadi hari ini saya mau nulis dikit tentang Svelte.

Mungkin sebagian dari kita ada yang jenuh dengan React atau Vue dan pengen nyoba hal baru selain yang dua itu, dan disini kita bakalan nyoba Svelte.

Siapa tau kan setelah nyoba malah doyan pake Svelte nya dan akhirnya meninggalkan si React atau Vue 😆.

Sebelumnya pada udah tau kan apa itu Svelte? tau lah ya, kan lagi hype-hype nya dibicarain. Tapi kalo emang man teman belum tau, silahkan buka langsung aja dokumentasi Svelte nya.

Di dokumentasi nya Svelte teman-teman bisa baca apa itu Svelte dan kenapa Svelte ini beda dengan React atau Vue, yang paling mencolok sih Svelte gak pake Virtual DOM kek React/Vue.

Dah ah segitu aja intermezzo nya, kita langsung kotorin tangan aja buat nyoba Svelte nya.

Eh iya lupa, disini saya cuma bahas dasar-dasar dari Svelte nya aja seperti: component, props, events, logic, bindings, dan lifecycle. Jadi untuk yang lainnya bisa coba explore sendiri saja ya.

Install Svelte

Untuk cara install nya teman-teman bisa ketikan perintah ini di terminal.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install 
npm run dev

Atau kalo males nginstallnya bisa pake REPL dari Svelte nya.

Disini saya bakalan pake REPL dari Svelte buat ngetest dan jalanin script Svelte nya (lagi males nginstall di laptop sendiri ✌️), untuk link REPL nya bisa buka link ini.

Membuat Component

Untuk membuat component di Svelte sendiri, caranya gak ribet dan sederhana, seperti contoh potongan kode dibawah ini.

<script> 
  let name = 'Fulana bin Fulan';
</script><style> 
  h1 { 
   color: blue; 
   text-align: center;
  }
</style><h1> Hallo {name} </h1>

Gimana mudah kan? menurutku kalo udah paham JavaScript belajar Svelte gak bakalan terlalu susah.

Btw, untuk styling CSS nya itu sendiri udah otomatis ter-scope ya, jadi gak bakalan ber-efek ke component yang lain nya, good lah.

Menambahkan Props

Gimana kalo misalnya kita mau kirim data dari parent component ke child nya? Tenang, di Svelte ada juga yg namannya props, dan penggunaannya mudah banget.

// file: Name.svelte<script> 
  export let nama;
</script><h1> Hallo {nama} </h1>

Untuk membuat props kita tinggal tambahin export aja sebelum deklarasi variable nya.

Kemudian tinggal kita panggil aja di parent component nya, seperti ini.

<script>
  import Name from './Name.svelte';
</script><Name nama="Fulan" />

Mudah kan? lebih sederhana dari React atau Vue cara pake Props nya.

Logika di Svelte

Misalnya kita punya sebuah data berbentuk array of objects yg mana data tersebut mau kita looping semuanya, tapi jika dalam datanya ada yg namanya “Fulan” misalnya, maka mau kita tambahin kata “Hallo” di belakang namanya.

Untuk membuat kondisi percabangan dan perulangan di Svelte sendiri menggunakan script seperti ini.

{#if kondisi} 
  // data yg ingin ditampilkan
{/if}// Untuk looping sendiri bisa dituliskan seperti ini
{#each datanya as nama alias datanya} 
  // data yg ditampilkan
{/each}

Jadi untuk kasus diatas bisa kita tuliskan seperti berikut ini.

<script>
 let myFriends = [
   { id: 1, nama: 'Budi' },
   { id: 2, nama: 'Andi' },
   { id: 3, nama: 'Anto' },
   { id: 4, nama: 'Fulana' },
 ];
</script>{#each myFriends as friend}
 {#if friend.nama == "Fulana"}
   <p> Hallo {friend.nama} </p>
 {:else}
   <p> {friend.nama} </p>
 {/if} 
{/each}

Pertama memang agak sedikit kurang “srek” dengan cara pendeklarasian if dan looping nya, tapi setelah dipikir-pikir gak terlalu jelek juga sih hehe.

Walaupun emang masih terasa lebih nyaman yg di React dengan ternary operator dan map nya atau di Vue dengan v-if dan v-for nya.

Handle Events di Svelte

Untuk meng-handle event di Svelte sendiri caranya mudah banget.

Misalnya kita mau buat counter yang setiap button nya di klik bakalan nambah tuh nilainya.

<script>
 let count = 0; function handleIncrement() {
   count = count + 1;
 }
</script><p> Sudah diklik {count} kali! </p><button on:click={handleIncrement}> Tambah </button>

Untuk event yang lainya bisa kalian tulis seperti inion:namaEvent={handler}

Terus gimana caranya kalo kita mau buat custom event di Svelte? Mudah kok, kalian tinggal pake fungsi createEventDispatcher yang udah disiapin sama Svelte nya.

// File: CustomEvent.svelte
<script>
 import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); function sayHalo() {
   dispatch('hallo', {
     message: 'Hallo Semua!'
   })
 }
</script><button on:click={sayHalo}> Say Hallo </button>// File: App.svelte
<script>
 import CustomEvent from './CustomEvent.svelte'; function handleCustomEvent(e) {
   console.log(e.detail.message);
 }
</script><CustomEevent on:hallo={handleCustomEvent}/>

Untuk me-listen custom event yang sudah kita buat sebelumnya bisa menggunakan on:namaCustomEvent, dan pada custom event yg kita buat diatas mengirim data ke parent component ketika button nya diklik oleh user.

Form Input Bindings pada Svelte

Jika misalnya di Vue untuk membuat two-way data bindings pada form input kita menggunakan directive v-model, namun di Svelte lebih sederhana lagi, contohnya seperti ini.

<script>
 let nama = '';
</script><p>Halo {nama} </p><input bind:value={nama} placeholder="Masukan nama kamu">

Pada potongan kode diatas element input nya terikat dengan nilai dari variable nama, ketika di form input user mengetikan nama nya, maka variable nama pun akan ikut di update.

Untuk form input bindings yang lainnya, bisa teman-teman cek disini.

Lifecycle di Svelte

Seperti pada React atau Vue, di Svelte juga ada yang namanya lifecycle seperti ketika Mounted, Destroy dan Update.

Mounted atau onMount sendiri dijalankan setelah component di render ke dalam DOM, jadi kalo mau ambil data dari server, cocok ditaruh disini.

// Contoh mengammbil data dari layanan API Public Jsonplaceholder<script>
 import { onMount } from 'svelte'; let user;
 let url = 'https://jsonplaceholder.typicode.com/users/1'; onMount(async () => {
   const response = await  fetch(url);
   user = await response.json();
 });
</script><div>
  {#if user}
    <ul>
      <li>{user.name} & {user.email}</li>
    </ul>
  {:else}
    <p>Loading...</p>
  {/if}
</div>

Untuk lifecycle yang lainnya sepeti onDestroy, beforeUpdate, afterUpdate bisa teman-teman baca disini penjelasan dan cara pakai nya.

Rangkuman

Pada tulisan ini kita sudah belajar bagaimana cara membuat component, cara menggunakan props, handle events, form input bindings dan menggunakan lifecycle di Svelte untuk mengambil data dari server.

Untuk yang mau menyelam lebih dalam dan jauh lagi bisa buka dokumentasi dari Svelte nya, disana sudah ada turorial dan example dari setiap materi nya.

. . .

Mungkin ini aja yang bisa saya bagikan pada tulisan kali ini, semoga apa yang saya tulis ini bisa sedikit bermanfaat buat teman-teman semua yang lagi belajar Svelte seperti saya.