DEV Community

loading...
Cover image for Why svelte is revolutionary

Why svelte is revolutionary

Hanna on October 01, 2020

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 a...
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
dennisfrijlink profile image
Dennis Frijlink

Yeah I know Riot.js. I love it!

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
csaltos profile image
Carlos Saltos

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

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
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
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
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
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
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
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
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
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
mzaini30 profile image
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
sm0ke profile image
Sm0ke

Nice. Thanks for writing!

Collapse
jwp profile image
John Peters

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

Collapse
akshay090 profile image
Akshay090

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

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
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.

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
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
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
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?