DEV Community

loading...

Discussion on: How is Svelte different than React?

Collapse
marklai1998 profile image
Mark Lai

I hate Svelte just because it has too much magic(abstraction)
Invent a lot of new syntaxes just to compete with line count

{@debug ...} , {#await} is enough to drive me crazy
How on earth would you put code logic on the template side?

Collapse
sharu725 profile image
sharath Kumar • Edited

Yeah, there are like 6 of them. Too many to remember. Outweighs the advantages of not having Virtual DOM burden, lower bundle size, ability to use styles (that too scoped), no JSX, so on and so forth.

Collapse
marklai1998 profile image
Mark Lai • Edited

I'm not saying that Svelte has no advantage. But Svelte always try to use "less code" as a selling point which triggers me.
svelte.dev/blog/write-less-code
And the way they achieve this is using short syntax, which invents a lot of unnecessary syntaxes and breaks a lot of the fundamental programming style (separate concerns for example, {@debug ...} , {#await} will totally break it)
We are living in a world that ppl just chose lib base on the syntax for not only readability (like ppl use vue/angular just because of jsx "className") but also maintainability.
Now I see Svelte like PHP, where a language/lib makes ppl write bad code.

Thread Thread
sharu725 profile image
sharath Kumar • Edited

React

import React,{useState} "react";

function App(){
   const [name,setName] = useState('');
  const handleChange = (e)=>{
     setName(e.target.value);  
}

 return (
   <div>
     <h1>Hello {name}</h1>
     <input onChange={handleChange} value={name} />
   </div>
 )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Svelte

<script>
    let name = 'world';
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>
Enter fullscreen mode Exit fullscreen mode

So what's wrong with this way of doing it. It is more readable and maintainable. Nothing fancy going on here. Anyone without JS knowledge can go through the Svelte code and can guess what's happening there. Can't say the same thing about React.

I have been using React for years now. It is just not right. React is a short-sighted framework.

Thread Thread
steventhan profile image
Steven Than

I'm not sure if you examples highlight the pros for Svelte, if anything, they actually discouraged me from learning it

So what's wrong with this way of doing it. It is more readable and maintainable.

This is highly debatable. Looking at the snippet, several questions came to mind: What is bind:value? it's not a valid HTML attribute as far as I know. Why is there an unused variable in the <script> tag? What is this syntax of {name}, maybe it refers to the one in the <script> tag, but isn't the tag already closed before getting to this line?
Overall, it makes me think Svelte has too much implicit magic.

Anyone without JS knowledge can go through the Svelte code and can guess what's happening there

Why is Svelte's readability to non-JS devlopers an advantage? It's an JS lib/framework at the end of the day. You're trading readability between JS and non-JS devs here, what good does it bring?

An as an aside, I've yet to come across a resource for writing reusable libraries that target Svelte. I often find myself writing npm-installable component libraries, and react hooks brought it to another level by letting me ship non-visual logic with ease, is there such concept in Svelte?

Thread Thread
kevmodrome profile image
Kevin Åberg Kultalahti

To answer your last paragraph; the concept you're looking for is custom stores

Collapse
joshnuss profile image
Joshua Nussbaum Author

Hi Mark,

Hate is a strong word, but you're totally allowed to have preferences. I think you should only use stuff you enjoy, and makes sense to you.

Personally, I prefer the separation of markup and JavaScript. Having lot's of JS code embedded in templates makes it harder for me to reason about.

The purpose of Svelte's abstractions is not about line count, rather, it's about developer experience. To help developers get more done with their limited time.

Collapse
andresausecha profile image
Andres Ausecha Mosquera • Edited

Hey Mark, what I have learnt of Svelte is not complicated at all. React is much harder to understand, react code requires handling of bunch of re-rendering rules. While react is much better than Angular, Svelte is way easier, clearer, and lighter than them. I suggest to think twice(I am react developer), some syntax to write conditionals or loops is peace of cake...you can copy and paste it.