3 reasons you should try Svelte

Subscribe to my newsletter and never miss my upcoming articles

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.
Pratham Prasoon's photo

Well written Ameen!

Ameen's photo

Thanks Pratham

Mohd Shad Mirza's photo

Great read. It has everything I expected to see when I opened the article. Very well written Ameen
Keep up the good work.

Ameen's photo

Thanks man, wouldn't be possible without your tips.

Mattia Sinisi's photo

Finally, give Svelte some love!

Ameen's photo

Yup it deserves more

Renรฉ Monroy's photo

I like Svelte but that code comparison is kinda staged. A fair one would use hooks on React, also would properly clear the interval in Svelte too and used the component created inside other component as well.

For React can be done this way (and clearing the interval):

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  });

  return <span>Seconds: {seconds}</span>;
}

Either way, Svelte is really nice and I'd recommend it every day.

Ameen's photo

Sorry used the example on React's official site , will keep this in mind. Thanks for informing ๐Ÿ™‚