Salah Satu hal yang membuat saya tertarik untuk mempelajari Svelte adalah “Reactivity” yang dimilikinya, pendekatan yang dilakukan Svelte untuk men-sinkronkan antara data dan UI itu agak berbeda dengan kebanyakan framework frontend lainnya seperti React dan Vue. Svelte tidak menggunakan Virtual DOM, dan sebagai gantinya ia membawa Reactivity dari Component API ke dalam bahasa javascript.

Slide Presentasi Rich Harris — “YGLF 2019 — Rethinking Reactivity

Buat kalian yang belum tahu, Svelte JS adalah sebuah UI Framework untuk membangun sebuah Web Application berbasis Javascript, sama seperti React, Vue, Angular, dkk. Svelte berfokus untuk membuat sebuah UI Component dan interaksinya, masing-masing Component sifatnya Independen dan bisa direusable sehingga kita bisa membangun UI yang kompleks dengan lebih mudah dengan cara meng-compose masing2 component seperti bermain lego 😉

Satu hal lain yang membuat Svelte ini unik adalah Svelte merupakan Compiler bukan Runtime Library, maksudnya apa ? kebanyakan UI Framework seperti React atau Vue melakukan pekerjaanya seperti dom diffing pada Virtual DOM di browser (runtime) sedangkan Svelte akan mengcompilenya menjadi vanilla js saat kita mem-build-nya (compile-time).

berkat compiler juga lah si svelte ini bisa membawa reactivity dari Component API ke dalam bahasa javascript. contohnya saat kita memperbarui state di React biasanya kita menggunakan this.setState atau useState hooks, nah kalau di Svelte, kita hanya perlu meng-assign variabel saja karena by default Svelte akan menganggap top-level variable sebagai state.

let status = 'pending';
status = 'success';

dari tadi kita berbicara mengenai reactivity, tapi apa sih sebenarnya reactivity itu? 🤓

Reactivity adalah kemampuan untuk memperbarui User Interface ketika ada perubahan data (state) sehingga antara data dan User Interface aplikasi menjadi sinkron. singkatnya UI aplikasi kita akan bereaksi terhadap perubahan data (state).

sebagai contoh, di aplikasi Spreadsheet kita buat kolom bernama total dengan formula perkalian antara price dan quantity, nilai kolom tersebut bergantung pada nilai kolom price dan quantity, jika kolom price atau quantity diubah nilainya maka secara otomatis kolom total juga akan ikut berubah nilainya.

contoh Reactivity pada aplikasi Spreadsheet

ngomong2 soal Reactivity, saya jadi inget sama React, apakah React itu Reactive? ❌😜

Mengapa johnlindquist (Founder egghead.io) mengatakan bahwa “React” adalah nama yang mengerikan untuk “React JS” ? hmmm… 😜

Pertama, kita harus tahu sedikit mengenai bagaimana Virtual DOM bekerja, ketika React melakukan rendering, React akan menyimpan salinan DOM atau bisa kita sebut Snapshot.

saat kamu mengubah state menggunakan this.setState atau useState hooks, React akan membuat snapshot baru kemudian membandingkan mana bagian berbeda dengan snapshot yang sebelumnya, bagian yang berbeda itulah yang perlu direrender. proses ini disebut DOM Diffing.

setelah React tahu bagian mana saja yang perlu direrender, maka React baru akan merendernya ke Real DOM.

lalu, apa yang terjadi jika kita tidak memberi tahu React secara eksplisit menggunakan this.setState atau useState hooks ketika ada data yang harus berubah ? ya Virtual DOM tidak akan ter-trigger untuk melakukan update UI and React will not react. 🤣🥁 (lihat contohnya dibawah, bagian Reactive Declaration)

ada 4 macam Reactivity, yaitu Reactive Assignments, Reactive Declarations, Reactive Statements, dan yang terakhir adalah Reactivity pada tipe data reference (Array & Object)

secara default, Top-level Variable yang kita deklarasi akan dianggap sebagai state oleh Svelte, jadi kalau kita ingin mengubah state, kita hanya perlu meng-assign atau memberikan nilai baru pada variabel tersebut menggunakan assignment operator seperti = += -= *= dll.

berikut ini adalah contohnya :

Reactive Assignments

data pada aplikasi kita mungkin bisa bergantung dengan data lain, misalnya kita punya variabel total, yang mana variabel total ini adalah hasil dari perhitungan variabel price dikalikan variabel quantity.

kalau pada React, setiap kali kamu merubah data price atau quantity, kamu juga harus meng-assign value baru ke dalam variabel total secara eksplisit seperti ini :

Not Reactive

tapi pada Svelte, kita punya $: 😉

tanda $: itu sebenernya cuma labels statement kalau di vanilla javascript, tapi oleh compilernya svelte, nilai dari variabel tersebut akan dianggap sebagai Reactive Values.

artinya, nilai dari variabel tersebut (total) akan terikat dengan nilai dari variabel dependensinya (price & quantity). Jadi, setiap kali ada perubahan nilai pada variabel price atau quantity, maka nilai dari variabel total juga akan ikut terubah secara otomatis.

Reactive Declarations

Selain untuk mendeklarasikan variabel, kita juga bisa membuat statement menjadi Reactive dengan $: lho! jadi, statement nya akan dijalankan setiap kali ada perubahan nilai pada variabel dependensi.

hal ini kita bisa manfaatkan untuk debugging dengan cara melacak setiap ada perubahan data atau state.

Reactive Statements
Copy
1$: console.log(state)

untuk menjalankan beberapa statement sekaligus, kita bisa memasukkan statement2 nya ke dalam curly bracket (kurung kurawal) seperti ini :

Reactive Statements
Copy
1$: {
2 console.log(state);
3 alert(state);
4}

a. Array — karena Reactivity pada Svelte di-trigger oleh assignment operator, maka kalau kita menggunakan Array methods seperti push() dan splice() itu tidak akan memperbarui UI.

solusinya, kita bisa meng-assign ulang variabel seperti ini :

Array
Copy
1let numbers = [1, 2, 3];
2
3function addNumber() {
4 numbers.push(numbers.length + 1);
5 numbers = numbers;
6}

untuk solusi yang kedua bisa seperti ini :

Solusi
Copy
1let numbers = [1, 2, 3];
2
3function addNumber() {
4 numbers = [...numbers, numbers.length + 1];
5}

Reactivity pada Array

b. Object — Seperti yang telah kita ketahui, reactivity di svelte di-trigger oleh assignment operator, jika kita mempunyai variabel obj2 yg me-reference pada variabel obj, dan kemudian kita coba modifikasi value dari obj2, maka variabel obj tidak ikut terubah.

agar variabel obj ikut terubah mengikuti variabelobj2, solusinya sama seperti pada Array, kita harus meng-assign ulang variabelnya.

Object
Copy
1obj = obj;

Reactivity pada Object

Sampai disini, kita sudah mengetahui apa itu Reactivity, jenis2-nya dan cara penggunaannya di Svelte. tapi ada satu hal lagi yang mungkin bikin kalian penasaran, how does it work?

Yep, $$invalidate();

function $$invalidate adalah rahasia dibalik reactivity pada Svelte, ketika suatu variabel di assign ulang atau dimutasi (jika object) maka Compiler Svelte akan membungkus statement tsb menggunakan function $$invalidate()

1. Memperbarui variabel pada $$.ctx

$$.ctx adalah konteks yang menjadi acuan untuk merender ke DOM. $$.ctx ini berisi variabel2 yang kita deklarasikan didalam tag script, variabel2 yang diassign ulang atau dimutasi (jika object) dan variabel2 yang digunakan di markup html.

2. Menandai variabel tersebut ke dalam $$.dirty

$$.dirty adalah sebuah object yang digunakan untuk melacak variabel mana yang mengalami perubahan nilai dan perlu diperbarui ke DOM.

3. Memanggil function schedule_update() ,untuk menentukan kapan DOM harus di-update.

4. terakhir, function $$invalidate akan mengembalikan nilai dari assignment.

agar lebih paham, perhatikan potongan kode berikut ini :

source code function $$invalidate

Oke mungkin itu saja yang bisa saya bagikan kali ini, kalau kamu merasa artikel ini bermanfaat silakan Like & Share artikel ini ke teman-teman kamu atau jika kamu punya pertanyaan, tulis aja di kolom komentar, Thank you! 😁 🙏

Referensi :

1. https://blog.logrocket.com/truly-reactive-programming-with-svelte-3-0-321b49b75969/

2. https://lihautan.com/compile-svelte-in-your-head-part-1/

3. https://lihautan.com/compile-svelte-in-your-head-part-2/

4. https://www.digitalocean.com/community/tutorials/svelte-reactivity-intro

5. https://www.youtube.com/watch?v=AdNJ3fydeao

6. https://svelte.dev/