I wanted to try out Svelte1 so I made a little clone of a game called Derivative Clicker2. Following is a very quick presentation of what is Svelte (and how it compares to other reactive framework like React3, Angular4, etc) then a multi part tutorial on how to make a little game app with 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 Aurelia5.
The project went to version 3 a month ago (early may 2019), I think it’s a good time to try it out :)
The Svelte tutorial6 is great, it takes about an hour or so and is very well done. It uses the Svelte REPL7 and it introduces concepts very smoothly. Also it uses mostly the same concepts as React, Vue8 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 section9 is handy. It’s just a matter of cloning a template from a git10 repository and use the tools you are used to:
browserify15. And for the deployment, there are instructions a quick setup with Now16 and Surge17 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).
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.
And last but not least, it has some weird syntax choices. The dollar sign
$ has two different uses dependent on the context.
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:
But I guess it’s more a matter of personal taste.
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