Svelte will give you developer superpowers! - Photo by Author

The code blocks are currently not highlighted with Svelte, so syntax highlighting and formatting might not be 100% correct.

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:

<style>
  h1 {
    color: green;
  }

  p {
    font-style: italic;
  }
</style>
<script>
  let role = 'developer';
</script>
<h1>Hello, {role}!</h1>
<p>I hope you are having a good day!</p>

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>

<style>
  .round {
    border: 1px solid black;
    border-radius: 50%;
  }
</style>

<button class:round>C</button>

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.

<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.

<!-- Parent.svelte -->
<Child message="hello child!" />

<!-- Child.svelte -->
<script>
  export let message;
</script>
<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

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".

Posts tagged with Hustle