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
- Svelte tutorial
- Svelte REPL
- Rich Harris - Rethinking Reactivity
- Why Svelte
- Why SvelteJS may be the best framework for new web devs
- Why We Moved From React to Svelte
- What I Like About Writing Styles with Svelte
- I created the exact same app in React and Svelte. Here are the differences.
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".
Top comments (17)
But keep in mind that there are not so many job vacancies for Svelte Frontend developers. Mostly all of them are React/Vue/Angular
Yes but honestly as a newbie your looking at least a extra year to learn enough JS and React to be able to do a job. This is good for newbies, and I really think this will catch on big time. I'm a newbie and I was like WOW this just makes since. React seems over engineered now. Just too much to write.
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).
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 😉
Bridgetown takes that same approach
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:
(I've been using react for 2.5 years now, its very hard to go to anything else lol)
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
Svelte has a context API but tbh I don't find myself using it very often. YMMV.
svelte.dev/docs#setContext
I don't think this is elegant.
Can you give an explanation why?
Because:
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.
I am learning sveltejs and its incredibly simple.. I think I'll take my course more serious
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.
Yeah, very true!
The newly announced development of SvelteKit might help with the adoption of the framework. svelte.dev/blog/whats-the-deal-wit...
9, Shorthand attributes for passing props, the child component doesn't seem to use the prop
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 ;)