How to Make a Great Framework Better? - Svelte 5 With Rich Harris
So what problem does Svelte solve? Svelte solves the– so the fundamental problem
is that web development is too hard. And Svelte is an attempt to make it a little bit easier, to make it a little bit more tractable for a wider group of people to build rich, interactive web applications
It falls into this category of things called front-end framework, similar to projects like React and Vue and Angular and all of these other things. Takes a slightly different tack, but that is essentially what it does. It allows you to build your application out of declarative components, and then it turns it into something that the browser understands
and allows you to build interactive UIs without having to do all of the plumbing of manipulating the DOM yourself.
What do you see as the difference between a JavaScript framework and a web framework? Yeah, it’s a subtle distinction. I guess the reason that we call it a web framework as opposed to a JavaScript framework, it’s kind of twofold. Firstly, Svelte is an HTML-centric language. What we’ve found over the years is
that HTML is actually a really good language for describing user interfaces. There’s something about the nature of those angle brackets that people just really get. You’re describing the structure of something in a way that intuitively makes a lot of sense. And what we’ve seen is that JavaScript-centric frameworks, like React to be a great example, in order to make that style of development appealing, they’ve had to create things like JSX so that it feels like you’re writing HTML.
Svelte doesn’t do that. It says HTML is actually a really good starting point. We just need to make HTML an interactive language. And so that is what Svelte is. It adds interactivity to HTML. The other reason that we call it a web framework and not a JavaScript framework is that any time you build a web app, you’re going to have to think about styling. That is one of the fundamental problems that you are going to have to solve. And a JavaScript-centric framework typically just doesn’t have any opinion on this. But Svelte does. If you write a Svelte file, then you
can include your CSS directly inside that component, and it will only apply to that component. And then your build tool will extract it out and chunk it up and do all of the optimization stuff that you shouldn’t need to care about. But you are describing the styles at the same time as you’re describing the markup of your component and the behavior of your component. And a lot of frameworks just leave that as an exercise left to the reader type thing. And that’s not what Svelte’s philosophy is. Svelte’s philosophy is, if you’re building a web app, here’s how you build a web app.
It’s like anyone’s first attempt at a major open source project,
I made a ton of mistakes in building that. And so even though we had a pretty tight little community around it and people enjoyed using it, it had some pretty serious flaws, particularly in terms of performance and the amount of JavaScript that it would add to your application. And at the time, I was working in the news industry where these things are very important.
For a very long time, we used a library called CSS Tree for parsing CSS inside Svelte components. And in Svelte 5, we got rid of that in favor of our own CSS parser. Because it turns out that for what Svelte needs,
we don’t need to have rich, detailed information about, oh, this string represents this kind of color with these values. We don’t care about that. We just need to be able to identify the selectors inside your CSS and things like that. So we can build a much, much simpler version of the thing that otherwise, like you’re installing something with NPM, it needs to be able to support a much wider array of use cases. And so if you have a narrow use case and all of the things that
are out there, just by virtue of the fact that they are libraries, support a much wider array of use cases, then it’s very often the case that you can make something that’s much more tightly focused and much more appropriate for your task.