Learning Svelte 101

What is Svelte

You’ve probably heard of the big three Frontend UI frameworks, React, Angular and Vue. Svelte is a new entrant into the space and has really been picking up steam among developers for its small bundle sizes and low learning curve.

Let’s Begin

When you first open the codesandbox you’ll be in index.js which is the entry point for Svelte into the DOM similar to ReactDOM.render in react or Vue.mount in Vue. We won’t be touching anything in this file.

Declaring Variables

One of the best parts of Svelte is you don’t have to do anything fancy to declare your variables, just use standard javascript. No useEffect or hooks or Data objects, just declare a variable and it is useable and if that variable is ever reassigned the template will update, easy. The reason this works is cause Svelte doesn’t have to build a framework that works during runtime, instead it compiles all your code into standard javascript which allows it to have the simpler syntax and small bundles.

<script>
const hello = "Welcome to Svelte"
const myVar = "I just declared this!"
</script>
<main>
<h1>{hello}</h1>
<h2>{myVar}</h2>
</main>

Props

Let’s create a new component with a file called Other.svelte. We can now import this in App, and we don’t even need to export the component from the other Svelte file, the compiler knows.

<script>
import Other from "./Other.svelte"
const hello = "Welcome to Svelte"
const myVar = "I just declared this!"
</script>
<style>
main {
font-family: sans-serif;
text-align: center;
}
</style>
<main>
<h1>{hello}</h1>
<h2>{myVar}</h2>
<Other />
</main>
<div>
<h1>Hello World</h1>
</div>
<script>
export let myProp
</script>
<div>
<h1>{myProp}</h1>
</div>
<script>
import Other from "./Other.svelte"
const hello = "Welcome to Svelte"
const myVar = "I just declared this!"
</script>
<style>
main {
font-family: sans-serif;
text-align: center;
}
</style>
<main>
<h1>{hello}</h1>
<h2>{myVar}</h2>
<Other myProp="cheese" />
</main>

Events and Reactive Data

Let’s create a reassignable variable using let, call it count and initialize it at 1

<script>
export let myProp
let count = 1
const handleClick = () => {
count += 1
}
</script>
<div>
<h1>{myProp}</h1>
<h2>{count}</h2>
<button on:click="{handleClick}">Add One</button>
</div>

Iterating over an array

The way you handle iterating in Svelte is actually more similar to templating languages like Jinja or Handlebars vs React with map or Vue/Angular with the for the directive.

<script>
export let myProp
let count = 1
const nums = [1, 2, 3, 4, 5, 6] const handleClick = () => {
count += 1
}
</script>
<div>
<h1>{myProp}</h1>
<h2>{count}</h2>
<button on:click="{handleClick}">Add One</button>
{#each nums as num}
<h1>{num}</h1>
{/each}
</div>

Bottom Line

Svelte is pretty easy to learn and it’s easy to see why it’s growing in popularity so quickly. Svelte also has it’s own Next/Nuxt like SSR/SSG framework called Sapper and a mobile app library called Svelte Native, Svelte is doing what it can to provide all the tools to compete with the big boys of Vue, Angular, and React.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.