Learn Svelte in under 3 minutes

December 28, 2019

The majority of people in The State of JavaScript 2019 said that they didn't know Svelte but wanted to learn it. That's why I'm going to teach you its basics in under three minutes.

What is Svelte?

Svelte is an alternative to frontend frameworks like React and Vue. Per its homepage, it doesn't have boilerplate, and it lets you use vanilla HTML, CSS, and JavaScript to write your components. It compiles your code into tiny, framework-less vanilla JavaScript, and it doesn't require state management libraries.

The core concepts

To create a Svelte component, just give a file the .svelte extension and shape it like this:

<script>
</script>

<style>
</style>

<div>
</div>

Svelte will automatically scope the JavaScript and CSS to the component. For instance, the CSS inside the style tags won't affect other parts of your application. You can use curly brackets to reference variables in your HTML:

<script>
	let name = 'Mark'
</script>

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

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

You can pass props from parents to children:

<!-- Parent.svelte -->
<script>
	import Child from './Child.svelte'
</script>

<Child name="Mark" />

<!-- Child.svelte -->
<script>
	export let name
</script>

<div>I am {name}!</div>

You can also use conditional blocks:

<script>
	let user = true
</script>

{#if user}
	<div>Hello user!</div>
{:else}
	<div>You are not signed in.</div>
{/if}

And you can loop through arrays with each:

<script>
	let personalLinks = [
		{ name: 'Makoto', site: 'https://example.com' },
		{ name: 'Futaba', site: 'https://example.com' },
		{ name: 'Sojiro', site: 'https://example.com' }
	]
</script>

<ul>
	{#each personalLinks as link}
		<li>
			<a href={link.site}>Go to {link.name}'s site</a>
		</li>
	{/each}
</ul>

Svelte can also handle state:

<script>
	let enabled = false

	function toggle() {
		enabled = !enabled
	}
</script>

<button on:click={toggle}>
	...
</button>

In my opinion, those are the concepts you'll find yourself using every day. Of course, Svelte has more features, but this tutorial simply covers the basics. Now let's talk about its benefits compared to a framework like React.

Svelte compared to React

Svelte's benefits are best understood by comparison:

React interprets your application's code at runtime in the user's browser. This means that when your application first loads, the user's browser needs to interpret and then run the code. You may see a drop in performance because of this. In addition, React relies on a virtual DOM.
Svelte interprets your application's code at build time so the user's browser doesn't have to do as much work. Svelte has a smaller footprint (less boilerplate, less generated code, less files). Its CSS is automatically scoped per component, and it does not rely on a virtual DOM.

Here's a side-by-side comparison of their performance:

On the left, we have the React version, running in prod mode. On the right, Svelte (in dev mode, because I forgot to build it. Oh well.) Notice the huge gap in the React version whenever you change the count. With Svelte? Honey badger don't care. pic.twitter.com/lBB1cQ3kSE
— Rich Harris (@Rich_Harris) November 30, 2019

Another good comparison is to look at the code you must write to create the same component. In React, this is how you would create a button that (1) accepts a prop, and (2) counts upward when you click it:

// Counter.jsx
import React, { Component } from 'react'
import styles from './Counter.module.css'

class Counter extends Component {
	state = {
		count: 0
	}

	increment = () => {
		this.setState({
			count: this.state.count + 1
		})
	}

	render() {
		const { count } = this.state
		const { text } = this.props
		return (
			<button onClick={this.increment} className={styles.button}>
				{count} {text}
			</button>
		)
	}
}

export default Counter

/* Counter.module.css */
.button { background: red; }

And with React Hooks:

// Counter.jsx
import React, { useState } from 'react'
import styles from './Counter.module.scss'

function Counter({ text }) {
  const [count, setCount] = useState(0)

  function increment() {
    setCount(count + 1)
  }

  return (
    <button onClick={increment} className={styles.button}>
      {count} {text}
    </button>
  )
}

/* Counter.module.css */
.button { background: red; }

This is how to write the same component in Svelte:

<!-- Counter.svelte -->
<script>
	export let text;
	let count = 0

	function increment() {
		count++
	}
</script>

<style>
	button { background: red; }
</style>

<button on:click={increment}>
	{count} {text}
</button>

Conclusion

Svelte is minimal, and I like that. While I don't know how it performs at scale, I'm pleased by what I've seen so far: it's incredibly performant and has an easy learning curve. If you want to try a project of your own, you can use Svelte's quickstart guide. And to learn more, check out its documentation or tutorial.