Svelte Tutorial 1: Introduction to Svelte (English & Indonesia)

English

Svelte is a tool for building fast web applications. It's a competitor to React, Vue, Ember, Aurelia, and Angular, but it's better since it was compiled/errors checked at compile time before combined into a bundle.js file, not needing any virtual DOM/different template file/language like JSX, also because Svelte has the lowest learning curve among all. To learn more why Svelte is better than the rest, see Rich Harris' presentation about Rethinking Reactivity. To create a new svelte project use this command after you installed nodejs, npm, and npx:

npx degit sveltejs/template project1
cd project1
npm install # install dependencies
npm run dev

You can look at the result in the browser, and edit that project directly side by side (it has live reload). In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. Here are some basics in svelte:

How to declare and use variable

First, add a <script> tag to your component and declare a variable (name)

<script>
let name = 'world';
</script>

Then, we can refer to variable in the markup using curly braces.

<h1>Hello {name}!</h1>

We can also use curly braces to put any JS we want.

How to create dynamic attributes:

We can use variable to create dynamic attributes:

<script>
let src = 'tutorial/image.gif';
</script>
<img src={src}>

We can use variable to specify image source, so we can dynamically determine link source programmatically for example.

You can also use shorthand feature when variable name and attribute is the same, like this:

<img {src}>

Styling

Just like in HTML, you can add a <style> tag to your component:

<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>


<p>This is a paragraph.</p>

What is special in svelte is style is scoped within component so when you set <p> style in one component, it wont accidentally change <p> style elsewhere within your app.

Nested component

It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements.

For example we can have file Nested.svelte like this:

<p>This is another paragraph.</p>

Then we can use Nested component by importing it like this:

<script>
import Nested from './Nested.svelte';
</script>

Nested in this case can be anything, and totally independent to the file name (So you can name it anything, but it's a good practice to import with same name as the file name). And when we want to use it, just use it like you would when using predefined tags

<p>This is a paragraph.</p> <!-- normal predefined tag -->

<Nested/>                   <!-- your made up tag -->

Notice that even though both  <p> and <Nested> actually used same  <p> tag, but each style is independent as now its considered different component. One more thing to remember, tag name is case sensitive, so <Nested> not the same with <nested>

Unescaping HTML tags

Ordinarily, strings are inserted as plain text, meaning that characters like < and > have no special meaning. But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.

<script>
let str = `string contains <strong>HTML!!!</strong>`;
</script>

So instead of doing this:

<p>{str}</p>

In Svelte, you can do this with the special {@html ...} tag:

<p>{@html str}</p>

Indonesia

Svelte adalah alat untuk membuat web application secara cepat. Svelte adalah pesaing dari React, Vue, Ember, Aurelia, and Angular, tapi svelte kami nilai lebih baik karena dicompile dan dicek error nya saat compile, baru kemudian digabungkan dalam file bundle.js, dan tidak membutuhkan virtual DOM atau file/bahasa template yang berbeda seperti JSX, svelte juga termasuk yang paling mudah dipelajari dibanding yang lainnya. Untuk lebih meyakinkan kenapa Svelte lebih baik dari yang lain, kamu bisa tonton persentasi Rich Harris tentang Rethinking Reactivity. Untuk membuat project Svelte yang baru gunakan perintah ini sesudah kamu menginstall nodejs, npm, dan npx:

npx degit sveltejs/template project1
cd project1
npm install # install dependencies
npm run dev

Kamu bisa melihat hasil web mu di browser, dan meng edit project itu langsung secara berdampingan (Svelte punya live reload). Di dalam svelte aplikasi dibentuk dari satu atau lebih komponen. sebuah komponen adalah blok program yang berdiri sendiri dan bisa digunakan berulang kali, yang terdiri atas HTML, CSS dan Javascript yang saling berhubungan, dikumpulkan menjadi satu dalam file .svelte. Berikut adalah dasar-dasar dalam Svelte:

Cara mendeklarasi dan menggunakan variabel

Pertama, tambahkan tag <script> dan deklarasikan variabel (name)

<script>
let name = 'world';
</script>

Kemudian kita bisa menggunakan variabel di dalam markup menggunakan kurung kurawal.

<h1>Hello {name}!</h1>

Kita juga bisa menggunakan kurung kurawal untuk memasukkan program JS.

Cara membuat atribut yang dinamis

Kita bisa menggunakan variabel untuk membuat atribut yang dinamis:

<script>
let src = 'tutorial/image.gif';
</script>
<img src={src}>

Karena kita bisa menggunakan variabel untuk memasukkan alamat asal image, maka kita bisa mengatur alamatnya secara dinamis dalam pemrograman.

Kita juga bisa menggunakan cara singkat jika nama variabel dan nama atributnya sama, seperti ini:

<img {src}>

Styling

Sama persis seperti di HTML, kamu juga bisa menambahkan tag  <style> ke komponen yang kamu buat.

<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>

<p>This is a paragraph.</p>

Yang istimewa dari svelte adalah style yang kamu tambahkan akan dibatasi hanya di dalam komponen tersebut, jadi misal dalam contoh di atas, style warna ungu tidak akan merubah style <p> lainnya dalam aplikasi buatanmu.

Nested component

Untuk tujuan pembuatan aplikasi yang baik, alangkah baiknya apabila kita tidak memasukkan smua app kita dalam satu komponen saja, melainkan bisa dipecah-pecah menjadi beberapa komponen kecil yang bisa digunakan berulang kali apabila dibutuhkan di kemudian hari. Kita bisa import komponen yang sudah dibuat tadi dari file lain dan di include kan seperti jika kita meng include kan elemen.

Sebagai contoh jika kita mempunya file Nested.svelte yang isinya seperti ini:

<p>This is another paragraph.</p>

Maka kita bisa memasukkan komponen Nested dengan cara import seperti ini:

<script>
import Nested from './Nested.svelte';
</script>

Nama elemen Nested bisa saja dirubah dengan nama lain, jadi nama ini tidak berhubungan dengan nama file nya (tapi akan jadi kebiasaan yang lebih baik jika dinamakan sama saja dengan nama file nya, supaya tidak bingung sendiri begitu maksudnya). Kemudian jika mau menggunakan tinggal gunakan dengan cara yang sama seperti menggunakan tag HTML pada umumnya.

<p>This is a paragraph.</p> <!-- html normal -->

<Nested/>                   <!-- tag buatan sendiri -->

Perhatikan meskipun kedua <p> dan <Nested> sebenarnya sama2 menggunakan tag <p>, tapi style masing2 tidak akan saling mempengaruhi, karena sekarang mereka sudah dianggap sebagai komponen yang berbeda. Satu lagi yang harus diingat, nama komponen buatanmu sifatnya case sensitive, jadi <Nested>  tidak sama dengan <nested>

Unescaping tag HTML

Biasanya, string akan dianggap sebagai plain text, jadi jika di dalam string itu ada karakter seperti   < dan > maka tidak akan dianggap sebagai sesuatu yang istimewa. Tapi kadang kita memang ingin menganggapnya sebagai HTML dan memasukkan langsung ke dalam komponen. Sebagai contoh kata-kata yang dimasukkan mengandung tag <strong>, supaya tulisan jadi bold.

<script>
let str = `string contains <strong>HTML!!!</strong>`;
</script>

Maka daripada memasukkan variabel seperti biasa dengan kurung kurawal:

<p>{str}</p>

Di svelte kita bisa melakukan dengan tag {@html ...} seperti ini, maka tulisan akan mengandung bold di bagian yang ada tag <strong>:

<p>{@html str}</p>