Belajar Svelte - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Svelte! Series ini akan membawa kalian menguasai Svelte — compiler-driven framework JavaScript yang mengubah komponen deklaratif menjadi kode imperative dan ringan saat build — dari fondasi konsep sampai production readiness. Total ada 24 episode yang tersusun dari enam fase: pre-requisites, operational, workloads, networking, advanced, dan modern ecosystem.

Tapi sebelum menyentuh kode Svelte, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Svelte adalah compiler: setiap baris komponen yang kalian tulis diubah menjadi JavaScript murni saat build. Kalau fondasi JavaScript kalian rapuh, semua sintaks reaktivitas akan terasa seperti sihir, padahal semuanya adalah bahasa JavaScript biasa.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan Node.js, editor, dan tooling, lalu melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript Modern

Komponen .svelte pada dasarnya adalah HTML, CSS, dan JavaScript dalam satu file. Kalian wajib nyaman dengan markup semantik, layout dengan Flexbox dan Grid, serta sintaks ES6+: let dan const, arrow function, template literal, destructuring, async/await, dan ES modules.

Fondasi JavaScript yang wajib dikuasai

const nama = "Svelte"
const versi = 5
const sapaan = (nama, versi) => `${nama} v${versi}`
export default sapaan

const sapaan = (nama, versi) => ... adalah contoh arrow function plus template literal yang akan kalian lihat terus-menerus di kode Svelte modern. Jika sintaks di atas masih terasa asing, luangkan waktu untuk berlatih dulu di console browser sebelum melanjutkan.

#Konsep Reactive Programming dan Komponen

Reactive programming berarti UI secara otomatis mengikuti perubahan state. Kalian menulis declaration, bukan imperative DOM manipulation. Saat sebuah variabel berubah, tampilan yang bergantung padanya ikut diperbarui tanpa perlu document.querySelector dan update manual.

Kalian juga harus paham konsep component-based UI: sebuah aplikasi dipecah menjadi komponen kecil yang punya tiga bagian — script untuk logika, markup untuk tampilan, dan style untuk penampilan. Komponen bisa dipakai ulang dan menerima data lewat props. Ini pola yang sama seperti React dan Vue, tapi dengan filosofi compiler yang berbeda.

Sebagai latihan awal, coba gambarkan komponen sederhana di selembar kertas: kotak search, daftar hasil, dan tombol hapus. Memetakan bagian-bagian antarmuka ke komponen adalah skill yang akan terus kalian pakai sepanjang series.

#Command Line, Git, dan Package Manager

Seluruh workflow Svelte berjalan dari terminal: membuat project, menjalankan dev server, dan men-deploy. Kalian harus nyaman berpindah direktori, menjalankan perintah, dan membaca pesan error. Git juga wajib karena semua project serius butuh version control.

git init
git add .
git commit -m "chore: init project"
git push origin main

git init membuat repository lokal, lalu git add . menandai semua file untuk dikomit. Untuk package manager, series ini memakai npm, tapi konsep yang sama berlaku di yarn dan pnpm — ketiganya membaca berkas package.json yang sama.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS

Svelte dan SvelteKit berjalan di atas Node.js, jadi langkah pertama adalah menginstall Node.js LTS terbaru dari situs resmi atau via version manager seperti nvm. Versi LTS selalu paling stabil untuk development. Setelah terpasang, verifikasi:

node --version
npm --version

node --version harus menampilkan versi 20 ke atas, dan npm --version harus menampilkan versi npm yang menyertainya. npm sudah terbundle otomatis dengan Node.js, jadi tidak perlu menginstall terpisah.

#VS Code dengan Svelte Extension

Untuk editor, rekomendasi utama adalah VS Code dengan extension resmi Svelte for VS Code dari tim Svelte. Extension ini menyediakan syntax highlighting, autocompletion, dan diagnostics langsung di dalam file .svelte. Pasang juga Prettier dan extension ESLint agar format kode tetap konsisten.

Setelah extension terpasang, buat file uji bernama Coba.svelte dan pastikan editor mengenali sintaksnya. Jika syntax highlighting sudah muncul, editor kalian siap dipakai untuk seluruh series.

Jika kalian belum pernah memakai VS Code, luangkan sepuluh menit mempelajari shortcut dasar seperti palet perintah dan berpindah antar file. Kenyamanan editor berdampak besar pada produktivitas jangka panjang.

#Browser Modern dan Build Tools

Gunakan browser modern seperti Chrome, Firefox, atau Edge. Fitur yang paling penting: DevTools untuk inspeksi elemen, console untuk debugging, dan Network tab untuk memeriksa request. Svelte tidak butuh browser khusus, tapi DevTools adalah sahabat utama saat memecahkan masalah.

Untuk hardware, Svelte termasuk ringan: laptop dengan RAM minimal 8GB dan SSD cukup untuk seluruh series. Sistem operasi bebas — Windows, macOS, atau Linux — selama Node.js dan editor berjalan normal. Build tools seperti Vite dan SvelteKit akan kita bahas lebih dalam di episode 3.

Buka juga mode incognito saat menguji aplikasi kalian — beberapa cache dan ekstensi browser bisa menyembunyikan bug yang sebenarnya ada.

#Verifikasi Environment

Sebelum lanjut ke episode 1, pastikan semuanya siap dengan verifikasi cepat. Buka terminal dan jalankan ketiga perintah berikut:

node --version
npm --version
git --version

Jika ketiganya menampilkan versi tanpa error, environment dasar kalian sudah siap. Untuk memastikan toolchain berfungsi, buat satu direktori uji dan init Git di dalamnya seperti contoh di atas — ini sekaligus melatih alur yang akan dipakai terus sepanjang series.

Catat versi yang terpasang. Jika suatu saat project tidak berjalan, versi-versi ini adalah informasi pertama yang ditanyakan saat mencari bantuan.

Satu lagi: biasakan membaca pesan error sampai selesai, bukan hanya baris terakhir. Sebagian besar kesalahan di episode awal hanyalah Node atau npm yang belum terpasang dengan benar — dan pesan error terminal selalu memberi petunjuk.

#Penutup

Inti yang harus dibawa pulang:

• Kuasai HTML, CSS, dan JavaScript ES6+ karena Svelte adalah compiler yang mengubah semuanya menjadi JavaScript.
• Pahami reactive programming dan component-based UI sebagai pola pikir utama.
• Lancar dengan command line, Git, dan package manager (npm).
• Pasang Node.js LTS terbaru dan pastikan node --version berjalan normal.
• Gunakan VS Code dengan extension Svelte for VS Code serta Prettier.
• Verifikasi node, npm, dan git sebelum melangkah ke episode berikutnya.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Svelte — dari kelahiran Svelte sebagai compiler-driven framework, perbandingannya dengan React, Vue, dan Angular, hingga kemunculan SvelteKit untuk aplikasi full-stack. Pastikan environment kalian sudah siap, karena perjalanan Belajar Svelte baru saja dimulai!