⏰ Svelte Crash Course (in 10 pics!)
Tags: javascript, svelte, webdev, beginners
Published: 2019-10-19 19:58:42

*Originally posted on Twitter as a thread: [https://twitter.com/hexrcs/status/1185186492982943744](https://twitter.com/hexrcs/status/1185186492982943744)*

---

### Huge Update: Video Version Now Available!

👉 **[YouTube Playlist](https://www.youtube.com/playlist?list=PLyNmzPg2z6OiXylVCmsUOpaXdZm7lrzCt) - Only 13 minutes in total!** 🥳

---

Always wanted to check out Svelte (aka. "the next big thing in web dev") but never got time for it? ⏰

🔥 I've got a 10-minute crash course for you! 👇

(Spoiler alert: Svelte is so intuitive and easy to use that you may feel like you already know it! 🥳)

## 1 - How Svelte works

- Compiler: Doesn't ship a Svelte "library" to users, but build-time optimized plain JS
- Components: App is made up of composable UI elements
- Reactive: Event/User interaction triggers chain of state changes, auto-updating components throughout the entire app

![How Svelte works](https://i.imgur.com/gEKNr2S.png)

## 2 - UI Is a Component Tree

A *component* defines how your app should interpret some abstract "state" values, so that it can turn them into DOM elements in your browser, and ultimately pixels on your screen.

![UI Is a Component Tree](https://i.imgur.com/PVb4NIr.png)

## 3 - The Anatomy of a Svelte Component

Each `.svelte` file contains a single component, consisting of 3 parts:

- `<script>` is component logic in JS
- `<style>` is CSS styling, scoped and applied to only the current component
- Svelte template, based on HTML but can use custom components and inline logic (like JSX)

![The Anatomy of a Svelte Component](https://i.imgur.com/ZZvHUCb.png)

## 4 - The Svelte Template

The Svelte template allows us to use our own custom components in addition to HTML elements. The `.svelte` file extension is optional if there's no ambiguity, but the first letter of a custom component MUST be in uppercase.

We can use JS expressions inside curly braces `{ }`.

![The Svelte Template](https://i.imgur.com/rQUIWsK.png)

## 5 - Setting "Props"

A common way to "control" how a child component behaves is to pass data into it as props (properties).

To accept a prop, expose a variable with `export`. It's important to use `let` because `const` is not reassignable.

Setting a prop is just like doing regular HTML.

![Setting "Props"](https://i.imgur.com/JtHdsPk.png)

## 6 - Updating Component States

User actions trigger events. `on:` lets us listen to events and fire functions to update states. State changes will auto-update the UI.

Data generally flows from a parent to a child, but we can use `bind:` to simplify the state-update logic by allowing two-way data flow.


![Updating Component States](https://i.imgur.com/j3MARwh.png)

## 7 - `$:` Reactive Statements

"Reactive statements" are those statements marked by `$:`.

Svelte analyzes which variables they depend on. When any of those dependencies changes, the corresponding reactive statements will be rerun. Very useful for declaring derived states, or triggering "side effects".

![Reactive Statements](https://i.imgur.com/CUjXeFs.png)

## 8 - Reactive State "Store"

A reactive "store" makes it easy to share states across many components. It can exist in a separate JS file. To create a store, just wrap `writable` around a value.

In a component, we prefix store names with a `$` in order to directly use or update them. Compiler magic!

![Reactive State "Store"](https://i.imgur.com/kHV9MTq.png)

## 9 - Conditional Rendering And Lists

We can conditionally render elements with Svelte's template via `{#if}` and optionally `{:else}`.

To render everything in a list, we have `{#each}`.

Remember to always close a block with `{/if}` or `{/each}`!

(Should've used `<ol>` in the example, but I wanted to show how index- access works.)

![Conditional Rendering And Lists](https://i.imgur.com/lkdkmAR.png)

## 10 - Elegant Async/Await

It's super easy to do asynchronous stuff like API requests with Svelte.

We can simply `{#await}` a Promise to resolve, displaying a *"loading"* placeholder before the result is ready.

Note that we await the Promise in the template section, so no `await` keyword in `<script>`.

![Elegant Async/Await](https://i.imgur.com/6OPtzdV.png)

## BONUS - Animated Transitions

Svelte comes with neat animated transitions built-in. Try giving your components a `transition:fly` property! There're also other types like fade, slide, etc. You can also use `in:` `out:` to separately define intro/outros.

Attached to the transition prop are the params.

{% youtube EML2l8GHGW0 %}

## 👆 That's All, Folks!

That's it - everything you need to get started with Svelte! 😁

We covered a lot in this crash course, from the most fundamental concepts to topics that might even be considered intermediate or advanced in other frameworks (eg. API requests and animated transitions).

Now it's your turn to play with Svelte and build something cool. The [Svelte REPL](https://svelte.dev/repl) is a great place to start!

Have fun! 🥳

(Thread crash course format inspired by [@chrisachard](https://twitter.com/chrisachard) 😁 Check out his excellent React/Redux, Git crash courses!)

## PS

Because Svelte is so expressive, I [joked the other day](https://twitter.com/hexrcs/status/1180226461665566721) that Svelte devs count "characters of code", instead of "lines of code"...

True that! Here are a few tweet-sized Svelte applets Tomasz Łakomy ([@tlakomy](https://twitter.com/tlakomy)) and I ([@hexrcs](https://twitter.com/hexrcs)) have been playing with -

{% twitter 1180150776624291846 %}

{% twitter 1183106114273107969 %}

So, what's the most complex Svelte app that we can fit in a tweet? 😁

&nbsp;

**Like this post?**

*I'll be posting more on Twitter: [@hexrcs](https://twitter.com/hexrcs)*<br />*You can also find me at my homepage: [xiaoru.li](https://www.xiaoru.li)*<br />