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

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}/>

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>

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}

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);

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

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.

5 things I love about Svelte