DEV Community

Cover image for Svelte, why so much hype ?

Svelte, why so much hype ?

Anthony Le Goas on May 18, 2020

Since the release of version 3 in April 2019, Svelte has been in the news all the time. But why? What fuels this popularity? What is new about it? ...
Collapse
 
inalbant profile image
Ibrahim

Coming from stuff like jQuery, a lot of devs who used React were like "wow", and coming from React, Svelte feels amazing too!
People just need to try it, it's so incredibly simple too!

Collapse
 
anthony_legoas profile image
Anthony Le Goas

Yes, that's the point, it's so easy to use !

Collapse
 
kurisutofu profile image
kurisutofu

For many years, I didn't touch anything JS but when I came back to it, I was impressed by its evolution. I really like nodeJS for example but when I tried Svelte, it blew my mind.
However, it's still too incomplete for me to adopt it in a project but I'll definitely revisit it later!

Collapse
 
anthony_legoas profile image
Anthony Le Goas

Interesting, what are you missing to make it complete enough ? 🤔

Collapse
 
kurisutofu profile image
kurisutofu

It may have changed now but when I tested it, I remember I had to type everything. By that, I mean there was no easy element management, especially for the UI.
For example, I am using VueJS for my project and with it, ElementJS so I don't have to design myself UI components (and because I'm not a good designer). I know I'm being lazy but if it's easier and faster, you're more flexible too.
As I said, it was at the time I tested it and I remember joining a discord channel about Svelte where someone mentioned he was working on something similar to a UI element repository so maybe now it's available.

Collapse
 
vinksz profile image
vinksz

completely overhyped.. and i find the docs to be very poorly written, unlike vue&nuxt ecosystem, when i read docs, everything is crystal clear... then again i'm super tired atm.
and switching paradigms too often confuses my brain, i'll rechecl svelte when its further in the development than rc1

Collapse
 
sonicoder profile image
Gábor Soós

You can get a hard time testing the components compared to other frameworks

Collapse
 
kurisutofu profile image
kurisutofu

Testing was not too hard because those were quick and one-time things. However, implementing it on production would require something more flexible and easy to maintain (UI elements comes to mind. I forget other aspects).

Collapse
 
dirkwolthuis profile image
Dirk H. Wolthuis

Hi, what do you miss?

Collapse
 
kurisutofu profile image
kurisutofu

Mainly UI elements management, I guess.
Well, I say "mainly" because I forgot the other points now 😅

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Maybe you should also look at the excellent RiotJS - it predates Svelte by years, and Svelte seems to be awfully similar

Collapse
 
anthony_legoas profile image
Anthony Le Goas

Indeed, Riot.js also comes with a compilation phase. But it seems too verbose for me, more complicated to read and write than Svelte. Just a personal feeling ;)

Collapse
 
donnisnoni profile image
Don Alfons Nisnoni

I agree with you @anthony_legoas

Collapse
 
mccshreyas profile image
Shreyas Jejurkar

Whenever I see new frameworks coming out in JS, I think about following statement a lot.

In web development, we are not doing anything new, we are doing same thing in different way.

Collapse
 
anthony_legoas profile image
Anthony Le Goas

Totally agree ! We just find new ways to optimize over time.

Collapse
 
jsteunou profile image
Jérôme Steunou

Another competitor is SolidJS which claims to be even fastest and smallest but with the usability of React. Quite an interesting claim.

I'm curious if anyone try it into production projects.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
craicerjack profile image
Carlos

"Yes, the size might be smaller, but still. You can't write some magic code, compile it and expect that it will work in the browser out of the box."

Why cant you compile code, you have written, into code that will work in the browser.

Collapse
 
mjamesderocher profile image
Matt Derocher

Frameworks like React has many features to solve many different problems. When you load a framework, you'll likely get code to solve problems that you don't even have in the current page of the application. Route-based tree shaking and code splitting can help remove this unused code, but even still, there's part of the core of the framework that can't be split up. I believe Next.js is constantly working to fix this problem by seeing if they can ship less of React with each route. Svelte is different. It doesn't try to remove unused code that already exists, it just never outputs that code in the first place.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
chasm profile image
Charles F. Munat

In other words, you haven't actually looked at Svelte, understood how it works, or built anything in it, but already you know that it's hype. I guess you saved yourself some trouble there.

Collapse
 
supunkavinda profile image
Supun Kavinda

Anthony, nice post. As @mattwaler said, this is the only framework brought "wow" to me. And, one more thing is that... Svelte has a great, very well organized tutorial. Last Sunday, I started learning it and it's amazing. It's one more plus point.

Since I started writing React, I felt like it's not the thing, even with hooks. This gives me some hope. I'll be learning the rest this weekend.

Thanks again!

Collapse
 
anthony_legoas profile image
Anthony Le Goas • Edited

Yeah you're right, the tutorial is really great !
Glad you enjoyed the post 😉

Collapse
 
jamesgeorge007 profile image
James George

Even though it's been a while since Svelte has been released there hasn't been an attempt to onboard an official CLI utility. In fact there is a discussion going on regarding the same.

degit is the preferred Dev utility with which one can clone any of the starter kits to their local machine. I strongly feel there is a space for a dedicated CLI tooling as we have for other frameworks out there, and this thought led me to create svelter-cli. It is still in it's very early phase, would love to have contributions from the community.

Collapse
 
anthony_legoas profile image
Anthony Le Goas

Thanks for sharing, I'll take a look 😉

Collapse
 
thisdotmedia_staff profile image
This Dot Media • Edited

Really great summary Anthony! Appreciate you rounding up all the important Svelte points into one place 😊

Collapse
 
anthony_legoas profile image
Anthony Le Goas

I'm glad you enjoyed it 😉

Collapse
 
floroz profile image
Daniele Tortora

So.. I have missed the point in the article where you discussed the benefit of the Virtual DOM vs Svelte pure JS compilation.

The Virtual DOM has been praised for long time and it's one of the main factor of the success of React and Vue, how does Svelte compare in that sense?

Collapse
 
annietaylorchen profile image
Annie Taylor Chen

Just my two cents, I think it takes time to build virtual DOM and compare them while Svelte can avoid that? But for me personally it's the less code, less bundle size, built in animation etc that provides a good dev experience that attracts me to favor Svelte.

Collapse
 
backspaces profile image
Owen Densmore

Hi, nice post.

Question: can the compiler work in the browser during development? I have a "Write & Run" workflow with processing only at the beginning or end of a production cycle. I do not use webpack but do use rollup, Git/Github, node & npm scripts. But again only at the begin/end of a cycle.

I really DO Write & Run. No fuss. In my coffeescript days, this was solved during development nicely with an in-browser compiler.

So does Svelte have a way to achieve this?

Collapse
 
chiubaca profile image
Alex Chiu

im still confused with how svelte works once it is compiled. There still must be some sort of runtime or overhead that is bundled into your compiled code that makes it all work surely ?

Collapse
 
craicerjack profile image
Carlos

No. As far as Im aware the compiler compiles it into vanilla javascript that will run directly in the browser so theres no need for a runtime.

Collapse
 
chiubaca profile image
Alex Chiu

hmm interesting, there must be something which makes it reactive though? event listeners or something? I should probably stop speculating and just read the source code :D

Thread Thread
 
annietaylorchen profile image
Annie Taylor Chen

dev.to/kevinast/responsive-svelte-...

You can read more here perhaps (I said perhaps because it's still on my to-read list so I don't know if this answers your question.)

Collapse
 
souksyp profile image
Souk Syp.

Well explained thanks !

Collapse
 
bookofdom_23 profile image
Dominic Luciano

Good job on the write up! I’ve been using Svelte for about a year now and I’m not sure I could go back to react or vuejs. The simplicity, speed of development, and performance are hrs to beat.

Collapse
 
annietaylorchen profile image
Annie Taylor Chen • Edited

Really? for personal projects or production? If it's for your job, consider yourself lucky!

Collapse
 
anthony_legoas profile image
Anthony Le Goas

Looks like we had the same reaction ;)