Svelte Was Made By Vue Fans

... and to be honest, I'm not super impressed.

I switched away from Vue because of peacenotwar. I don't particularly love having malware included in my npm dependencies.

I switched over to React, and while my initial feeling was that React looked eerily like PHP, I did eventually grow to like it.

Having some code which returns HTML instead of having HTML with some code mebedded inside of it eventually grew on me.

Since it seems that all the cool kids are switching over to Svelte, then I had to try it out.

Is It Really Vue?

So I made this hello world page:

I will leave it up to the reader to guess if it was a Vue page or a Svelte page.

It gets worse. When I did encounter issues, then googling error messages from a stack trace gave me Vue results and not Svelte results. So much so, that I started to worry that Svelte included the same dependencies that Vue did, and started to take my precautions to sandbox npm.

One of the first things I tried out, was to move as much code as possible out of the .svelte file and into an external .ts file. I wanted my business logic outside of my view.

One of the things I tried to do was calling createEventDispatcher() in an imported typescript file. This gave me a somewhat confusing stacktrace:

Error: Function called outside component initialization
    at get_current_component 
    at Module.createEventDispatcher 
    at my-file.ts
    at process.processTicksAndRejections 
    at async instantiateModule 

When going through the stacktrace to figure out what was going on, searching for e.g. instantiateModule it took me to an old Nuxt issue, which really did cause some concern. Was it using the same dependencies as Vue? Had I just installed malware on my computer?

Luckily, it turned out that there was no node-ipc anywhere in sight in the dependencies.

State Management

Even with that initial scare out of the way, the similarities to Vue didn't stop here. Where React would generally be very code heavy in the in state management, it turns out that Svelte is much more declarative in general developer experience.

E.g. if I want to conditionally apply a style to a tag.

In React

The React way of handling state still feels a lot like classic code, with a ternary operator to either specify a class name or undefined.

In Vue

In Vue it would be the somewhat more declarative-looking. The :class property is a short-hand for v-bind:class and signifies that the class is bound during render.

In Svelte

Finally, in Svelte, it looks and feels significantly closer to Vue than to React. class:style-name sets the style-name class on the tag if the statement evaluates to true.

Why Is This A Problem?

Syntactically, this is not bad.

Actually, it might be better than React.

I felt a lot of friction on adopting React initially. Having HTML in blocks inside something that felt a lot like code was counter-intuitive to me - like there was very little separation of view and control.

Vue did make it significantly easier to separate concerns than React does.

(Any mention of Vue is in past tense, because after peacenotwar node-ipc, and by extension, Vue is dead to me).

Svelte does make a few choices that makes it harder to separate concerns than it should be. Some things, like event dispatchers, cannot be imported, but must be declared inline in the script section in a .svelte file.

I actually like the declarative feel of Svelte.

I just don't like that it reminds me of a product which endorses malware. I don't think that is something to want to emulate.

There is a thread about this post on Mastodon.