Introduction to Svelte

Introduction to Svelte

I wanted to try out Svelte¹ so I made a little clone of a game called Derivative Clicker². Following is a very quick presentation of what is Svelte (and how it compares to other reactive framework like React³, Angular⁴, etc) then a multi part tutorial on how to make a little game app with Svelte.

• introduction to Svelte
• part1: Start of the tutorial: making a Derivative Idle clone with Svelte
• part2: Going further with Svelte using components and props
• part3: Adding upgrade to the game

Svelte

Svelte is in competition with React, Angular and other framework to build reactive Single Page Application, but the difference is Svelte shifts the work from the browser to the compiler. It still delivers Reactive Single page application but with a very reduced size. Similar initiative can be found as well with Aurelia⁵.

The project went to version 3 a month ago (early may 2019), I think it’s a good time to try it out :)

PROS

The Svelte tutorial⁶ is great, it takes about an hour or so and is very well done. It uses the Svelte REPL⁷ and it introduces concepts very smoothly. Also it uses mostly the same concepts as React, Vue⁸ and Angular. If you know at least one of those you should pick it up quickly. (Component, reactive bindings, props, event forwarding, state store, component life cycle and slots to name a few concepts used) .

Also the Svelte website features a very nice REPL that you can use to test Svelte app without installing anything. When you are ready for the next step, the get started section⁹ is handy. It’s just a matter of cloning a template from a git¹⁰ repository and use the tools you are used to: npm¹¹ or yarn¹², webpack¹³, rollup¹⁴ or browserify¹⁵. And for the deployment, there are instructions a quick setup with Now¹⁶ and Surge¹⁷ or you can choose you favorite deployment option as you would for any other JS or TypeScript project.

Another pro, look at this article for a RealWorld benchmark to get a feel of how Svelte can be very slim compared to its rivals. (Note that the benchmark was done with Svelte v2, and right now it is already Svelte v3, so take it with a grain of salt).

CONS

I think it got traction recently but it still is not widely used so there not much educational material yet. If you can’t do with only the official tutorial and API documentation, you should wait a bit more.

Also Svelte miss features like routing (but this is apparently addressed in the sister framework Sapper¹⁸ which aims to be a replacement for Next.js¹⁹).

And last but not least, it has some weird syntax choices. The dollar sign $ has two different uses dependent on the context.

1
2

let count = 0;
$: doubled = count * 2; // here doubled is a 'derived' value on 'count', it will automatically recalculate itself if count changes

1
2

<p>My name is {$name}</p>
<!-- Here $name is a reference to name, a value in a state store -->

I don’t like that choice. Note also that the second syntax is a shorthand syntax, you can subscribe manually to values in the store and name them without the $ so if you really care about that you can opt out (at the price of 3-4 lines of manual wiring).

And syntax for conditional in template is also not very sexy:

1
2
3

{{ #if condition }}
<p>Inside the if</p>
{{ /if}}

But I guess it’s more a matter of personal taste.

Practicing Svelte by building a game

To continue onto the first part of the tutorial you can follow this link: Start of the tutorial: making a Derivative Idle clone with Svelte

• svelte
• SPA
• serie-svelte