GAZAR

Principal Engineer | Mentor

Svelte vs React in Details

Svelte vs React in Details

This is an article to review Svelte in detail, I know it is not as popular as React, but I was thinking why not, let's see what it is.

This is a normal way I start learning a new tool and technology, I start from examples and I go back to see what is going on there and read some articles.

1. I tried to run svelte-todomvc.

This is a repository, which is a sample of Svelte by their team for implementing the famous ToDo app.

https://github.com/sveltejs/svelte-todomvc

Cloned it and ran it and ran npm install and I got this error:

1_JioWIZivS4jMQLG-x2fJ6g.webp

I didn’t even bother, I was like maybe that wasn’t the right example :)

2. I tried running the Real World Example

Sorry for not trying more on the first example, it did not make sense. So let’s see how is this one.

https://github.com/sveltejs/realworld

Npm install and npm run dev, and the app work perfectly fine.

1_sLmnVV4yrXpY45k-cJJAVQ.webp

Then I opened the URL which you can see it here too. It is fast, but not that recognizable compare to React App. which to me it kind of make it less interesting, because it’s a new technology but the advantages of it is not obvious to managers and decision-makers.

But let’s see what are the technical differences:

  • It runs on DOM! which Reacts runs on Virtual DOM, less calculation in the background if it can update the DOM really fast.
  • It wouldn’t be necessary faster than React, but the file size will be definitely smaller.

I just pointed out the important ones.

3. Development Experience

Let’s see how the code looks like in VSCode.

1_tioV2JXeV4GsdcATC6m0sA.webp

So JavaScript on top and some tags and using Javascript on the HTML elements, it’s easy to understand, but not as clean and readable looking as React.

We can import other files/componentns there too which makes is easy to have reusable components.

import ListErrors from '../_components/ListErrors.svelte';

Conclusion

The real question that still remains, it’s worth learning now? I’d say No.

The other question is that do I think that this is going to replace React? I’d say No.

But it’s awesome to push the limits with new ways, read more about how it updates the DOM here. It’s not the time to switch on to this technology but I am thinking in the near future, another library or even this one will be an alternative to React.

It’s good to keep yourself up to date, this happens to tools, once in a while we switch to better technology anyway.