Things I wish other frameworks grab from Svelte

After some experience working on a Svelte project, I was very amazed by this framework. Svelte is very innovative and has many interesting features. When I have to switch to another framework, I miss some features and wish the would be available.

Here goes my list of features that I find useful and unique for Svelte. This is not a full list of Svelte features, but rather a list of my favorites, which I wish to be able to use in other frameworks too.

1. Modular API

This is one of the most compelling points of Svelte. It was initially positioned as a framework highly tied to a compiler. This is a special class of frameworks, called disappearing, because their code dissolves with our app code for better compression.

The part of this amazing compression rate is due to the modular API, where features provided via individual modules, which can be omitted if not used

import { createEventDispatcher } from 'svelte'; // not included if you don't dispatch events
import { writable } from 'svelte/store'; // no need for shareable state – don't include this

This modularity allows hello world project on Svelte to be just about 1Kb big (minified+gzipped).

Some other frameworks support this pattern too. You can find this in Preact, for example, but Svelte goes even further and makes all export values tree-shakeable. It means that even parts of a single module can be stripped if they are not used.

However, the major frameworks, like React or Vue, are distributed as a single bundle with all APIs. It would be nice to see them moving towards modularity too.

2. Built-in transition library.

Svelte has built-in helpers for creating animated transitions of elements. You need to import a transition function and apply it to an element

import { fade } from 'svelte/transition';

<div transition:fade>This text will appear with transition</div>

The syntax is short, but also very flexible. You can implement your own transition functions and use them instead of fade used in this example. Svelte documentation covers this process well.

Other frameworks, Vue, for example, also have built-in libraries. But they are mostly based on applying extra class names to entering or leaving elements. Svelte is different, it allows you to specify the entire transition in each frame. All you need is to return a function that defines styles of an element depending on a keyframe t. This is the most trivial example:

function whoosh(node) {
  return {
    css: t => `transform: scale(${t})`
  };
}

Because animation is defined in Javascript and you have access to properties of the DOM node, you can create more complex animations and apply any kind of logic to the transition.

Animating transitions in Svelte is a great experience that other frameworks could pick up too.

3. Use actions

Svelte allows you to mix additional functionality to dom nodes via use: syntax:

<div use:draggable>I am draggable!</div>

Using this syntax you can attach multiple behaviors to the same node

<div use:draggable use:tooltip="Some tooltip">Draggable with tooltip</div>

This is very convenient when you want to apply some special behavior to an element, but you don't want to create an extra wrapper just for that.

Vue and Angular have a similar concept of directives, but React misses this feature, requiring you to write boilerplate code working with refs or create more intermediate components.

4. Classname bindings

It is very common to apply different styles for an element via different CSS class names. In React, we have to manually construct the list of classes to a string, or use some utility libraries, like classnames. Svelte has an elegant syntax for that:

<div
    class="simple" // always rendered
    class:active={isActive} // rendered if isActive == true
    class:selected={isSelected} // can repeat for multiple classes
/>

Angular and Vue have their own class name helpers, but they look like an extra syntax inside of a template:

<div v-bind:class="{ active: isActive, selected: isSelected }" />

The Svelte API is easier to read and modify. I wish other frameworks would adopt the approach from Svelte.

Conclusion

This list of features is not full, of course, but these are the topmost features that make Svelte very unique and practical framework. If you have not tried Svelte before, this list might convince you to do so.