DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 3 reasons you should try Svelte
Ameen
Ameen

Posted on • Originally published at ameencodes.tech

3 reasons you should try Svelte

Svelte a new contender to the war of JavaScript frameworks. It might not be as mature as other frameworks like React and Vue, but here are three reasons you should try Svelte:

  • The learning curve is pretty small
  • It requires less amount of lines & has easy state management.
  • It is not a normal framework.

1 . Learning curve is pretty small

If you know HTML ,CSS & Javascript, learning Svelte is going to be a breeze. Like Vue, Svelte templates are a superset of HTML.

A simple svelte example :
img

In first glance everything looks like HTML but it is Svelte. The {} are usually used to insert Javascript in HTML.

Svelte is HTML ,CSS ,Javascript with many cool add-ons.

If you know only HTML ,CSS ,Javascript than give Svelte a try. Later transitioning to other frameworks will be easy too.

2 . It requires less amount of lines & has easy state management.

Let's take an example of a simple counter with React & Svelte

React :
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(
  <Timer />,
  document.getElementById('timer-example')
);
Svelte :
<script>
  let seconds = 0;
  setInterval(() => seconds += 1, 1000);
</script>

Seconds: {seconds}

React: 33 lines ,
Svelte: 6 lines

As seen from above :

  • Svelte does greater things in few lines of code.
  • Svelte 's state management is really simple.

3 . It isn't a normal framework..

Svelte is pretty different from other frameworks. Svelte compiles you code into vanilla javascript. Thus the build size of Svelte apps is small. Svelte deserves its reputation because of its speed and developer experience.

Conclusion :

Svelte doesn't have a large community like Vue nor is being backed by any major company like Angular & React. Svelte is growing constantly but it still is pretty young and new in the market. I had suggested using it for personal projects rather than for job hunting etc.

Resources

Some cool resources you should definitely check out.

Top comments (27)

Collapse
 
pengeszikra profile image
Peter Vivo • Edited on

react with hook is 9 line, but this component can be instanced any amount, and after remove closeInterval properly. Maybe seems complex, but you can use modern vanilla JS / JSX.

import React, {useState, useEffect} from 'react';
export const Timer = ({...props}) => {
  const [seconds, setSeconds] = useState(0);
  useEffect(_=>{
    const interval = setInterval( _ => setSeconds( s => s + 1 ), 1000);
    return _ => clearInterval(interval); // refacted: Franciszek Krasnowski 
  }, []);
  return <div {...props}>{seconds}</div>;
}

implement example

import React from 'react';
import {Timer} from './timer.js';
import './style.css';

export default () => (
  <section>
    <Timer />
    <Timer style={{color: 'red'}} />
    <Timer className="custom-timer" />
  </section>
);

each timer have own state

Collapse
 
fkrasnowski profile image
Franciszek Krasnowski

React is still terse. But what iscloseInterval? Did you mean clearInterval? And I prefer using custom hooks to encapsulate ”reference fragile” behavior. For example by making useInterval hook or utilize the one from rooks package

Collapse
 
pengeszikra profile image
Peter Vivo

you right, clearInterval of course!

Collapse
 
mikenikles profile image
Mike Nikles

I used React for the first few years right after it was announced and absolutely loved it. For the past year and a half, I've used Svelte exclusively and wouldn't go back. Here's a lot more detail on why: mikenikles.com/blog/why-i-moved-fr...

As for your example with hooks: In my opinion, this is near impossible to understand without a deep knowledge of React which likely takes many hours of reading and using to acquire.

The Svelte example on the other hand is self-explanatory. With an hour of effort to work through the interactive Svelte tutorial, most people are ready to be productive.

If team efficiency, developer experience, time to market, maintainability and end user performance experience are important measures, I'd highly recommend Svelte over React in most cases.

It's important to note, and the author mentioned that too, that Svelte is less established. Fewer jobs, fewer opportunities to use it on a day job etc. However, that's the case for any new framework. Svelte is adopted quickly among big companies such as Apple and Spotify.

Collapse
 
alexkhismatulin profile image
Alex Khismatulin • Edited on

Good points, thanks!
But #3 contains a common mistake when describing svelte – its difference is that it compiles to imperative JS, not vanilla. All top frameworks compile to vanilla JS

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Yes, agree with the headline of this article, you should try Svelte and not just because is the new "cool kid on the block".

For me, it was a breath of fresh air to be able to make websites with as little extra things possible and still have several functionalities baked into the app.

I personally like how you can have everything necessary for a component in a single file and not needing to go back and forth between styles, markup and js.

I have already used it 2 times to make business type websites for my father and a good friend of mine and it almost feels like I was just using plan HTML + CSS plus some cool functionalities you can implement with just few lines of JS.

Collapse
 
chrisczopp profile image
chris-czopp

I'm not a big React fanboy but, I'm not sure about Svelte. Blending styles, controllers and presentation into one file feels wrong. Also, I don't know if in Svelte it's possible (or how hard it would be) to implement an app state management with central store(s). I think the comparison would be only fair in a more advanced use case.

Collapse
 
yoursunny profile image
Junxiao Shi

Svelte allows you to declare store in a file, and import them into components. If the value of a store changes, all components importing this store are notified and updated.

Collapse
 
chrisczopp profile image
chris-czopp

cool, that's what I would expect :)

Collapse
 
mzaini30 profile image
Zen
Collapse
 
maciekgrzybek profile image
Maciek Grzybek

Most of my career I've been using React, but recently I decided to try Svelte for a project. I think I still prefer React approach to building UI. But that's my personal opinion. But one thug bothers me in that article, why are co comparing Svelte to React example that uses classes? It's quite 'old' approach and you can do everything with hooks much easier and cleaner. I just think these kind of comparisons don't give a real justice.

Collapse
 
juancarlospaco profile image
Juan Carlos

I tried react and vue and dont like it.
I think that Svelte and Nim are better giving you more features without the need of linking other additional libraries.
You should try Nim if you liked Svelte.
πŸ˜ƒ

Collapse
 
jonrandy profile image
Jon Randy

Or you could try RiotJS which appears to have heavily influenced Svelte, and is a lot more mature - it's on version 4 (version 5 is in alpha)and has been around since 2013. A similar timer component would be defined as follows:

<timer>
  <p>Seconds Elapsed: { state.time }</p>

  <script>
    export default {
      tick() {
        this.update({ time: ++this.state.time })
      },
      onBeforeMount(props) {
        // create the component initial state
        this.state = {
          time: props.start
        }

        this.timer = setInterval(this.tick, 1000)
      },
      onUnmounted() {
        clearInterval(this.timer)
      }
    }
  </script>
</timer>
Collapse
 
mzaini30 profile image
Zen

I only know base of HTML, CSS, and JS (plus, little knowledge about Vue). Then, I try React but it's difficult for me. I try Svelte, then, I can create website with it. It's so easy! πŸ₯³πŸ₯³πŸ₯³

I build my blog with Svelte.

Collapse
 
shadowtime2000 profile image
shadowtime2000

imo it is just even easier to write functional react components for stuff like that so you may want to consider that when comparing line count

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

Also, the div is missing in the svelte version, anche the timeout Is never cleared. So it's not the same example.

Collapse
 
alexkhismatulin profile image
Alex Khismatulin

The word vanilla is confusing here IMO

Collapse
 
yoursunny profile image
Junxiao Shi

The major drawback of Svelte is the lack of TypeScript type checking in components. I tried it once and this problem is bothering me.

Collapse
 
mikenikles profile image
Mike Nikles

Is that still an issue even now that official TypeScript support is available? svelte.dev/blog/svelte-and-typescript

Collapse
 
yoursunny profile image
Junxiao Shi

Beautiful!

Thread Thread
 
mikenikles profile image
Mike Nikles

Hehe, I agree. It's been a feature request for a long time and is now available ☺️. I haven't had a chance to introduce TypeScript to my project yet, but it's high up on the wishlist.

Collapse
 
eljayadobe profile image
Eljay-Adobe

I usually end up using Vanilla JS. Has the best performance, and the easiest learning curve.

Collapse
 
developerkaren profile image
Karen Efereyan

It looks great. I'll check it out. Thanks

Collapse
 
vkuberan_88 profile image
vkuberan@gmail.com

Nice writeup. I want to follow you on Twitter but Your twitter account says, "This account doesn’t exist".

🌚 Life is too short to browse without dark mode