Svelte Society Day 2020: Rich Harris: Frequently Asked Questions

So this is weird, I've never done a conference talk from my kitchen counter before. I hope that you're all well and safe and somewhere with a well stocked pantry and plenty of toilet paper. Thank you for being part of Svelte Society Day 2020, hopefully the first of many and hopefully the last one that we have to do remotely. My name is Rich, I am the original creator of Svelte and today I am going to be trying to answer some of your frequently asked questions about Svelte.

And the first one that makes sense to start with is, what is Svelte? I'm guessing that a lot of you, if you're watching this video, you already have some idea of what Svelte is. Maybe you're using Svelte, maybe you're on the Svelte core team. But there's probably also some people who maybe you're Svelte curious or you're in lockdown and you're stuck at home and you literally have nothing better to do.

Everyone is welcome. So I'm going to explain what it is. Svelte is a user interface framework and by that I mean it serves a similar job to things like React and Vue in that it lets you build a web application out of components. Components are the building blocks, they contain all of your markup, your styles and your behaviours and they're kind of like the Lego blocks that your application is built out of. The big difference between Svelte and those other frameworks that I mentioned is that it tries to do as much of the work at build time instead of that work happening in the browser.

So whereas the traditional approach is that you would re-render a chunk of your application, which involves running a lot of code and then creating a lot of short-lived objects and functions and then handing that off to a thing that compares what you just generated with the previous version, which is quite a complex process, Svelte is designed in such a way that the browser doesn't have to do any of that work. It can do as little work as possible to keep the page in sync with the state of your application.

And so the result is firstly you get to write a lot less code because we're aggressively transforming the code that you wrote into the code that actually runs. It means that we have fewer constraints about how your code looks in the first place. We get better performance because a lot of that work is happening at build time instead of it having to happen in the browser, which means that you can do more ambitious things with your applications or it means that you can serve lower powered devices like smart watches and smart TVs and things like that.

And it also means that you get smaller applications typically, so you get better Lighthouse score. I've done conference talks diving into all of these things in greater detail. So if you're interested in learning more about what it is and how it does what it does, then have a look at those. I have had a haircut since those videos. Thank you for noticing.

The next question we get quite a lot is how can I learn Svelte? We recommend that you start with the official tutorial, svelte.dev.tutorial. It has an interactive walkthrough that covers basically the entirety of every aspect of how you would write a component. That said, if you prefer to learn by watching videos, then there are some options available. There's the Egghead collection Up and Running with Svelte 3 by Tomasz.

And on Udemy there's Svelte.js the Complete Guide by Maximilian. I would be remiss if I didn't also mention that I will be doing a front end masters workshop in June, which is quite soon and I should probably start writing it. If you prefer your learnings in book form, then there is going to be a book out later this year called Svelte and Sapper in Action by Mark Boltman, which has a really interesting choice of cover artwork. I've had a sneak preview of this book and it looks really good and comprehensive, so keep an eye out for that.