loading...
Cover image for Why svelte is revolutionary

Why svelte is revolutionary

hanna profile image Hanna ・4 min read

Recently I've been trying multiple different JavaScript frameworks, ranging from React to Angular. But the one which has stood out the most to me and has truly made me fall in love with it recently is svelte. Svelte is a lot different than a lot of frameworks, and to me the things svelte is capable of is amazing.

Bundle Size

One of my biggest concerns is the fact that most (if not all) the popular frameworks have a large to extra large bundle size. For this comparison I will only be comparing the base library of each framework instead of the dependents or plugins added with it, this is to show the core/base size of the framework.

Below you can see a table comparing the bundle size of what I consider the top 5 best frameworks, and their size(s) including compressed. All the sizes in the table were checked with Bundlephobia.

Framework Bundle Size Compressed
Angular 180.3kB 62.2kB
Vue 63.7kB 22.9kB
Preact 10.4kB 4kB
React 6.3kB 2.6kB
Svelte 3.8kB 1.5kB

Svelte is significantly smaller than most frameworks due to it having basically no normal dependencies, the only dependencies svelte truly has are developer dependencies, in fact if you check their package.json there is literally no dependencies section at all! There is only the devDependencies section, and that's quite impressive!

Lack of a virtual DOM

One thing that has always irked me when it comes to the most popular frameworks (Angular, React, Vue) is the use of a virtual DOM, while a virtual DOM is nice in some cases, it at the same time makes things a bit more complicated and complex compared to a library or framework that doesn't have one. Libraries that do use a virtual DOM have a slight overhead, and while it's not noticeable most of the time, there is definitely one.

Svelte has made a blog post discussing and debunking some things about virtual DOM based frameworks and libraries, while also comparing itself to React so people can understand what it means, you can read that blog post here.

While having or using a virtual DOM isn't coherently bad or slow, the main point of a virtual DOM is so you're able to have a declarative based UI, that handles rendering components for you, so you don't have to worry about all the internal functionality of your app or PWA. However, svelte uses a similar programming model while doing it separately, and without a virtual DOM.

Templates vs JSX

Now I hate to be the guy who compares React to other frameworks, as every framework has it's place, but to some (especially beginners) JSX can seem quite daunting or scary. The ability to write HTML within JavaScript code feels very off-putting to me personally, and it feels like it doesn't belong there, an example of this is as seen below

function Title({title}) {
  return <h1>{title}</h1>
}
export default Title;
Enter fullscreen mode Exit fullscreen mode

This is a very basic functional component you'd make in react, with a simple title prop and passing it to the HTML you plan on rendering later by returning it. Now this could very well be me but the <h1>{title}</h1> seems out of place, it feels like your parsing HTML or XML within JavaScript and it feels.. wrong, at least to me. Let's take a look at a basic Svelte component to see how they handle it

<script>
  export let title;
</script>

<style>
</style>

<h1>{title}</h1>
Enter fullscreen mode Exit fullscreen mode

This feels more "correct", we have a basic HTML-like syntax with a powerful yet simple templating engine built in. We simply tell our component we want a title prop by exporting a mutable variable called title and then Svelte handles the rest, we just pass it into our HTML and we're done. I should note this is very similar to how Vue handles their components.

Reactivity

Reactivity is one big reason developers use frameworks, and there's many different ways frameworks go about it. However, most frameworks make it over complicated, using a state based system, or other similar routes. One major reason I love svelte so much is reactivity is built into the language/framework itself, and by this I mean, you don't need to setup any state or reactive code to get it to work, it just simply works! Let's take a look at a basic reactive component in React:

import {useState} from 'react';

function clickMe() {
  let [clicks, setCicks] = useState(0);
  return <button onClick={setClicks(clicks + 1)}>Clicked {clicks} times!</button>;
}

export default clickMe;
Enter fullscreen mode Exit fullscreen mode

In this component we need to use the useState hook to allow us to use the state in our functional component, now let's take a look at a reactive component in svelte:

<script>
  let clicks = 0;
  function addClick() { clicks += 1 }
</script>

<style>
</style>

<button on:click={addClick}>Clicked {clicks} times!</button>
Enter fullscreen mode Exit fullscreen mode

There is literally no setup here, all we do is create a handler to handle the button click, bind it to the click event, and we're done. This makes developing quick prototypes very quick and painless as we need to do little to no setup to have a react component up and working.

Final Words

While I do see that every framework has it's place in the developer world, Svelte has certainly stolen my heart with it's simplicity, small footprint, and quick loading times. My current personal website is made using it, and honestly, though my site is extremely basic, it was a joy making it, and I'll gladly make another app or website using it when it comes time to do so.

Discussion

pic
Editor guide
Collapse
atomzwieback profile image
Atomzwieback

It looks very cool, but i take a look at their homepage and saw an example where css html and js is all put in a ".stelve" file and thats the point i dont like because it seems kinda confusing and not clear to me. Also i like more "component" based design where a component has all stuff splitted in their own files and all result together in a "component".

Collapse
hanna profile image
Hanna Author

That's the main point of the template section of the article :p

Collapse
atomzwieback profile image
Atomzwieback

then may i should invest more than 5 minutes and take a closer look at the site

Thread Thread
hanna profile image
Hanna Author

I personally prefer all the stuff in the same file, but that's just more of a preference

Thread Thread
atomzwieback profile image
Atomzwieback

Its ok in a small project but if youre working on large enterprise software which produces a lot of income, you want the code base as understandable as possible in less time.

Thread Thread
hanna profile image
Hanna Author

I find them equally understandable, but not everyone does.

Thread Thread
pabloabc profile image
Pablo Berganza

Isn't that the objective of Svelte? It's perfectly understandable on bigger projects. A single .svelte file is a single component. Whatever CSS or JS that's in it handles the styling or behavior of that specific component (scoped styling). Then you build your app using those building blocks. It seems more understandable than having them all in separate files.

Collapse
jwp profile image
John Peters

Might want to take a 2nd look. Svelte is very cool. Thanks Hannah.

Collapse
fullstockdev profile image
The Full Stock Developer

Svelte doesn't really have an opinion about how you manage your styles. AFAIK you still need the style tag, but you could use PostCSS to import an external CSS file.

Collapse
jonrandy profile image
Jon Randy

Not really revolutionary - Svelte is very much like RiotJS which is now approaching version 5 and has been around much longer (since 2013)

Collapse
hanna profile image
Hanna Author

Never heard of RiotJS! Maybe I'll give a try sometime.

Collapse
nibushibu profile image
GENKI

Thank you for your interest in Riot!
Riot.js is simple riot against complicated frontend.✊🔥
Riot is close to standards like web components and that's learning curve is so small.
It has only 3 template directives(if, each, is) and all template expressions are "just JavaScript".
Please try if you interest, and please post review if you like it.😃

Thread Thread
yellow1912 profile image
yellow1912

I tried svelte before, didn't work out for me because i have to work with legacy code (html generated server side), doesn't make sense for the compilation process etc. At the time svelte couldn't help me so I opted for vuejs. Riotjs looks quite interesting, but with vuejs3 comes out (half bundle size) I guess the only difference is virtual dom vs non virtual dom. I would love to try out riot though, I like its simple directives and explicit behavior. Not sure if it's worth switching at this point though.

Collapse
nibushibu profile image
GENKI

You're right!👍
Current maintainer has been improving Riot.js about 5 years, that contribution is commendable.
Your comment will enpower him who made the following tweets.
twitter.com/gianlucaguarini/status...

Collapse
ampcpmgp profile image
ampcpmgp

Yes, the syntax is similar, but I think Svelte has a build to Web Components, Svelte/store with intuitive two-way binding, and other ergonomic innovations.

Collapse
jonrandy profile image
Jon Randy

Riot can also build Web Components, and has many other innovations

Thread Thread
csaltos profile image
Carlos Saltos

Riot is compiled or it runs on the client ?

Thread Thread
jonrandy profile image
Jon Randy

Can be precompiled, or compiled on the client - up to you

Thread Thread
csaltos profile image
Carlos Saltos

GREAT !! ... I will take it a look, thank you very much for the good reference

Collapse
csaltos profile image
Carlos Saltos

Yes, and also Marko ... we all are mount on shoulders of giants

Collapse
zilti profile image
Daniel Ziltener

React is a library, not a framework, since your code doesn't live inside of it; and same goes for Svelte. A framework is a software that manages the full application lifecycle and calls your code at the right moments.

Collapse
csaltos profile image
Carlos Saltos

Svelte is supposed to be a compiler ... but anyway, all of them are frameworks (or they can be seen as framework) because all of them dictate a way to work (thus “frame” work) ... and does not matter if they are formally a compiler, a library or a ... framework ... all of them are “tools for the web” if you may ... so no need to discuss with the whole Internet that React is a library 😅

Collapse
maciekgrzybek profile image
Maciek Grzybek

Out of curiosity, have you actually tried using Svelte with Sapper for a production app? I was really hyped when I've heard about Svelte and I read the docs etc but now, when I'm actually building something with it, it doesn't feel so great... :(

Collapse
himujjal profile image
Himujjal Upadhyaya

Sapper isn't version 1 yet. But it works nonetheless. Whats the issue you are facing?

Collapse
maciekgrzybek profile image
Maciek Grzybek

It's nothing major, more like lot of small annoying things.

Thread Thread
maciekgrzybek profile image
Maciek Grzybek

And yeah, I'm aware that it's still an early stage. I'm not saying that Svelte is bad and you shouldn't use it :) Just describing my experience so far :)

Thread Thread
fullstockdev profile image
The Full Stock Developer

What are some of the small issues you're facing?

Collapse
korbraan profile image
Cédric Rémond

Great article!

The first point makes me uncomfortable though because comparing framework sizes out of context seems unfair to me.

Collapse
hanna profile image
Hanna Author

Bundle size is important! Even with extensions/add-ons they're still going to be bigger. No matter the project I'm working on the bundle size will be affected, but I get your point!

Collapse
korbraan profile image
Cédric Rémond

Yes I don't say bundle size isn't important, but it should be compared with the same features.

Building the same app (and an app that reflects real world apps) with several frameworks and comparing the result size seems for example more adequate.

Thread Thread
hanna profile image
Hanna Author

I see, sorry for the misunderstanding.

Collapse
jwp profile image
John Peters

I agree. At 180k on a 2mbs Wireless network we're talking :

2mbs = 1 byte / .000004 seconds x 180k = 720ms.
200mbs = .007ms.

Collapse
tfutada profile image
Takashi Futada

I think the big advantage of ReactJS is Hook, which allows us to use third party libraries like Adobe Spectrum with no hassle.
react-spectrum.adobe.com/blog/intr...

If it's a small app that can be build with one person, in that case svelte could work. but if you need a lot of functions that cannot be developed from scratch, React hook libs from many third parties help a lot.

Collapse
himujjal profile image
Himujjal Upadhyaya

That's the whole point of using Svelte. Most of the React's bandages or hooks or component life-cycles were required because React in its core design wasn't actually able to do things efficiently.

In Svelte you don't do that because you don't NEED to!

Talking about the above library. Yes. Svelte has a growing eco-system compared to React's matured one. But I don't see hooks as a good thing. They complicate things and make the code a mess.

Collapse
andrewbaisden profile image
Andrew Baisden

Keep hearing good things about Svelte still waiting for more adoption though. Not many jobs available for it outside of niche start ups. I remember when Vue was the new kid on the block it took a while for it to compete with React. Svelte still has some way to go if it wants to catch those two plus Angular.

Collapse
pengeszikra profile image
Peter Vivo

JSX a little bit shorter:

export default ({title}) => <h1>{title}</h1>;
Enter fullscreen mode Exit fullscreen mode

Don't need two declaration to write one thing.

Collapse
hanna profile image
Hanna Author

I don't personally like arrow functions for this sort of thing.

Collapse
pengeszikra profile image
Peter Vivo

Yes you right that is attitude depend. I use arrows most of times, speciel this cases:

const chunk = block => arr => Array(Math.ceil( arr.length / block))
  .fill()
  .map( (_,i) => arr.slice(i * block, i * block + block));

where I can use dependency injection with arrow functions chain.

Collapse
fullstockdev profile image
The Full Stock Developer

This is fine if you don't use TypeScript ;)

Collapse
nguyenletan profile image
nguyen

"One thing that has always irked me when it comes to the most popular frameworks (Angular, React, Vue) is the use of a virtual DOM" => There is NOT Virtual Dom in Angular.
However, I love your article.

Collapse
hanna profile image
Hanna Author

Ah i was mistaken, thanks for the correction!

Collapse
mzaini30 profile image
Zen

My blog too...

Collapse
hqjs profile image
hq

While putting XML into JavaScript might seems odd to you - it was part of E4X standard and was working in browsers long time ago. Then the feature was removed, but JSX is fully inspired by this feature.

Anyway - Svelte is great framework that can save a lot of time and have little magic comparing to React and others. I'd recommend to try it with smart web server and build tool hqjs.org it supports Svelte and many other frameworks out of the box.

Collapse
mbokil profile image
mbokil

I like Svelte I thought it was pretty clever. Only problem I saw was support for legacy browsers like IE11. After adding all the polyfills needed it was about the same bundle size as a Vue app. So I decided to stick with Vue 2/3 until we are 100% off IE11 which looks like another year or two. This way i get the benefit of using templates and I only need Babble and a promise polyfill.

Collapse
stokry profile image
Stokry

Svelte is awesome!

Collapse
jwp profile image
John Peters

I agree with all of your points. I will say this however, I like to consider each framework as a car type. Angular is a Cadillac

Svelte is a Jaguar

Collapse
nikola profile image
Nikola Brežnjak

I'm glad to see I'm not the only one to whom JSX just 'feels' wrong.

Collapse
sharu725 profile image
sharath Kumar

I use it everyday at work. It is wrong.

Collapse
jwp profile image
John Peters

Hi Hanna, one small correction. Angular does not use Virtual Dom.

Collapse
darkwiiplayer profile image
DarkWiiPlayer

My current personal website is made using it

A bit overkill; reminds me of how my (mostly static) website runs on a web application framework because I just needed an excuse to use it xD

Collapse
hanna profile image
Hanna Author

Isn't overkill, as I plan on adding more stuff to it (such as a github project list, etc)

Collapse
akshay090 profile image
Akshay090

Just watch youtu.be/AdNJ3fydeao and you would be really tempted to learn svelte.

Collapse
sm0ke profile image
Sm0ke

Nice. Thanks for writing!

Collapse
michaelphipps profile image
Phippsy

I have been watching Svelte with keen interest. I currently use Ractive JS which is one of Rich's previous projects. It feels like a natural progression from Ractive to Svelte.

Collapse
quantuminformation profile image
Nikos

setState, over complex yuk

Collapse
winstonpuckett profile image
Winston Puckett

What do you think of Svelte vs a vanilla SSG like 11ty?

Collapse
cristiandi profile image
Cristian David Ippolito Carrillo

Totally agree, I really like svelte!

Collapse
kyoukhana profile image
kyoukhana

I think Svelte will replace React these are the next gen frameworks as well as

Malina.js

blog.logrocket.com/framework-free-...

Collapse
alekseiberezkin profile image
Aleksei Berezkin

Thanks for sharing! Skimmed through the tutorial and it looks to me like more or less “traditional” templating engine with conditionals and loops in HTML. Am I wrong?

Collapse
axiol profile image
Arnaud Delante

I've been trying it on and off since the release and everytime I'm impress by it. Just never had a project where I could use it

Collapse
kunukn profile image
Kunuk Nykjær

Regarding bundlesize, react-dom should be included for the react bundle. React don't work without it. Preact is smaller than the react ui library.

Collapse
hanna profile image
Hanna Author

I see, I didn't know which libraries are included together as the react cli usually handles it for me lol

Collapse
aalireza439 profile image
aalireza439

am I the only one who likes JSX? when I use JSX I feel more comfortable to manipulate the HTML and it feels more natural when your entire app is written in javascript.

Collapse
hanna profile image
Hanna Author

I like JSX, I'm just not extremely used to it.