DEV Community

Cover image for Here's why I Recommend Svelte To Every New Web Developer In 2022

Here's why I Recommend Svelte To Every New Web Developer In 2022

Helitha Rupasinghe on July 01, 2022

So how is Svelte any different from other frameworks like Angular, React, vue and why should we care? Let’s dive into that... What is Sve...
Collapse
 
peerreynders profile image
peerreynders • Edited

Please do yourself a favour and read:

the return to the server?!?

Frameworks designed around the Client-side Rendering use case are "Gen 2" and therefore on the verge of becoming legacy technology especially if they have painted themselves into a corner with some of their core design constraints.

"Gen 3" technology makes SSR a primary design concern; i.e. it isn't just added after the fact.

Now due to the enterprise investment Angular will stick around just like COBOL for internal applications, React has a (comparatively) massive install base already, while Vue needs to get past its current version 2 vs 3 fragmentation.

The legacy of those three will likely stick around for some time to come regardless of how well they adapt to the coming Gen 3 transition.

The rest will have to fight it out in terms of who can best adapt to the coming Gen 3 transition by appealing to the "Gen 2" familiarity of application maintainers while emerging Gen 3 solutions don't run circles around them.

Now I took a good look at Svelte even before most people were willing to do so due to lack of TypeScript support at the time. I liked what I saw and I agree that after learning HTML/CSS first, Svelte as a first framework is almost a natural transition.

However in it's design it still is primarily a CSR focused framework and more importantly it is very component centric (which ironically a VDOM based framework like Inferno can get away with and still be more performant). So while the framework may "compile away", the components don't and that imposes a certain rigidity on its approachβ€”a logical consequence of a deliberately chosen trade-off.

Now I'm sure Svelte has made great strides since then, especially in regards to SvelteKit.

But one cannot ignore what else is going on.

Meta-frameworks like Astro make it possible to reuse your current (Gen 2) components inside a server-side routed application when you realize maybe you don't need that SPA. Once you're inside that environment and it turns out that there are some parts that are too heavy for what they do, you can gradually migrate over to a leaner framework perhaps even Svelte.

But now take into account that React is pretty much the incumbent technology when it comes to CSR and that a large portion of that community are JSX devotees, unwilling to give up "declarative UI" and "just JavaScript".

Then in the most recent State of JavaScript 2021 SolidJS came out of nowhere (which clearly could just be the result of an extremely vocal and active community however small it may be at the moment).

If you look at SolidJS it should become immediately apparent that it has "React-appeal" even though its components are setup functions, not render functions simply because it maintains the "declarative UI" and "just JavaScript" spirit (which could count against it for non-React developers). So if a React developer is going to migrate (for whatever reason) SolidJS has the immediate appeal of superficial familiarity.

And in my personal judgement SolidJS is much less constrained than Svelte which can give rise to novel architectural styles that go beyond components given that its finest level of composable granularity are the reactive primitives, not components (conceivably one could do something similar with Svelte Stores but those are simply not as convenient as "reactive statements" which Svelte developers will prefer to use and it still doesn't get rid of the design-time component boundaries at runtime).

So will SolidJS surpass Svelte at some point?

I have no way of knowing.

All I can see is that the incumbents are here to stay at least for a while; in the meantime the rest is in for a volatile ride while Gen 3 settles in.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Thank you for posting this! πŸ‘

Collapse
 
hnrq profile image
Henrique Ramos

Gotta agree on the Solid point. As a React developer, SolidJS seems much more natural than Svelte. Also, having to learn "SvelteScript" worries me a bit, even though Svelte's features play around with things that JS already has.

Collapse
 
peerreynders profile image
peerreynders • Edited

Don't get me wrong, the first hurdle for React devs is the whole render (React) vs. setup (SolidJS) function as a component thing:

And depending on where you are coming from the reactive primitives may take some getting used to (I was already somewhat acclimatized due to my RxJS, Vue, and Svelte exposure) but none of that is insurmountable.

Though apparently some React devs are allergic to the <Show /> and <For /> components (I think they're an improvement as I do tend towards a template style).

Interestingly Rich Harris ended up explaining how SolidJS works…

Collapse
 
davedbase profile image
David Di Biase • Edited

Hello! I think it's odd that Solid is left out of the list. If you're fairly comparing modern frameworks on speed, bundle size and memory, Solid outperforms Svelte on many (well actually most) of these key indicators despite being the smallest in downloads and use.

It would be fine if you were only discussing Svelte's qualities but half the article is focusing on comparing other frameworks. It seems a bit unjust to leave one of the options out. Your readers would likely want a fair comparison of the landscape.

Svelte however is a great option for writing frameworks let's just be accurate with our analysis and facts! Aside from that, I did enjoy this article immensely. Thank you for writing it.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Thank you for your feedback!
I'll make the edit and add solid to our comparison.

Collapse
 
johanheyvaert profile image
Johan Heyvaert • Edited

I'm trying to decide which framework to use for new projects and I've compared Svelte and Solid. At first Solid seemed the best choice but when trying to make a POC I noticed that Solid has not yet much of a community and I'm really missing supporting packages that are mature enough. E.g. a UI lib, a translations lib.

Here is an overview of available packages: solidjs.com/ecosystem
It seems like a lot, but when you look into it, most of them seem unfinished and there aren't many developers on the project.

Svelte exists 5 years now (I think) and has a bigger community with quite a lot of helpful libraries in a more or less finished state.
Here is an overview of available packages: sveltesociety.dev/components

Therefore, at this moment, Svelte seems the obvious choice for us.

(I also looked at RiotJS but same argument; unfortunately it has even less supporting libs than Solid although it exists since 2015!)

Collapse
 
mrvaa5eiym profile image
mrVAa5eiym

the title of the post is yet another sign of the toxic communication style that web development is heading towards. how can anyone recommend ONE UI library to EVERY new web developer? no wonder we are struggling so much to find new properly trained web developers

Collapse
 
hr21don profile image
Helitha Rupasinghe

I'm more than happy to change the title if you're offended by it in any way. πŸ’–

Collapse
 
shammisharma profile image
shammisharma • Edited

I have one question ... what are the prerequisites to get into Svelte
Like what concepts one should be familiar with before learning Svelte

Collapse
 
hr21don profile image
Helitha Rupasinghe

The best place to start learning Svelte - svelte.dev/docs

You can get started writing Svelte apps in about 5 minutes with the usual HTML, CSS and Javascript.

Collapse
 
unsungnovelty profile image
Nikhil • Edited

For folks who want to hear the story behind Svelte.
youtu.be/kMlkCYL9qo0

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Svelte seems to borrow a lot from the fantastic RiotJS which has been around way longer (almost as long as React)