Empat belas tahun lalu, seorang Programmer brilian bernama John Resig membuat sebuah library javascript yang kemudian kita kenal dengan slogannya :

Hanya dalam beberapa tahun setelah library ini dibuat, jQuery telah digunakan oleh 62.7% dari satu juta website terpopuler di dunia, dan 17% dari semua website di internet (2015), makin hari jQuery menjadi sangat populer dan mendominasi dunia Frontend development.

namun sekarang jQuery harus merelakan kepopulerannya karena telah direbut oleh React JS, sebuah UI Framework buatan Facebook yang mencuri perhatian para Frontend Developer karena mengusung beberapa konsep baru seperti Component, Virtual DOM, JSX, State, dll.

Grafik jQuery vs React

kalau kamu lihat grafik diatas, dalam beberapa tahun terakhir, popularitas jQuery semakin menurun, sebaliknya React semakin menanjak keatas bahkan mengalahkan rekan-rekan modern framework lainnya seperti Vue dan Angular. era ini adalah era kedua dalam dunia Frontend Development, dan React merupakan penguasa era tersebut 😜

Lalu apakah di masa yang akan datang, era tersebut mampu mempertahankan status Quo-nya atau malah tergantikan oleh era baru?

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 Compoenent sifatnya Independen dan bisa direusable sehingga kita bisa membangun UI yang kompleks dengan lebih mudah.

Seperti namanya “Svelte” dalam bahasa inggris yang artinya “Ramping/Langsing”, untuk mencapai hasil yang sama, jumlah code yang ketika tulis menggunakan Svelte jauh lebih ramping dibandingkan Framework lainnya, selain itu bundle size nya juga jauh lebih kecil.

Tidak seperti UI framework yang lain, Svelte ini menggunakan pendekatan yang benar-benar radikal dalam membangun User Interface, kebanyakan UI Framework seperti React & Vue melakukan pekerjaanya di browser (runtime) sedangkan Svelte akan mengcompilenya saat kita mem-build-nya (compile-time). dan tidak menggunakan teknik Virtual DOM diffing seperti pada React & Vue, secara efisien Svelte akan meng-update UI aplikasi kita ketika ada perubahan state. lalu muncul pertanyaan, “lah kalo gak pake Virtual DOM ntar aplikasinya jadi lemot dong?” tenang, kita akan membahasnya nanti mengenai mitos Virtual DOM yang “katanya” lebih cepat daripada real DOM 😉

Apakah kita benar-benar butuh untuk mempelajari dan menggunakan tool lain untuk membangun Web Application ?

Mengorbankan waktu dan tenaga kita untuk mempelajari UI framework baru hanya akan bermanfaat jika framework tersebut bisa memberikan benefit yang besar bagi kita, mungkin seperti jumlah code yang kita tulis menjadi lebih sedikit untuk meraih hasil yang sama, atau mungkin pekerjaan yang dilakukan framework tersebut saat runtime untuk mencapai hasil yang sama lebih sedikit sehingga meningkatkan performa, atau mungkin juga ukuran bundle nya lebih sedikit sehingga website kita bisa lebih cepat ketika diakses oleh user. dan kabar baiknya ketiga benefit diatas dimiliki oleh Svelte 🥳📯

Kebanyakan framework seperti React, Vue, dll mengikut-sertakan code runtime yang cukup besar di production bundle untuk mendukung fitur-fitur mereka, tapi Svelte bukanlah runtime framework tetapi compile-time framework.

Kalau React mendefinisikan componentnya menggunakan ekstensi .jsx dan Vue menggunakan ekstensi .vue Svelte UI Component didefinisikan menggunakan ekstensi .svelte di dalamnya bisa terdapat code HTML, CSS, dan Javascript. nah Svelte akan meng-compile file2 .svelte menjadi file .js dan .css , ada banyak benefit yang bisa kita dapatkan, salah satunya: ukuran bundle aplikasi kita tidak bengkak karena Svelte tidak mungkin memasukkan code untuk melakukan Virtual DOM, dll. Svelte hanya memasukkan code fitur di Svelte yang hanya kita gunakan saja.

Svelte akan menghasilkan ukuran bundle yang relatif lebih kecil daripada UI framework lainnya, sehingga waktu yang dibutuhkan Browser untuk men-download assets aplikasi kita menjadi lebih cepat.

Perbandingan Bundle Size

Grafik diatas adalah perbandingan ukuran bundle pada Framework2 UI dalam membuat aplikasi RealWorld, RealWorld adalah sebuah aplikasi blog seperti Medium. data diatas saya peroleh dari sini : https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/

bisa kita lihat Svelte memiliki ukuran bundle paling kecil cuma 9.7 KB 😲

• Angular : 149.3 KB

• React + Redux: 193 KB

• Vue: 41.8 KB

• Svelte: 9.7 KB

Perbandingan Line of code

Svelte hanya membutuhkan sedikit kode untuk mencapai hasil yang sama, kita bisa lihat perbandingannya pada grafik diatas :

• Angular : 2146 line

• React + Redux: 2050 line

• Vue: 2076 line

• Svelte: 1116 line

Lebih sedikit code untuk dibaca artinya lebih sedikit code juga untuk dipahami, ini juga berarti lebih sedikit ruang bagi bugs untuk bersembunyi 🤣

Sebelum membahas tentang Reactivity tanpa Virtual DOM pada Svelte, kita harus tau dulu apa itu Virtual DOM.

Pada kebanyakan UI Framework seperti React & Vue, mereka menggunakan Virtual DOM untuk mengoptimasi pembaruan pada real DOM (Document Object Model) ketika terjadi perubahan data. alurnya kira-kira seperti ini :

1. ketika state berubah, framework tersebut akan membuat sebuah snapshot UI baru pada memory.

2. kemudian membandingkan snapshot tersebut dengan snapshot sebelumnya. proses ini dinamakan diffing.

3. hanya bagian UI yang berbeda yang akan di-update ke real DOM.

Ya memang sih itu lebih efisien daripada meng-update seluruh UI langsung ke real DOM, tapi untuk membandingkan snapshot lama dan snapshot yang baru tentu juga akan membutuhkan waktu. dan bukankah lebih efisien jika kita bisa langsung menuju ke step ke-3 ? Svelte can do that! 😉

Reactivity adalah kemampuan untuk memperbarui User Interface ketika ada perubahan state pada aplikasi agar antara data dan UI aplikasi menjadi sinkron.

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 tersebut diubah nilainya maka secara otomatis kolom total juga akan ikut berubah nilainya.

Reactivity pada aplikasi Spreadsheet

nah, Svelte memberikan Reactivity dengan cara melacak perubahan pada top-level component variables (state), jika terdapat perubahan maka Svelte akan melakukan rerendering, tapi ngga seluruh component dirender ulang, dengan cerdas Svelte hanya akan merender bagian tertentu saja yang menggunakan state tersebut.

itu artinya Svelte bisa bekerja lebih sedikit dan efisien dalam menjaga UI agar tetap sinkron dengan state aplikasi dibandingkan UI Framework lainnya yang menggunakan Virtual DOM seperti React &Vue.

ini adalah contoh Reactivity pada Svelte :

Copy
1// javascript biasa :
2let price = 1000;
3let quantity = 2;
4let total = price * quantity; // 2000
5-- kemudian kita ubah variabel quantity
6quantity = 4;
7console.log(total); // tetap 2000
8
9---------------------------------------
10
11// Reactivity di Svelte :
12let price = 1000;
13let quantity = 2;
14$: total = price * quantity; // 2000
15-- kemudian kita ubah variabel quantity
16quantity = 4;
17console.log(total); // berubah jadi 4000

Beberapa hari lalu saya pernah baca blog tentang masalah performa pada aplikasi Tokopedia, dan menariknya tim engineering Tokopedia menggunakan Svelte sebagai solusinya, dari 320 kB (React) menjadi 37 kB (Svelte), performa auditnya mencapai angka 97 dan dapat interaktif dalam waktu 3.5 detik 😮 blognya bisa kalian baca disini : https://medium.com/tokopedia-engineering/achieving-90-mobile-web-performance-at-tokopedia-23f557d98d5

dalam presentasinya Rich Harris yang berjudul “Rethinking Reactivity”, disitu dia bercerita tentang masalah performa aplikasi yang telah disolve oleh Svelte, salah satuya adalah Stone, Sebuah perusahaan di Brazil yang membuat POS (Point of Sales) System dengan 200.000 device lebih, mereka telah mencoba membangun aplikasi menggunakan React, Vue dan UI Framework lainnya namun mereka masih belum puas dengan performanya, setelah mereka mencoba membangunnya menggunakan Svelte, Boom!! masalah performa tersebut berhasil teratasi 🥳 📯

Stone

Bagaimana dengan Concurrent mode (experimental) milik React ??? 🤔Mari kita coba bandingkan 😉

React Synchronus

Gambar diatas adalah React dengan mode normal (non-asynchronus) semakin kompleks data pada chart yang digenerate, form input tersebut mengalami lagging pada beberapa saat sehingga user tidak bisa mengetik.

React Debounced

Gambar diatas adalah React dengan teknik Debounced, ini untuk menghindari lagging pada form input dengan cara hanya akan men-generate grafik ketika user berhenti mengetik, ini teknik yang buruk bagi User Experience karena user ga bisa liat datanya langsung secara realtime.

React Asynchronus

Gambar diatas adalah React dalam mode Asynchronus, form input nya terlihat lancar-lancar saja dan chart tetap ter-update, tapi kalau kita perhatikan lebih teliti, chart yang di-update di background tetap saja ada sedikit lag ketika semakin kompleks.

Svelte Synchronus

Gambar diatas adalah performa Svelte dalam mode synchronus, semuanya terlihat lancar, baik pada form input-nya maupun pada chart-nya, mode synchronus aja udah cepet apalagi kalo pake mode asynchronus yah wkwk? :v

Ohya kamu juga bisa melihat benchmark perbandingan kecepatan antara Svelte dengan UI Framework lainnya disini : https://krausest.github.io/js-framework-benchmark/current.html

Perbandingan Kecepatan Startup

di situs tersebut masing-masing UI Framework akan ditest untuk merender tabel dengan 4 kolom dan 1000 baris, dan lagi-lagi Svelte lebih unggul dalam hal kecepatan 🥳

Efisiensi memori sangat berguna jika aplikasi kita berjalan di komputer lama atau mobile device yang cenderung memiliki resource kecil. di bawah ini adalah benchmark yang juga saya ambil dari situs diatas tentang perbandingan penggunaan memory pada beberapa UI Framework, dan dapat kita lihat kalau Svelte lebih efisien dalam penggunaan memory, mungkin itulah mengapa masalah performa pada aplikasi Stone diatas berhasil diatasi oleh Svelte.

Perbandingan Memory

Secara default styling component pada file .svelte tidak mempengaruhi styling component lain, jika ingin menggunakan Global styling, kita bisa menulis styling kita di file public/global.css

Svelte memberikan kemudahan dalam mengelola Form, kita hanya perlu mendeklarasikan state (variabel) dan tinggal di-bind ke form input, jika value inputnya kita ubah maka state nya juga ikut berubah, begitupun sebaliknya jika kita set state menggunakan assignment operator javascript, value di input juga ikut berubah.

Svelte akan memberikan Warning terkait dengan masalah Accessibility, misalnya jika kita lupa memberikan attribute alt pada tag img, ini membuat aplikasi yang dibangun menggunakan Svelte bisa dipakai oleh semua orang terutama orang2 yang mengalami disabilitas.

1. Komunitas Svelte masih sedikit jika dibandingkan dengan komunitas React, Vue, dan Angular.

2. Toolsnya masih sedikit (saat artikel ini ditulis Svelte belum punya Official CLI tools untuk developmentnya. dan juga belum ada ekstensi browser untuk melakukan debugging pada Svelte)

3. Belum banyak UI Component library untuk Svelte.

4. Tutorial Svelte dalam bahasa Indonesia masih sangat sedikit.

Sejauh ini kita telah mengenal apa itu Svelte dan apa saja benefit yang akan kita dapatkan jika kita menggunakannya, kekurangan Svelte (untuk saat ini).

sekarang muncul pertanyaan besar, Apakah Svelte akan menggantikan React seperti React menggantikan jQuery ? atau justru Svelte akan menjadi framework yang tidak populer dan ditinggalkan usernya seperti Mercury.js, IRiot.js, dll ? hmmm…

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! 😁 🙏

1. https://livebook.manning.com/book/svelte-and-sapper-in-action/chapter-1/v-4/19

2. https://en.wikipedia.org/wiki/JQuery

3. https://en.wikipedia.org/wiki/React_(web_framework)

4. https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/

5. https://svelte.dev/blog/virtual-dom-is-pure-overhead

6. https://svelte.dev/blog/svelte-3-rethinking-reactivity

7. https://medium.com/tokopedia-engineering/achieving-90-mobile-web-performance-at-tokopedia-23f557d98d5

8. https://www.reddit.com/r/sveltejs/comments/c8jycw/svelte_what_are_the_technical/

9. https://www.youtube.com/watch?v=qqt6YxAZoOc

10. https://www.youtube.com/watch?v=BzX4aTRPzno