DEV Community

loading...
Cover image for 10 Reasons Why I Recommend Svelte To Every New Web Developer

10 Reasons Why I Recommend Svelte To Every New Web Developer

mhatvan profile image Markus Hatvan Originally published at markushatvan.com on ・9 min read

Although the initial release of Svelte was back in November 2016, it's still more of an underdog amongst the JavaScript front end frameworks and just recently started to get its well deserved attention by the community.

After working with various JavaScript frameworks over the years including Angular, React and Vue.js, I think I have a good overall impression about how writing code can be enjoyable and how it can be frustrating.

A couple of years ago, writing code with jQuery felt like a revelation when coming from pure JavaScript. Then at my first job, I started working with Angular 2, and all of a sudden jQuery felt like a drag. Now, React is the cool kid on the block and Angular feels so complicated in comparison. You can probably see where this is going!

For me, Svelte is the next evolutionary step in the rapidly changing ecosystem of JavaScript frameworks.It feels so easy to write the Svelte way and you can tell that its creator Rich Harris was tired of all the annoying abstractions and the necessary boilerplate code that the existing frameworks require you to learn.

Now you might be asking yourself the question:

What makes Svelte different?

You might have heard about Svelte appearing here and there in articles like A RealWorld Comparison of Front-End Frameworks and developer surveys like the State of JS Survey as one of the best ranking frameworks when it comes to bundle size, performance, lines of code and most important developer satisfaction.

Compared to the popular React and Vue.js libraries, which do the bulk work during runtime and are using a technique called "virtual DOM diffing" for detecting changes, Svelte is compiled into framework-less vanilla JavaScript as a build step and can therefore benefit from a lot of code optimizations.

Naturally hesitant, I dismissed Svelte at first as "just another JavaScript framework" and didn't bother looking into it. After hearing about it a second time, I wondered: is Svelte just hyped or could it really be that good? I decided to battle-test it and use it on a personal project of mine.

Now after a few months, I can give you a definitive answer:

Svelte is simple, powerful and elegant and you will love it!

Without further ado, these are the top 10 reasons why I recommend Svelte to every new web developer who is starting to learn programming:

1. Svelte components are easy to understand

If you have never seen the Svelte syntax before, this is how a simple example would look like:

Compared to other frontend frameworks which introduce a lot of abstract concepts that take a while to learn and understand, it's really refreshing to see that Svelte just uses plain old HTML, CSS and JavaScript side by side. You can see and easily recognize what is happening here with its beginner-friendly syntax.

2. Simply write concise code

As you can see in the code example above, the business logic that you write is simple and easily readable at the same time. After all, the less code you write, the fewer bugs it can have, right?

Rich Harris, the genius creator of Svelte provided some good comparisons with React and Vue.js in his article called Write less code. According to his check up on characters needed to write the logic for a simple addition of two numbers, a React component is typically around 40% larger than its Svelte equivalent!

3. Reactivity with labeled statements

Whenever you want your variable values to update and recompute based on other variables, you can use reactive declarations. Just put a dollar sign in front of the variable that you want to be reactive and you're good to go!

Any time the button is clicked, count will increase by 1 and doubled will know that the value of count changed and update accordingly. It's really fascinating to think in terms of reactivity and it feels good to write.

4. Easy global state management out of the box

No need for any complicated third-party state management tools like Redux or Vuex.

You just define a variable as a writable/readable store and use it in any .svelte file prefixed with a $ sign.

In this example, we check the current environment, which exists as a value in our store and use it to decide if the cookie notice should be displayed or not. Simple, isn't it?

With Svelte stores, you also never have to worry about memory leaks, because store variables prefixed with a $ sign act as auto-subscriptions and unsubscribe automatically.

5. Built-in accessibility and unused CSS checks

Svelte wants to make the internet a better place and helps you out with useful hints in the code.

Whenever you forget to put the alt attribute on an <img> tag, Svelte will display a A11y: <img> element should have an alt attribute reminder for you. There is a long list of accessibility checks that are implemented in Svelte, and they hint at you without ever becoming a nuisance.

To keep the code as concise as possible and to avoid snippets of left over code, Svelte also flags unused CSS selectors for you whenever there is no respective markup to be found in a component.

6. Components are exported automatically

Whenever you would want to use component A in component B, you would usually need to write code to export component A first, so it can get imported by component B. With Svelte, you don't ever need to worry about forgetting to export, a .svelte component is always default exported for you automatically and ready to be imported by any other component.

7. Styling is scoped by default

Similar to CSS-in-JS libraries, Svelte styles are scoped by default which means that a svelte-<unique-hash> class name will be attached to your styles, so they don't leak and influence any other components styling. Of course, you have the option for styles to be applied globally by simply prefixing them with the :global() modifier or just using a .css file if you want to.

8. #await blocks

With most web applications, you will need to handle asynchronous data to display useful stats to your users.

The advantage of {#await} blocks is that you don't have to define an extra state for you resolved/rejected promises, you can just define variables inline in your template.

9. Shorthand attributes for passing props

In case there's a prop name that is the same as a variable name, we can pass it to the component as a shorthand attribute like {message} below. There is no advantage over using message="{message}", but it's more concise.

Above you can see the class:round attribute getting applied to the button based on if round is true or false. This could easily become a reusable component where you pass the value of round from the outside to decide the styling of the component conditionally.

10. Built-in effects and animations

Svelte comes prepacked with powerful effect modules:

  • svelte/motion effects like tweened and spring
  • svelte/transition effects like fade, blur, fly, slide, scale, draw
  • svelte/animate effects like flip
  • svelte/easing effects like bounce, cubic, elastic, and many more

There are a few examples in the official Svelte tutorial, but I like this progress bar example the most because of its simplicity.

Animations is an area of web development where you usually look for an external dependency to handle it for you, so it's great that you can use these right out of the box.

Fair reasons not to adopt Svelte

To avoid making this article sound like one long fanboy post, these are the cons that I experienced with Svelte so far:

.svelte files cannot export multiple components

On one hand, we profit from .svelte files being default exported automatically, but this also means that we cannot export multiple components from a single file. I don't think that this is such a big deal since it forces you to follow best practices writing your application with many small isolated components, which keeps them easy to understand and unit test.

Template syntax in general

For displaying conditional logic, Svelte uses a syntax that resembles the well-known Handlebars templating syntax.

I didn't encounter any issues with this way of writing logic, but I would prefer a more concise syntax.

Receiving props in a child component with export let

When you want to pass values from the parent to the child component, you need to pass a value as an attribute and receive it by using export let with a matching variable name.

In modern JavaScript, export is usually used as a keyword for exporting a module and let to declare a block-scoped variable, so I feel that the syntax is misusing existing keywords, but I got used to it and it works well.

Development speed

This is not directly related to the development experience with Svelte, but you should definitely be aware that Svelte can't compete (yet) with bigger and sponsored open source projects like React, Angular, Vue.js and others in terms of financial support, number of contributors and popularity as of now.

Nevertheless, the community is growing quickly and there is an ever-increasing list of third-party projects built for Svelte by the community which is available on Made with Svelte. The developers working on Svelte-related tools are geniuses and you can always ask for help on the Discord channel, Twitter or Reddit. Svelte also recently added TypeScript support and it works great!

I like Svelte's ease of use, small bundle size and developer experience amongst other factors so that I can accept a slower development speed as a trade off. If you always need the newest features to be merged as fast as possible, then you might want to look into other available JavaScript frameworks.

Lack of available jobs

Most companies are still looking for developers who are experienced with the major three front end frameworks but there are various, well-known early adopters of Svelte like IBM, Apple, Philips, GoDaddy, 1Password or The New York Times, just to name a few. You can find an extensive list of companies who are using Svelte at the bottom of the Svelte website. Usually, the adoption of a new framework takes a while to show up in job offers of companies. Nevertheless, Svelte is fun to learn and many developers enjoy using Svelte especially for their own personal projects or small scale applications.

Conclusion

If a beginner-friendly syntax, a small bundle size output and an insane performance with Svelte sounds like a great choice to you, I would recommend you to start hacking away with the Svelte tutorial. The tutorial is really detailed and you can quickly get an understanding of how powerful the framework is.

Things can definitely change fast in the world of JavaScript frameworks and I hope you are as convinced as I am that Svelte has all the upsides and potential that can make it become the new #1 JavaScript front end framework around!

Did you work with Svelte before? What is your experience?

Tell me about it in the comments, I am curious to know.

Thanks for reading, I hope you enjoyed it!

Helpful resources

Looking for a Svelte powered server side rendered solution?

After getting into touch with the framework through using Sapper, I am a big fanboy and try to promote the way of Svelte whenever I get the chance.

In case you are about to set up a website and are looking for the right tool, I published an article about my experience so far with Sapper for you to read about here: "Why I Chose SapperJS For My Website, And What I've Learned About The Framework So Far".

Discussion

pic
Editor guide
Collapse
barrbozzo profile image
Constantine

But keep in mind that there are not so many job vacancies for Svelte Frontend developers. Mostly all of them are React/Vue/Angular

Collapse
drazik profile image
Cyrille Perois

The global philosophy and the bundle size / performances are great. I'll have to try it. The only thing that doesn't feel right for me is this template syntax that I'll have to learn, where React is just javascript (I see you, wanting to tell me "what about learning jsx?". It's not the same thing as a whole new templating language at all).

Collapse
madza profile image
Madza

Working with Svelte feels like combining the good old HTML, CSS, JS approach, while still using components. Also, it's concise, intuitive, lightweight a fast 👍
Excited to see where it will be in an upcomming years 😉

Collapse
urielbitton profile image
Uriel Bitton

I've been contemplating for months now to start learning svelte or not, to give it a chance or not. And the things that are holding me back the most are:

  1. Context API - does svelte offer a similar solution to manage state across the app, i CANNOT live without the context api its insanely useful.
  2. Inline html conditional rendering - i like this, saves a lot of code
  3. CSS-in-JS does svelte let you use it?

(I've been using react for 2.5 years now, its very hard to go to anything else lol)

Collapse
mhatvan profile image
Markus Hatvan Author

1) I described state management as 4th point, you can find some more involved examples online but its super simple to use!
3) Have never used CSS-in-JS but this should answer your question: svelte.dev/blog/svelte-css-in-js

Collapse
tvanc profile image
Travis Van Couvering

Svelte has a context API but tbh I don't find myself using it very often. YMMV.

svelte.dev/docs#setContext

Collapse
alfredosalzillo profile image
Alfredo Salzillo

I don't think this is elegant.

Collapse
mhatvan profile image
Markus Hatvan Author

Can you give an explanation why?

Collapse
alfredosalzillo profile image
Alfredo Salzillo

Because:

  1. Remember me of struts, PHP templates and so many others like this
  2. There is a lot of new syntax to learn
  3. It's not new, not innovative and not simple
  4. There is no order in the way the cose is written and the logic is
  5. This reactivity declaration make me regret Angular (never thought was possible)
Collapse
raddythebrand profile image
Raddy

Great article! I will have to try Svelte on my next project. The only issue I have is the current state of adoption. Most of the big platforms/ frameworks out there mainly support Angular, Vue.js and React. It doesn't mean that you can't plug in Svelte, but it's more painful to do.

Thanks for sharing!

Collapse
mhatvan profile image
Markus Hatvan Author

Yeah, very true!
The newly announced development of SvelteKit might help with the adoption of the framework. svelte.dev/blog/whats-the-deal-wit...

Collapse
kwiat1990 profile image
Mateusz Kwiatkowski

So far I have heard nothing negative about Svelte. It seems to be this wonder tool that makes developers a lot of fun while they are working with it.

Collapse
kalashin1 profile image
Kinanee Samson

I am learning sveltejs and its incredibly simple.. I think I'll take my course more serious

Collapse
arnu515 profile image
arnu515

I've fallen in love with Svelte so much that I personally recommend it, especially to beginners, more than React, which used to be my deity before.

Collapse
seanmclem profile image
Seanmclem

9, Shorthand attributes for passing props, the child component doesn't seem to use the prop

Collapse
mhatvan profile image
Markus Hatvan Author

Good catch, I think I was mixing up two examples that I wrote!
I updated the gist to make more sense, thanks a lot Sean ;)