DEV Community

loading...

Discussion on: How is Svelte different than React?

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