loading...
Cover image for 7 Svelte features that bring me joy

7 Svelte features that bring me joy

jesseskinner profile image Jesse Skinner Originally published at codingwithjesse.com on ・3 min read

When you learn Svelte for the first time, there are lots of little things that put a smile on your face. Some of the little shortcuts are so elegant, they make things so much easier with cleaner, more succinct code. I recorded a video for YouTube with a demo of seven of my favourite features put together.

1. bind:property

In Svelte, you can very easily bind a property of a DOM element to a local variable. For example, you can bind a variable to the value of an input.

<script>
let name = '';
</script>

<input bind:value={name}/>

2. Directive shortcuts

There's a bunch of really cool shortcuts in Svelte that make using directives and passing props even more succinct. If the property name and variable name are the same, you can write them like this:

<script>
let value = '';
let active = false;
</script>

<input bind:value class:active/>

It's shortcuts like this that make Svelte a real pleasure to work with.

3. Scoped CSS

In your Svelte components, any CSS inside a <style> block will be scoped to that component. That means, a lot of the time you won't need to add classes or IDs for styling. You can often just use the tag name for styling, without any risk of messing up the CSS of the rest of the page.

<style>
  /* No class needed! */
  button {
    font-size: 200%;
    background: red;
  }
</style>

<button>Click me</button>

4. DOM Event Modifiers

If you've ever added a submit handler to a form, or a click handler to a link, and you wanted to handle the event without having the page refresh, you've had to call event.preventDefault() in the handler function. Svelte makes this super easy using a "modifier".

<script>
function handleSubmit() {
  // don't need to call preventDefault in here anymore!
}
</script>

<form on:submit|preventDefault={handleSubmit}>
  <input type="submit"/>
</form>

5. Loop "else" clause

How many times have you written an if statement to check if an array is empty, so that you can display a special "nothing here" message? Svelte makes this very easy by providing an "else" clause to the {#each} block:

<script>
let results = [];
</script>

{#each results as result}
    <p>{result}</p>
{:else}
    <p>Sorry, no results found!</p>
{/each}

6. Transitions

Whenever things appear and disappear on your page, it's really nice to use CSS transitions to have a bit of animation to make the state change feel more natural. Normally, you have to write a bunch of CSS and JavaScript to pull this off, but Svelte makes it super simple. All you have to do is import the effect you want and use the transition: directive on an element, and whenever the element appears or disappears, the transition will play.

<script>
import { fade } from 'svelte/transition';
</script>

<div transition:fade>
  This will fade in and out.
</div>

7. Slot props and the let:variable directive

My absolute favourite Svelte feature is the ability to pass data down from a component to its children. In React, the common way to achieve this is either with a function child or a render prop, and this often makes the code harder to read and understand.

Svelte builds this functionality right into the template syntax. You add a <slot/> element to the parent component, and pass props to it. Then, you receive the data using the let:prop directive:

<!-- ColorManager.svelte -->
<script>
let colors = ['red', 'green', 'blue'];
</script>

<slot {colors} />
<!-- Colors.svelte -->
<script>
import ColorManager from './ColorManager.svelte';
</script>

<ColorManager let:colors>
  <ul>
    {#each colors as color}
      <li>{color}</li>
    {/each}
  </ul>
</ColorManager>

This makes it really easy to write components that are solely responsible for data fetching and management. This allows you to separate out your rendering logic from your state logic, and end up with much simpler code.

Conclusion

Svelte has a ton of really cool features and syntax that make your web components simpler than ever. I've outlined a few of my favourites here. If you're interested in learning more, check out The Joy of Svelte.

Posted on by:

jesseskinner profile

Jesse Skinner

@jesseskinner

I love writing code, especially Svelte, JavaScript, HTML and CSS. I also love writing about writing code, and teaching people how to write code.

Discussion

pic
Editor guide
 

People really don't stress enough the importance of enjoying what you're programming. It aids creativity, makes you a better teammate, and makes it significantly easier to enter a state of flow. It should be considered an important factor in choosing a web development framework (or lack thereof). Kudos!

 

Both svelte and vue are doing a very good job of having little to no low-level distractions. Svelte seems to take it even a step further.

 

The Action is pretty cool, having a lifecycle for a function.