Svelte: comparison with other frameworks

From a beginners perspective

Armen Vardanyan
codeburst
Published in
4 min readJul 15, 2019

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:

Single file components look very nice

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.

Weird magical Syntax

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.

Hands down one of the best things Svelte got right

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.

Nothing tells an outsider that “answer” variable is actually a prop

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.

This reminds me of the time I worked on Django framework

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.

Very clear approach

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.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Armen Vardanyan

Senior Angular developer from Yerevan, Armenia

Responses (2)

What are your thoughts?

So your opinion about the framework is merely based on arbitrary taste on syntax stuff. The less you talked about was functionality. The word unnatural was used a lot to simply refer to something you don’t like.
The first time I saw how conditional…

--

I have no issue with Svelte’s little idiosyncrasies. What prevents us from using it are the lack of related packages for common needs. Things like react-smartbanner or ngx-scrollbar. Guides to use Svelte with Bulma. Implementing Auth0 with Svelte…

--

Recommended from Medium

Lists

See more recommendations