How Svelte differs from React or Vue.js

*We’re creating documentaries to tell the tech stories that inspire people to keep creating and learning, and ultimately, unlock more potential in both themselves and software. Check out the YouTube Channel!

Here, Rich Harris, Scott Tolinski, Amelia Wattenberger and Swyx explain how Svelte differs from React and Vue.js.*

Transcript

Scott Tolinski

So Svelte’s different. It's its own thing because it takes this idea that for so long we've been shipping a JavaScript library, right? So the framework or whatever we're using is a library, and that whole big chunk has to go along to every user that opens up your site. They go to your site to check out a recipe or something.

Scott Tolinski

They're getting that big bundle. What's Svelte does differently is it takes your Svelte files and compiles it to just JavaScript. As in we're not shipping a library full of code that you may or may not be using in every project. However, we're transforming the code that you are using into smaller bits of JavaScript that you can ship to the client and not have to worry about if this project is large enough or substantial enough to include such a giant bundle of JavaScript along with every single project.

OfferZen__How-Svelte-differs_inner-article

Rich Harris

It tries to do as much of the work in the build time instead of in the runtime. What that means is that whereas, for example, React will do some work to compute the difference between what's currently on the page and what should be on the page.

Rich Harris

Svelte will take that logic and it will try and do as much of it as possible before the application even runs in the browser. And the way that we do that is we have a compiler. A compiler takes your declarative component code and it turns it into an approximation of what you would have written if you're writing this very hand optimized vanilla JavaScript.

Swyx

It’s actually is pretty similar to React when you look at the compiled output as Svelte has components, it has a lot of local state methods, it has a small little scheduler, but it does not have a virtual DOM and React does. Virtual DOM has been kind of sold as a way for React to be faster or more correct for a long time

Swyx

and I think it took awhile to offer a different alternative. That really woke me up to the idea that I don't actually need these people. I only think I need this because people told me I need this and I think there was a talk that actually Rich gave here in New York City.

Swyx

And he said you people are kind of drinking the Kool-Aid and you don't actually need all this machinery in order to do components. Right. And then he showed how he did it in Svelte and the difference is night and day, like the the Baseline React app is like 120 kilobytes, a basic small app that says Hello World will take less than three kilobytes like much less than that probably I haven't even measured because it basically compiles down to what you would write by hand.

Scott Tolinski

I think there's a lot of hype around Svelte specifically because people don't believe it can be that easy, or they don't believe that the code they can write is so clear because we have a long history of writing complex JavaScript code specifically to do interactive elements on the web. And so what Svelte allows us to do is to write code that's not only small and simple, but plain and readable in a way that I think instantly attracts people when they try it.

Swyx

I think people talk about it because it represents such a refreshing approach compared to the reactive paradigm, maybe the angular paradigm and even Vue. And I actually started in Vue before I went to React. And then I just felt, um, I felt Svelte was so much closer to the metal in terms of the language. And this is something I always say the first language of the web is HTML, not JavaScript, not some weird syntax of JavaScript, it's HTML.

Swyx

And the reason that other libraries integrate so nicely with Svelte is because Svelte is a superset of HTML. And that's something I think is a strong design choice that just led to a lot of good decisions down the line.

Amelia Wattenberger

If you use something like React or Vue, it's kind of stuck together using JavaScript. And if you're very familiar with JavaScript and thinking in a certain sort of way, then that sort of system is really great and really helpful.

Amelia Wattenberger

But if you're maybe a little bit newer or it's not even in your best interest to learn the ins and outs of different JavaScript frameworks, if you use something like Svelte, you're mostly just looking at basic each HTML JavaScript.

Amelia Wattenberger

But you have these superpowers now of, you know, you can have a for a loop within each HTML or you can show something whether or not a certain variable is true. And I think it doesn't force you to learn a lot of framework-specific concepts. Instead, it'll introduce concepts that even if you're going on to a React job, you're going to need to learn in the first place.

Amelia Wattenberger

And I think it's just like a really nice steppingstone to a job or just you know, the the way that you might build apps from now on.

Scott Tolinski

JavaScript frameworks can come and go. We've seen a ton of them but I really feel that this change to what's felt in its simplicity is not a fad. It's it's not a hype train. It's it's not anything that is going to just come and disappear. I think Svelte has attracted enough talented developers at this point where it's here for good, and it's only going to get better because as we've seen through stealth growth and progression already, it just continues to get better and better.

Scott Tolinski

So I don't think it's going anywhere. One of the best things about Svelte being as dynamic and as interesting as it is, is that when people try it, they stick with it. And they give it high approval ratings and they feel very good about their time using it. So I think we're just going to see more and more people try it, like it and stay with it.

Scott Tolinski

Not to say that it's going to take over or become the next thing or something like that. But I strongly feel like it's not going anywhere. The code experience, the developer experience, everything is just too good.

Rich Harris

It is incredibly gratifying when we see things like the state of JavaScript survey or the StackOverflow survey saying that Svelte is the framework with the highest level of satisfaction is the best left framework. Like obviously that strokes our egos a little bit but we we try not to let it go to our heads because I think there is a phenomenon at work here which is that the people currently using Svelte because it is still a fairly niche framework by and large that doing so because they want to.

Rich Harris

So it's a self-selecting group of people who are answering those surveys when folks get bigger. If it does continue to become bigger, the more of those developers will be people who found themselves working on a svelte codebase, but not through choice. And at that point, you know, those numbers, they're going to drop off. And so our challenge is to try and keep people as enthusiastic about as they are now while the framework continues to grow.

Amelia Wattenberger

How do you want to do this? So if there's a chart of satisfaction and usage usually starts low, but there's a lot of satisfaction and as it grows in usage because people are so satisfied usually there's like this curve where it once everybody starts to use it, they feel obligated to use it and then they all start using it and then they're like, Oh no, I was forced to use this.

Amelia Wattenberger

And so they're a little bit less satisfied and then it kind of dies out. And I feel like this is the cycle you usually see with JavaScript frameworks. What's different is like how far up they go, like how much uses do they get? How slow is the curve? Um, that kind of thing with. It's hard to tell. I think if they're just following the same curve where usage is a little bit lower and so satisfaction is really high, but it really does feel a little bit different where there's quite a bit of usage these days.

Amelia Wattenberger

And satisfaction is still, I think, the highest or one of the highest for any of the larger or more used JavaScript frameworks. So I think there's definitely some magic in where it sits where like it's not a super heavy framework. You don't have to learn a lot of domain specific language there's a lot of it that really just works for a large number of use cases.

Swyx

And it doesn't matter to me that it is less popular than React. You know, obviously what I'm doing here is I'm trying to make it more popular, but I don't want it to win. Some like the most popular framework in the world doesn't matter. I'm it matters to me that I'm more productive in Svelte than I am in React.

Swyx

And I can attest to that for a fact.

Transcript

Related content

Recent posts