blog/introducing-svelte-comparing-with-react-vue

[utterances-bot]

Introducing Svelte, and Comparing Svelte with React and Vue - Josh Collinsworth blog

Svelte is a new style of framework for building sites and apps. Let's dive into what makes it different, why it's so enjoyable, and how it's able to ship such tiny, fast apps.

https://joshcollinsworth.com/blog/introducing-svelte-comparing-with-react-vue

[clabnet]

Very good and complete tutorial. Thanks.

[jigneshthummar]

very good comparison, do you think web components is still at point of honorable mention in article like this?

[GarryLowther]

Thanks for posting a great article. I first looked at Svelte last year, but your post refreshed the reasons why I was interested in it.

[josh-collinsworth]

very good comparison, do you think web components is still at point of honorable mention in article like this?

If you mean as part of the comparison with React and Vue, I think that could be interesting to see. I'm not nearly enough of an expert on web components to write that, though, and I'm not sure how direct the comparison would be anyway, since I think unfortunately the use cases for JS frameworks and web components still only have so much overlap. I look forward to them seeing more adoption and becoming more powerful, though, since given the choice, I think it's always nice to just use the platform.

[ireneea]

Thanks for this great article Josh, really got me excited to learn and experiment with Svelte

[bb-in-hoodie]

Thanks to those examples, it was really easy to read.

The only reason I still prefer React over Svelte so far is that those 'slow render' issue in common frameworks is considered as a bit outdated issue thanks to Server-side Rendering. (and React is also in a dominant position in SSR area not to mention.) So I wonder how is Svelte developing in SSR area too :)

[josh-collinsworth]

I wonder how is Svelte developing in SSR area too

Good news! :) SvelteKit has server-side rendering built-in. You can deploy it as a traditional Node app, or with serverless functions. In fact, server-rendered is the default.

[stefanlange]

I really enjoyed this article. Well written, easy to understand. Greetings from Germany!

[jerojero]

Svelte is never going to be good for getting a job if the excuse people have to not use it is that it's not good for getting a job. People should just go ahead and try it, it's an exciting technology and very pleasant to work with!

[LauGau]

Thanks for the article, I really liked it! I was hesitating between the 3 to learn my first JS framework but after reading this... it will be Svelte!

Even if, "there will be certainly less community support"... I will probably "less need it" anyway, as it looks way more natural to me.

I was almost going to swallow the big React pill because "it's the standard"... But, Svelte looks too nice! (Especially on the volume slider example).

If you hesitate, just "follow your heart".

[ralbach]

Hey Josh, I think your Show More Text example with Vue 3 needs the ref to initialize to False .

You've definitely got me interested in checking out Svelte. I work mostly in Vue 2 and even seeing the reduction in LOC for Vue 3 with the composition api hurts my soul knowing how verbose it can be.

Do you find that the lack of power given to users such as all the react hooks like useState, useEffect etc. are what make Svelte a tougher sell to bigger organizations/complex needs?

[josh-collinsworth]

Do you find that the lack of power given to users such as all the react hooks like useState, useEffect etc. are what make Svelte a tougher sell to bigger organizations/complex needs?

I don't think so. Sharing logic and state between Svelte components isn't any more difficult than it would be with hooks. (Svelte stores make working with hooks quite easy, in fact.)

Personally, my read is that Svelte is a tougher sell just because it is (or, at least seems) not as big or not as widely used. Bigger organizations want the security of a Facebook backing the project or a massive list of open source contributors and sponsors. (Not that Svelte lacks these things, necessarily.)

I also think the companies that are big now were already making this decision a while ago, so it's possible there's a bit of a bias towards frameworks that were well established before Svelte really got popular, and over the coming years we'll see it more.

[darrylnoakes]

A note about conditional styling in Vue: it supports binding an object to class, where "truthy" properties are included as classes; this ends up looking quite similar to Svelte.

Svelte:

<div
  class="layout"
  class:logged-in={isLoggedIn}
  class:darkMode
  class:reduceMotion
>
  <!-- ...Content here -->
</div>

Vue:

<div
  :class="{
    layout: true,
    'logged-in': isLoggedIn,
    darkMode,
    reduceMotion,
  }"
>
  <!-- ...Content here -->
</div>

"Static" classes can also be bound separately alongside dynamic ones, which is cleaner (especially if you have a lot of static classes):

<div
  class="layout"
  :class="{
    'logged-in': isLoggedIn,
    darkMode,
    reduceMotion,
  }"
>
  <!-- ...Content here -->
</div>