Component Based pada Svelte

Salah satu keunggulan framework JavaScript adalah penggunaan konsep component based.

Apa itu?

Jadi, component based adalah menjadikan satu bagian dari satu website itu jadi satu tag tertentu. Contohnya aja seperti ini:

<script>
  import BagianHeader from "./Header.svelte";
  import BagianSidebar from "./Sidebar.svelte";
  import BagianMain from "./Main.svelte";
</script>

<BagianHeader />
<Sidebar />
<BagianMain />

Jadi, satu halaman website itu bisa kita pecah-pecah sehingga nggak membuat kita ribet ngetik kode HTML yang sama secara berulang-ulang. Jadi, di sini kita tinggal membuat kode header, sidebar, dan main secara terpisah.

Sebenarnya konsep component based ini seperti yang aku bilang tadi, berlaku di semua framework JavaScript, nggak cuma Svelte. Cuma, karena aku lebih lama menggunakan Svelte, dan lebih asyik menggunakannya, makanya artikel ini akan lebih mengarah ke sana.

Apa sih kelebihan Svelte?

Yang membuat Svelte istimewa adalah sintaksnya yang hanya seperti HTML, CSS, JS. Bahkan, pemula di dunia HTML aja bisa langsung menggunakan Svelte. Contohnya aja seperti kode di bawah ini:

<script>
  let nama = "Dewa";
  let umur = 20;
</script>

<h1>Halo, {nama}!</h1>
<p>Umurmu sekarang {umur} tahun.</p>

<style>
  h1 {
    color: red;
  }
</style>

Bisa kita lihat pada contoh Svelte di atas. Udah kayak HTML biasa kan? Jadi, untuk pemula sekalipun sangat bisa menggunakannya. Jadi, bisa langsung kunjungi aja websitenya Svelte kalau kamu tertarik dengannya.