Get you started with the rising star in just a few minutes.

“ Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.”

or so says the description on their site. but what exactly does it mean? Without going into too many details, it moves the heavy lifting from runtime to compile time. (as in, when you npm build or yarn build )

This tutorial will give you a basic understanding of Svelte by building a simple Todo application according to these user stories:

The app shows me a placeholder when there are no todos When I click to add a todo without a value, the app doesn’t let me. When I click to add a todo with a value, the app adds a todo and resets the value. I can see a summary of how many todos I have, and how many of those are done I can cross off Todos by clicking on their checkbox, marking them done or undone

Photo by Luca Bravo on Unsplash

The Setup

Unlike most other frameworks, Svelte doesn’t have a CLI tool or a scaffolding generator of sorts to help you get started. But to make things easier, we will take a starting template and use degit to fetch it.

requirements for this tutorial:

Node 8 or above

npm 5.2 or above

go to your desired folder, and type in the cmd the following

npx degit sveltejs/template svelte-todo

cd svelte-todo

now that we have a rollup-powered template for a svelte app, we can get to work.

Structure

Please take a look at main.js , it should look like this:

a basic svelte setup

I want you to notice 3 things:

.svelte, if you look closely, you’ll see we imported a .svelte file, this signifies a svelte component, and on line 3, we initiate a new instance of it. target, the HTML element the svelte app will hook on to. If you come from react it is like the <div id="root"> you give to ReactDOM to render props, some components can receive some data, or properties from their parents. From here we can supply those to our component outside the context of svelte (like we will do shortly), seeing as it has no parent.

Now I want you to look into App.svelte , I’m sure you have a lot of questions but let us start from the structure, a .svelte file looks like the following:

<script>

// code

</script> <style>

// css

</style> <!-- one or more html/svelte tags of your choosing -->

The script tag holds regular Javascript, the style tag contains within the stylings (which can also be pre-processed if you want to write sass or something else, but I will not cover that here). Anything besides the script and style tags will be the template of the component we are making.

note: the order doesn’t matter

Props

Now a few of you have noticed the elephant in the room.

“Huh, this is odd, why do I export let name; ?”

That is how we define a property or a prop in svelte. remember the value we gave to props in main.js ? that name is directly bound to this name.

to see this in action, proceed to type the following into the cmd while in the svelte-todo directory to run the development server, it comes pre-configured for hot-reloading.

yarn dev

after it finishes building and serving go and take a look at http://localhost:5000/

props are defined by stating export let [PROPNAME] inside your component.

and then can be provided to Svelte components in a few ways. The first is the one you already saw, the other is passing it as a value to an HTML attribute, in a manner such as this:

<PersonComponent title={name} {age} bind:shouldSleep={sleepy} bind:happy />

title={name} passes name to the prop title

passes to the prop {age} is just shorthand for age={age} to be used when the prop of the child and the state of the father share a name (and they will, many times)

is just shorthand for to be used when the prop of the child and the state of the father share a name (and they will, many times) bind:shouldSleep={sleepy} bind will be explained later, but in short, it just means we can change this value from within the child component.

bind will be explained later, but in short, it just means we can change this value from within the child component. bind:happy is more synthetic, this time for bind:happy={happy} .

After they are supplied, when accessed inside the component, our prop will hold a value given from above.

for example, if I give a Robot component activated={true} then when I access activated inside Robot , the value will be true .

The child does not know his age without his father telling him, happened to me last month.

Styles

Isn’t that pretty? :) Go to main.js and change the name to your name and go see the results.

Now delete everything in App.svelte because you didn’t EARN this hello world.

Instead of that, add a <main> tag and write inside “Hello World” yourself.

and to make it undeniably yours, add some gradient background to the HTML tag. To do that I will have to admit that I lied to you when I said that style holds CSS because it actually holds CSS that is also compiled! Svelte automatically scopes all the styles to each component, so no need for BEM or other scoping methodologies, but to reach the html tag we will need to get out to the global scope. Luckily, we can use the :global(element) signifier to place a style on the global scope of our app, now, we have app.svelte look like this:

Don’t copy my colors, they’re ugly and yours are better

Components

Ok, very cool, but it's not a todo app. So let's go further:

The first thing we want to do is go into src and create a new folder named components and in it, create Todo.svelte

in Todo.svelte add the following, we will cover everything there, don’t worry

Wow ok, show us like 3295 new concepts in one go why won’t you.

Now, this is not a javascript course so I won’t go into things like reduce , mutability, events, one line if statements, or javascript labels. But everything about svelte will be explained. going line by line, we first encounter the very odd, but actually completely valid javascript label $: , in svelte that signifies a reactive statement. it can be either on a single line as shown, or as a block statement, and it will re-evaluate or re-run if any of the contained variables change, so in this line we just calculate how many todos are done.

Note that you do not need to declare ‘amount’ beforehand!

If you come from any other popular framework, you will notice I actually directly mutate our state. While usually a big no-no, this is how it is done in svelte (of course you can implement your own immutable way, but that's beside the point), also notice that I don’t use todos.push(newTodo) but rather re-assign todos. This is due to how svelte decides when to update. Svelte will only update on assignments. which will also mean that this:

const family = { father: {name: "Jonathan"}}

const parent = family.father

parent.name = "Nathan"

will not trigger an update since we did not reassign family.

Next, we investigate the odd pattern thing we see in our template. that is a “svelte each else” block. There are many kinds of blocks and you should take a look at the svelte docs to know them all, all you need to know this one iterates over an array, todos , and gives us access to each value separately, as todo , and returns the template within for each of them and if the array is empty, it displays a fallback. If you are familiar with javascript, Think of it as similar to this:

if (arr.length < 0) return <Placeholder />

return arr.map(item => <Item {item} />)

Lastly, we arrive to on:[event] and bind:[attribute] , which live right at the bottom, as a refresher, I am talking about these:

<button on:click={addTodo}>add todo</button>

<input bind:value placeholder="Your Todo Here" />

the first being our event hook, which simply means “on this trigger, do that”. In this case, “on click do addTodo ”, which is a function we defined earlier in the script tag. The second creates a two-way binding for the value given, that way when you type, the value automatically updates. If you type inside “Do the dishes”, value will become “Do the dishes”.

We are almost there, we can create todos and even show them! But there is no way to cross them off as done.

To achieve that, create another file called TodoItem.svelte in the components folder, and (without copy-pasting my code!) do the following:

export a variable called todo like you saw in App.svelte before add a div containing a labeled checkbox with a bound checked value to todo.done have the label contain todo.text. don’t forget to place the value in brackets to signify its a js value and not a text value {thing} . just like you used bind, add a class:done to the label that is equal todo.done , this one is a challange. Go on ahead and read up on it in the docs, don’t feel bad if you don’t get it, it will come with time. add a style tag, and add styling for a class named ‘done’.

Now, let's compare notes:

I added a bit of styling, but I do encourage you to style the app by yourself (which is why I omitted the style tag from my Todo).

If you succeeded, good job! You made your first real svelte component on your own! and if you didn’t, don’t worry, you’ll have plenty of chances.

The last thing we need is to place our brand new TodoItem into our Todo.

go back to Todo.svelte and add in the script tag an import statement: import TodoItem from './TodoItem.svelte' , go to the template and replace {todo.text} with <TodoItem bind:todo /> . This sends todo as a prop named todo to TodoItem, this is what will be inside the exported todo variable we declared in TodoItem earlier. Why bind:todo and not just {todo}?

(psst. Notice how both are actually shorthand for bind:todo={todo} and todo={todo} respectively)

That is because we want to change the ‘done’ value on the todo inside the TodoItem checkbox. You should end up with something like so:

and that's it! While alien and unique, svelte is very simple at its core. No fancy architecture, no stupid gimmicks, a just-what-you-need approach. looking at you, ANGULAR. to learn more please head to the Svelte website. Happy hacking!