Kenalin, Svelte

Svelte seperti rekanya: React dan Vue , merupakan “framework” untuk membangun UI (User Interface) berbasis Javascript. Sebelum menguliti lebih jauh , mari kita kenalan sama Svelte.

Hi, Aku Svelte

https://svelte.dev/

Svelte muncul pada tahun 2016 yang dikembangkan oleh Rich Harris, cara kerja Svelte : dengan mengoptimasikan HTML, CSS dan Javascript dan menyusunya (compile) menjadi satu.

Svelte mengusung bundler bawaan : Rollup dan Webpacker, kita bisa memilih build tool yang dipakai. Banyak opini di forum maya mempertanyakan apakah svelte ini sebuah kompiler atau library, karena svelte memiliki idiom tersendiri yang bukan standar Javascript.

Bila sedang memiliki waktu luang, bisa menonton video ini untuk pemaparan tentang Rethinking Reactivity :

Komponen

Bagaimana membuat komponen di svelte ? — seperti pada umunya komponen dapat menjadi halaman atau komponen UI. Untuk membuat komponen pada svelte cukup seperti kerangka ini:

<script>
  // kode JS disini 
  let username = "yoghaswara"
</script>
<!-- HTML disini -->
<h1>{username}</h1>
<!-- username dituker dengan nilainya -->
<style>
 /* CSS disini */
 h1{
  background-color: #000;
  color: #fff;
 }
</style>

Simpan dengan akhiran .svelte (contoh: profile_github.svelte)— komponen seperti membuat HTML biasa, bukan ? langkah ini bisa dicoba melalui svelte REPL.

Svelte REPL

Untuk memanggil komponen ke halaman utama,buka App.svelte (ini adalah berkas entry main) dan di isi dengan kode ini:

<script>
 import Profile from './profile_github.svelte'
</script>
<Profile></Profile>

Berikut hasilnya:

Hasil dari komponen profile

Props

Prop adalah cara untuk komponen kita menerima nilai dari luar, seperti parameter pada fungsi pemrograman prosedural. Karena secara tidak langsung komponen kita berdiri sebagai objek, mari kita ripiu balik ke komponen Profile(profile_github.svelte).

Untuk membuat props, kita perlu meng-export variable yang akan menjadi props. sebagai contoh :

export let username = "yoghaswara"
// let username = "yoghaswara"

Snipet diatas kita meng-export variable username dan membuat nilai string “yoghaswara” menjadi nilai bawaan bila props tidak diberikan, nama variable ini akan dipakai sebagai parameter saat komponen ingin dipakai.

<Profile username="arawsahgoy"></Profile>

Hasil tampilan komponen dengan props

Deklarasi Reaktif

Props dan Deklarasi Reaktif bila dalam di struktur organisasi bagaikan divisi eksternal dan divisi internal. Sebelumnya kita sudah membahas props untuk berurusan dengan nilai dari luar komponen , maka sekarang kita berurusan dengan nilai didalam komponen.

Deklarasi Reaktif mengikat nilai kedalam variable secara reaktif (Subjek), jadi kita bisa merubah nilai dan nilai itu diterapkan ke semua pemanggilanya (Observer).

Berikut contoh :

<script>
 let nama = "Kakak"
 $: sapaan_1= "Pun10," + nama
 $: sapaan_2 = "Pardon, " + nama
</script>
<input bind:value={nama}>
<p>
 Sapaan 1: 
 {sapaan_1}
</p>
<p>
 Sapaan 2: {sapaan_2}
</p>

<input bind:value={nama} />, bind:value berguna untuk mengikat nilai pada tag input dengan variable yang ada : nama .

Variable dengan awal $: menandakan variable reaktif yang akan berubah mengikuti subjeknya (variable nama), jadi ketika nama berubah maka variable sapaan_1 dan sapaan_2 akan mengikuti — seperti perubahan reaktif pada spredsheet.

Hasil dengan nilai bawaan variable nama

Percobaan Sederhana

Percobaan ini akan membuat halaman profile sederhana yang akan mengakses informasi profile github dari username yang disertakan.

Untuk mengakses endpoint github : https://api.github.com/users/<username>, kita mengunakan fungsi fetch . Fetch mengembalikan Promise maka perlu ditangani dengan penantian(async dan await).

async function getProfile(){
   const res = await fetch("https://api.github.com/users/"+username_github);
   return await res.json()
}

kemudian kita buat komponen Profile (profile.svelte):

<script>
 export let username_github;
 async function fetchGithub(){
    const response = await fetch('https://api.github.com/users/'+ username_github)
    return await response.json()
 }
</script>

Setelah itu kita buat bagian untuk memproses hasil dari fetch diatas.

Svelte menyediakan fungsi #await fungsi ini serupa dengan await().then, namun pada HTML langsung berikut ini strukturnya :

<!-- kondisi promise -->
{#await <promise>}
  <!--Penantian disini-->
{:then data}
  <!-- kalo sukses-->
{:catch error}
  <!--kalo gagal-->
{/await}

Sekarang kita buat , untuk memrosesnya.

{#await fetchGithub()}
 <p>...Penantian</p>
{:then data}
 <img src={data.avatar_url} alt="avatar_url" />
 <h1>{data.name}</h1>
 <h2>@{data.login}</h2>
 <p>Bio{data.bio}</p>
{:catch error}
 <p>Galat!</p>
{/await}

Tambahkan komponen Profile ke Entry (App.svelte). Penamaan Komponen ditentukan saat kita import , ada baiknya nama komponen dibuat berasal tujuanya.

<script>
 import Profile from "./profile.svelte"
</script>
<Profile username_github="<username github mu>"/>

Hasilnya:

Hasil akses endpoint github

Sedikit kita beri bumbu CSS.

<style>
 img {
  border-radius: 100%;
  border: 10px solid;
  margin-right: 3rem;
 }
 p{
  max-width: 40%;
 }
 .flex-col{
  display: flex;
  padding-top: 3rem;
  padding-left: 3rem;
 }
</style>

Ta-da

Hasilnya

Alamat replnya: https://svelte.dev/repl/641e5723cf9641678b13862b92720739?version=3.23.0

Penutup

Berikut pengenalan dan contoh praktik singkat dengan Svelte, bila senggang bisa berkunjungin github saya untuk lihat mainan saya — polow juga ya hehe : https://github.com

P̶o̶s̶t̶i̶n̶g̶a̶n̶ ̶b̶e̶r̶i̶k̶u̶t̶n̶y̶a̶ ̶s̶a̶y̶a̶ ̶a̶k̶a̶n̶ ̶m̶e̶m̶b̶a̶h̶a̶s̶ ̶b̶a̶g̶a̶i̶m̶a̶n̶a̶ ̶m̶e̶m̶b̶u̶a̶t̶ ̶p̶r̶o̶j̶e̶k̶ ̶s̶e̶d̶e̶r̶h̶a̶n̶a̶ ̶d̶e̶n̶g̶a̶n̶ ̶S̶v̶e̶l̶t̶e̶.̶

Membuat Projek Svelte

Sekian,

Terima Kasih