Svelte will give you developer superpowers! - Photo by Author
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 ten 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:
<script>
let role = 'developer';
</script>
<h1>Hello, {role}!</h1>
<p>I hope you are having a good day!</p>
<style>
h1 {
color: green;
}
p {
font-style: italic;
}
</style>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!
<script>
let count = 0;
$: doubled = count * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click="{handleClick}">Click me!</button>
<p>{count} doubled is {doubled}</p>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:
// stores.js
import { writable } from 'svelte/store';
export const isDev = writable(NODE_ENV === 'development');And use it in any .svelte file prefixed with a $ sign.
<!-- Main.svelte -->
<script>
import { isDev } from '../helpers/stores.js';
import CookieNotice from '../components/CookieNotice.svelte';
</script>
{#if !$isDev}
<CookieNotice />
{/if}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 exported by default 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.
{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}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 and again, less code to write!
<!-- Parent.svelte -->
<script>
let message = 'hello child!';
</script>
<Child {message} />We can also use a shorthand for assigning classes:
<!-- Child.svelte -->
<script>
let round = true;
</script>
<button class:round>C</button>
<style>
.round {
border: 1px solid black;
border-radius: 50%;
}
</style>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/motioneffects liketweenedandspringsvelte/transitioneffects likefade,blur,fly,slide,scale,drawsvelte/animateeffects likeflipsvelte/easingeffects likebounce,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.
<script>
let value = 5;
</script>
{#if value > 10}
<p>{value} is greater than 10</p>
{:else}
<p>{value} is smaller than 10</p>
{/if}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.
<!-- Child.svelte -->
<script>
export let message;
</script>
<!-- Parent.svelte -->
<Child message="hello child!" />
<p>{message}</p>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. However, 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 No. 1 JavaScript front end framework around!
Have you worked with Svelte before? How was 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”.