Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)
 

Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita.

Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba. 

Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini.

Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi (Curriculum Director di Hacktiv8 Indonesia).

Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka (user interface) yang dibuat oleh Rich Harris. Namun menurut penulisnya, Svelte Js ini bukan sekedar framework JavaScript seperti framework lainnya. 

Tapi lebih dari itu Svelte JS ini seperti compiler, maksudnya kode yang kita tulis di Svelte dikonversi menjadi JavaScript yang sudah dioptimasi.

Salah satu fitur kuncinya Svelte Js ini adalah ukuran filenya kecil karena sudah dikompilasi dan dioptimasi oleh Engine Framework itu sendiri. Dan hebatnya lagi, prosesnya ini tidak menggunakan Virtual Dom.

Berikut Ini Kelebihan Framework Svelte JS :

• Menulis Lebih Sedikit Code
• Tidak Menggunakan Virtual DOM
• Sangat Reactive

Berikut ini merupakan Langkah-langkah menginstal Svelte JS :

(Note : Untuk proses penginstalannya, disarankan menggunakan alat bantu degit untuk membangun kerangka aplikasi. Node dan npm juga merupakan keharusan untuk menggunakan framework ini.)

-        #1 Install Node, NPM dan NPX bagi yang belum install. Karena saya belum install NPX maka saya install dengan cara membuka command prompt (CMD) atau untuk mac dan Linux bisa gunakan terminal.

Ketik : npm install -g npx

 

 

 

 

#2 Install Degit, Ketik : npm install -g degit Di CMD-nya.

 

 

 

#3 Kemudian install Svelte JS, ketik npx degit sveltejs/template my-svelte-project atau bisa download langsung filenya.

Atau untuk mempermudah, kita bisa mendownload file Svelte JS ini di website resminya (https://svelte.dev/) 

Setelah di install / di download silahkan masuk di foldernya, buka CMD, ketikan perintah npm install dan untuk menjalankan project ketik npm run dev

 

 

 

 

 

 

Kalau tampilannya begini, silahkan buka browser dan jalankan di http://localhost:5000. Maka akan muncul tampilan seperti dibawah ini.

 

 

 

Untuk mengubah tulisannya, teman-teman bisa modifikasi file App.svelte dan Main.jsdidalam folder src

# File App.svelte

#File Main.js

 

 

 

 

 

 

Jika dijalankan, tampilannya seperti dibawah ini :

Sahabat Coders juga bisa memodifikasi sesuai dengan kemaunnya masing-masing, yang terpenting adalah kita memahami struktur folder dan filenya, kemudian apa yang harus di import, variable apa yang diambil, variable ini diambil dari mana. 

Itu semua harus dipelajari sebelum membuat project dengan Svelte ini, biar tidak kebingungan saat menggunakannya.

Sekian dulu artikel kali ini, semoga apa yang kami bagikan bermanfaat.

#StayCodingSmileAndHappy