Svelte: comparison with other frameworks
From a beginners perspective
Recently I made a Twitter thread while reading the Svelte tutorial trying to capture my opinion on this framework. To be honest I am not the biggest fan of the fact that there are new frontend frameworks basically every day, but it is always nice to look at something fresh and learn. It also gives a new perspective on the tools you already have in use.
So, here I will include the opinion I formed when going through the tutorial — supported with code snippets.
Disclaimer: Please remember that this is an opinion.
Single file Components
I am a little divided on this one (coming from an Angular background I like having separate html, css, ts files), but it feels very neat:
The computed state
First of all, find the whole $: <variable name>
syntax very weird. The purpose is neat (derived/computed state), and probably it looks better than what Vue, for example, has, and is easier than what Angular does (you should write pipes instead of getters, because getters will be called on every change detection iteration, so, basically, ALL THE TIME), but in React you can write getters for computed state (though no one ever does, thankfully), but this just feels very unnatural.
It feels a lot like magic from other frameworks, but in other frameworks they just tell you “name this method componentDidMount
and the framework will do some magic for you”, whereas in Svelte it says “use this obscure language feature”, and I don’t think it is a good pattern.
Attribute shorthands
I just love how you can simplify passing attributes to html elements in Svelte
Instead of <img src={src} />
you can just do <img {src} />
, and it is awesome. I don’t believe React has it (sorry if I’m wrong) and Angular definitely does not have it. But this is awesome.
Props
OK, so passing props to components is even weirder than computed state. In React you pass a props object to a function as an argument or access this.props in classes. In Angular you decorate a property with Input decorator. In Svelte you… export a variable declaration? For something that is basically IMPORTED from another scope? This feels soooo unnatural.
Conditionals and loops
OK, you lost me with this weird logical operations syntax like
{#if something} html {/if}
This looks very archaic. React is the best in this term, because you can use plain js
for loops and conditionals in html, and Angular and Vue have directives, which are basically enriched html and feel natural, whereas this looks like some ancient rendering engine stuff. Don’t like.
Event handling
Event handling is basically the same as in React, so no complaints here. But the event modifiers are actually great (stuff like on:click|preventDefault={f}
). See this is something I would love to have in Angular and React out of the box one day.
A little surprised to see that custom component events are done the Angular way (using createEventDispatcher
, similar to Angular’s Event Emitter
class), rather than React way with passing a callback down as a prop. Not that I object, just thought it would be the other way.
Actually, I even think this is a better approach, rather than passing callbacks around.
Event forwarding is awesome! Instead of creating another eventemitter
like Angular or passing a callback to a nested component’s nested component like React you can just write <SomeComp on:m/>
to just make all “m” events kinda bubble to the parent scope like native events do:
And you can also bubble up native events from child components without declaring dispatchers at all, the same way! This is some next level (good) magic I’d love to see in Angular and React.
Two way Data binding
I think Svelte did the smart thing allowing optional two way data bindings like Angular does. It should only be used in specific cases and with caution, but sometimes it is great.
Lifecycles
Lifecycles are done with hooks, which is a good thing.
Final overview
While I don’t believe I will be using Svelte at work any time soon, this technology looks promising and definitely has some great insights.
I would definitely love to see some of this features in Angular/React.
Also, as far as I understand, Svelte does not utilize a VirtualDOM and instead compiles to small pieces of vanilla js — which is definitely a fresh breath in front end development.
It is lightweight, simple to understand, and while some of its design choices are not acceptable for me, this definitely looks interesting.
So, a big shout out to the Svelte team!
Follow me on Medium and Twitter for more on Angular, Rxjs, React, and Javascript in general.