Svelte Why Svelte

[00:00:00]
>> So, the obvious first question that a lot of people have is, what is Svelte? And there's actually a lot of different ways to answer that question. It's a lot of different things. But it's probably easiest to understand it as an alternative to other existing projects that you're familiar with.

[00:00:13] React and Vue are the two most popular component frameworks and Svelte essentially solves a similar problem that they do. So what is a component framework? Component frameworks exist to help you write applications more declaratively. We use that word declaratively a lot in programming. So it's helpful to understand exactly what we mean by that.

[00:00:34] This declarative code that I'm looking at here, this is some Svelte code, is roughly equivalent to the vanilla JavaScript beneath it. You can see what's happening. We're creating a button using document.createElement, and then we're putting some text inside it, then adding an event listener. When you click the button, it increments the value of count, and then it updates the text content inside the button.

[00:00:59] Then we return that and that's our component. So the difference is in the imperative version, we're telling the browser exactly what to do. In the declarative version, we're just saying what outcome we want. And that's obviously a lot simpler for the developer because we're not having to work through the process of explaining to the browser exactly what it needs to do at each given moment.

[00:01:20] And most of the point, there's no duplication. Here, we've got this initial button.textContent = blah. And then inside the update handler, we've got the same thing. And you tend to find that when you're building web applications, you have a lot of that kind of duplication. You have the initial render and then you have the update.

[00:01:35] But if you're doing things declaratively, that's no longer the case. But it gets worse for the imperative story. If you wanna make a very small change to your component, for example, you wanna wrap that count variable in a strong element. Then if you're doing it imperatively, you need to almost rewrite the entire component.

[00:01:59] And that's for a very small change. So you can imagine if you're building a large application, the amount of work that you would have to do as you're iterating on your design is much, much greater with imperative code. So that's the value that component frameworks provide. They make it a lot easier for us as developers to build applications.

[00:02:17] Historically though, there has been a little bit of an implicit trade off. Because the framework acts as a middleman between you and the browser, and the middleman introduces inefficiency. So Svelte began back in 2016 as an experiment to prove that, that is in fact a false dichotomy. There is no tension between developer experience and user experience.

[00:02:40] Svelte is a compiler, it takes your declarative code and it turns it into the equivalent imperative JavaScript. And this has a number of really useful advantages. Number one, your apps will generally be quite a lot smaller because we don't need to have the actual framework runtime in the browser.

[00:02:59] Normally the framework has to anticipate every possible use case. But because Svelte understands exactly what is going into your app, it can discard most of it and just ship the code that is actually needed for your specific use case. JavaScript is the most expensive thing on the web byte for byte because you don't just have to download it, you also have to parse and evaluate it.

[00:03:19] And so if you can use less of it, then your apps are gonna launch quicker and your users will be happier. Once your applications have already launched, your apps are gonna be faster because we don't need to use costly techniques like re-rendering the virtual DOM and then diffing it to find out what needs to change on the page.

[00:03:35] Instead, we can make surgical, granular updates. The compiler knows which bits of the application could change for a given state change. And it can just change the DOM directly the same way that you would do if you're using the DOM API manually. And finally, your apps will be easier to write using Svelte because we have a lot more control over the authoring experience.

[00:03:56] We don't have the same constraints that other people do. What this means in particular is that if you're using Svelte, you will be able to write less code. There's a blog post linked there that I invite you to check out, which explains why writing less code is so important.

[00:04:11] Writing less code means that you'll have fewer bugs and you'll be able to spend more time outdoors. Beyond that, Svelte aims to make your life easier by shipping a lot of the things that normally you would have to do as third party libraries that you would install from NPM.

[00:04:26] So things like state management, element transitions, handling input via form elements, scope, CSS, all of those things. Normally with a framework, those are things that you have to figure out a solution to yourself, but with Svelte it's already built in. And we can do that because again, we're a compiler, we can discard the bits that we're not using.

[00:04:47] So who makes Svelte? Well, it is very much a community project. It's not a project with full time engineers and corporate funding. It's a project that is developed in the open by a group of volunteers who work on it in their free time because we believe in the project.

[00:05:04] There is a core team of developers who do the day-to-day stuff, but the broader contributor community is large. And every decision that we make about the future of the framework is done to the greatest extent possible out in the open. It's an egalitarian, communitarian project. We welcome developers of all backgrounds and with all skill levels, and we would love for you to be involved as well.

[00:05:26] So, with that, we'll move on to the next part of the workshop where we're gonna run through the entire Svelte tutorial to learn how to build Svelte components.