DEV Community

Cover image for 5 things I love about Svelte
Mauro Garcia
Mauro Garcia

Posted on • Updated on • Originally published at maurogarcia.dev

5 things I love about Svelte

I decided to write this article to talk about some things I learned about Svelte after trying it for the first time.

If you don’t know what Svelte is, please checkout the following link: https://svelte.dev/blog/svelte-3-rethinking-reactivity

TL;DR

  • Traditional frameworks like React and Vue do the bulk of their work in the browser
  • Svelte shifts that work into a compile step that happens when you build your app.
  • Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

This is super cool, but there are other things I found that I thought they worth mentioning:

1- Accessibility first

Svelte puts special focus on accessibility by warning you if you write inaccessible markup

2- Spread props

If you have an object of properties, you can 'spread' them on to a component instead of specifying each one like this:

<script>
    import UserInfo from './UserInfo.svelte';

    const info = {
        firstName: 'Mauro',
        lastName: 'Garcia',
        country: 'Argentina',
        website: 'https://maurogarcia.dev'
    };
</script>

<UserInfo {...info}/>
Enter fullscreen mode Exit fullscreen mode

3- No dummy elements required

You don’t need to create dummy elements in your views for conditionals and loops

{#if user.loggedIn}
    <button on:click={toggle}>
        Log out
    </button>
{:else}
    <button on:click={toggle}>
        Log in
    </button>
{/if}

<ul>
    {#each articles as article}
        <li><span>{article.title}</span></li>
    {/each}
</ul>
Enter fullscreen mode Exit fullscreen mode

4- Await promises in your markup

Working with async data? Check out how easy is to define what is rendered while and after fetching data:

{#await user}
    <p>...waiting</p>
{:then data}
    <p>Welcome, {data.firstName} + {data.lastName}</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}
Enter fullscreen mode Exit fullscreen mode

5- Stores

A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes.

In the following example, the Incrementer component will update the count store, Then, I'm using Auto-subscription in the App.Svelte component to be notified when the count store value changes (you can reference a store value by prefixing the store name with $)

// stores.js
import { writable } from 'svelte/store';

export const count = writable(0);
Enter fullscreen mode Exit fullscreen mode
<!-- App.Svelte -->
<script>
    import { count } from './stores.js';
    import Incrementer from './Incrementer.svelte';
</script>

<!-- Prefix count with $ to use auto-subscription -->
<h1>The count is {$count}</h1>

<Incrementer/>

<!-- Incrementer.Svelte -->
<script>
    import { count } from './stores.js';

    function increment() {
        count.update(n => n + 1);
    }
</script>

<button on:click={increment}>
    +
</button>
Enter fullscreen mode Exit fullscreen mode

Final thoughts

Some years ago, I decided to focus my attention on Angular, successfully avoiding the temptation to try other cool frameworks like React or Vue. This decision had two main objectives:

  • Increase my productivity by reusing as much code as possible.
  • Get really good with a specific framework. In my case, Angular.

But after years of using Angular, I decided to take a look at the other frameworks 👀. That's when Svelte captured my attention instantly.
I really loved that Svelte is focused on clean code and its simplicity in order to drastically reduce bugs.

While I am not yet considering using Svelte for all my projects, since it is a very big change, I will closely follow its development and continue to share some experiments with you.
One of the main features I'm waiting for is typescript support. After working with type checking for years, I think this feature will be a must for me to make a full transition.

Useful links


Did you try Svelte? What do you think about it? Let me know in the comments below 👇

Top comments (18)

Collapse
 
somedood profile image
Basti Ortiz • Edited

I believe this conference talk from the creator of Svelte himself will answer your questions.

Unlike the frameworks that use virtual DOMs, Svelte compiles your code into the actual bare-bones JavaScript API for manipulating the DOM. It literally compiles to the raw document.getElementById instead of a bunch of abstractions that ultimately take a toll on performance.

 
dceddia profile image
Dave Ceddia

Svelte is pretty much compiled down to setting element.innerText = “new value” directly, instead of doing it through a VDOM. In the Svelte REPL, check out the compiled output - it’s pretty readable! - and look for the code that looks like your own update code (e.g. if you write “name = whatever” somewhere, that’ll be in the output somewhere, along with the actual DOM update code)

Thread Thread
 
mauro_codes profile image
Mauro Garcia

Thanks for this comment Dave! A few hours ago I saw the video that @somedood shared above in the comments and in that video Rich Harris shows exactly what you are saying (the output in the REPL).
The output is super clean and easy to read compared to the code generated by frameworks like Angular.

Collapse
 
seanmclem profile image
Seanmclem • Edited

I feel like Stencil JS or Solid JS do these things too, but without such a different syntax

Collapse
 
mauro_codes profile image
Mauro Garcia

To be honest, I didn't have time yet to take a look at those frameworks.

I think the great difference between stencil and svelte is that is Svelte is not Web Component-based.

Collapse
 
misterhtmlcss profile image
Roger K.

Is that an advantage or disadvantage that it's not component based?

Thread Thread
 
mauro_codes profile image
Mauro Garcia

From my point of view, it's an advantage. @Rich Harris made an amazing post here on DEV talking about why he is not using web components.

Thread Thread
 
seanmclem profile image
Seanmclem • Edited

There's an important distinction between developing in web components and compiling to web components, like Stencil does.

Collapse
 
saichai profile image
Sai Chimata

I love that you can use promises with HTMLx markup. Looks like it would make it so much more readable and maintainable! Hopefully, someone will add a JSX extension at some point b/c JSX makes blocks of code and markup stand out more.

Collapse
 
mauro_codes profile image
Mauro Garcia

Yep! promises with HTML is SUPER easy to read!
About the JSX extension... you're right, that would be awesome! But we are in the early days of this framework so I think we'll have to be patient 😄

BTW, I'm currently using this extension for VSCode that works really great! Provides syntax highlighting and rich intellisense for Svelte components

Collapse
 
mauro_codes profile image
Mauro Garcia

Hi Ankush! Those are really great (and difficult) questions 😄

Before writing this article, I found this one really useful to understand the key differences between Svelte and other frameworks.

I hope this can be helpful for you too. Let me know if you have any additional questions.

Disclaimer: I'm a total Svelte noob, so I'm doing my best to understand this kind of key benefits too :D

Collapse
 
misterhtmlcss profile image
Roger K. • Edited

I think your first example is incorrect:
<UserInfo {...user}>

I don't know Svelte so I'm guessing, but shouldn't it be like this?
<User {...user}>?

Collapse
 
mauro_codes profile image
Mauro Garcia

Hi Roger! Actually that line is ok, but thanks to your comment, I found other issue.

My import was:

import Info from './UserInfo.svelte';

instead of

import UserInfo from './UserInfo.svelte';

Because I was using it like so:

<UserInfo {...info}/>
Collapse
 
misterhtmlcss profile image
Roger K.

Hmm I think you just flipped my example. It's the same error. Regardless I'm glad to have helped and I'm glad I understood it. Both things I was dubious about when I commented.

Collapse
 
alesisjoan profile image
Alesis Manzano

Muy bueno el post!

Collapse
 
mauro_codes profile image
Mauro Garcia

Gracias!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.