Svelte: Framework Frontend di Masa Depan


Apa itu Svelte?

Svelte adalah framework JavaScript untuk menulis komponen antarmuka atau user interface yang muda digunakan untuk pemula. Framework ini di rilis pada tanggal 26 November 2016 oleh Rich Harris.

Bagaimana Cara Svelte Bekerja?

Svelte menganut pendekatan “compiler-based framework”, yang berarti kompilasi kode terjadi pada saat waktu pembangunan (build time), berbeda dengan framework tradisional yang melakukan proses rendering di sisi klien (client-side rendering). Ketika seorang pengembang menulis kode dalam Svelte, mereka membuat komponen seperti yang dilakukan dalam framework lainnya. Namun, di belakang layar, Svelte tidak memasukkan banyak library atau runtime seperti halnya framework lain. Sebaliknya, Svelte mengonversi kode tersebut menjadi kode JavaScript murni yang optimal dan efisien.

Mengapa Harus Menggunakan Svelte?

Terdapat tiga hal utama yang membuat mengapa Anda harus menggunakan Svelte sebagai framework frontend projek Anda.

  • Kode yang singkat

Menulis kode yang singkat dari biasanya akan menghemat waktu Anda, mengurangi bug, dan membuat kode lebih mudah dibaca. Dengan menggunakan Svelte, Anda tidak perlu menulis kode yang panjang. Sebagai contoh kode hello world di bawah:

  • Tidak ada virtual DOM

Svelte adalah sebuah compiler, yang berarti pengguna tidak perlu mengimpor perpustakaan ke browser untuk menjalankan kode Svelte. Sebaliknya, file JavaScript sederhana yang dihasilkan dimuat di halaman untuk merender aplikasi. Semua pembaruan pada objek dilakukan selama waktu kompilasi. Fitur ini membantu Svelte mengurangi overhead yang disebabkan oleh virtual DOM. Selain itu, dengan tidak memerlukan muatan penuh perpustakaan, ukuran file dapat berkurang secara signifikan, yang sangat bermanfaat untuk perangkat seluler.

  • Reaktif

Svelte disebut “reaktif” karena kemampuannya untuk secara otomatis memperbarui tampilan aplikasi ketika ada perubahan pada data yang terkait. Ini berarti bahwa penggunaan Svelte memungkinkan pengembang untuk menciptakan aplikasi web yang responsif dan dinamis tanpa harus menulis kode tambahan secara manual untuk mengelola pembaruan tampilan. Dengan paradigma reaktivitasnya, Svelte memungkinkan pengembang untuk fokus pada logika aplikasi, sementara kerangka kerja secara otomatis menangani pembaruan tampilan yang sesuai dengan perubahan data. Hal ini membuat pengembangan dengan Svelte menjadi lebih efisien dan intuitif, serta menghasilkan pengalaman pengguna yang lebih baik secara keseluruhan.

Referensi

  • https://www.educative.io/answers/what-is-svelte
  • https://icreativelabs.com/blog/svelte-framework-frontend-yang-menghasilkan-kode-javascript-yang-optimal-dan-efisien