Why use Svelte? Let us see.

Want to have a quick, but deep enough first look at Svelte to have your impression of it? If yes then this is the right article for you!

Svelte is a popular framework in the Javascript community these days. I face it nearly every day while listening to my favorite dev. podcasts, scrolling tweets, and reading Medium.

So, why Svelte has reached this level of popularity yet? Let’s try to investigate the topic and answer the question.

Documentation

First of all, as developers, we are eager to know how exactly things work. Meaning that clean, nicely written, and complete documentation is what we need in the first place.

When I landed on the framework’s website what I enjoyed is the presence of the code playgrounds where you can change code and see how the changes reflect in the result. Neat!

Another great option is that the website provides a tutorial section. If you enjoy learning by doing than this is definitely worth a try. Svelte’s tutorial reminded me of Codecademy lessons which I enjoyed when I started coding.

The presence of REPL is a good tool to have in your kit as well. You want to try something, but don’t want to set up the environment? Just visit the website and navigate to the REPL section. Done!

Write less code

As written in the blog post:

we should favour languages and patterns that allow us to naturally write less code

Assuming that Svelte is such a tool since it was created with the goal in mind to reduce the amount of code you need to type to make things work.

There is a comparison to React and Vue equivalent components written on Svelte, if you are interested then go check the full blog post.

At this point I think that this is a pretty cool feature not to define handlers (React style), but just change the variable value and get it reflected in the UI, nice, isn’t it? It might come with its trade-offs but it looks promisingly good yet.

Svelte is a compiler

Svelte doesn’t bring the whole library into your bundle.

It compiles your components into pure vanilla Javascript meaning that your bundle would not include library’s abstractions resulting in an as tiny bundle as possible.

In this post, you can see that the Svelte team claims that a todo app built on Svelte weights only 3.6kb zipped comparing to React + React DOM bundle without ANY code weights approximately 45kb zipped.

I think it could make a visible difference when users run your applications on their mobile devices. Isn’t it?

If you are curious you might have scrolled the post a bit and see the next benefit that comes with that Svelte is a compiler.

As Svelte components compiled into pure Javascript it means that you can use the component with different frameworks on top.

Meaning if there is a Svelte Bootstrap (for hypothetical example) exists you would not need to have a React Bootstrap to use it in your React app neither you would need a Vue Bootstrap to use in your Vue app. You could use Svelte Bootstrap for both applications.

This is the exact same goal that the web community pursued when have been creating Web Components. One of the goals at least.

I would definitely like to see where that goes since this is a great feature in my opinion.

Conclusion

Today we took our first look at Svelte and here are my favorite highlights about the framework:

  • Good documentation with developer tools to make the learning process as easy and enjoyable.
  • Svelte does not include the library bundle into your application bundle. Meaning that the application bundle size would be so much lighter.
  • A possibility to develop a better web community tooling using Svelte components to remove the necessity to create separate components for each existing framework.

I would definitely give Svelte a try in my next, so-called by me “fun” project. Would you?

Let me know what do you think of Svelte. What Svelte topic would you like to cover next on letconst, or just tell me how you are doing.

Contact me at letconstportal@gmail.com