Svelte 3: Rethinking Reactivity

Just the other day, a big event happened for the SvelteJS community, and indeed, it seems to me, for the whole modern frontend - the long-awaited Svelte 3 release! Therefore, under the cut is a translation of the article by Svelte and an excellent video from his report at YGLF 2019.

Finally he is here

After several months that have flown by like a couple of days, we are over the moon because we can announce the stable release of Svelte 3. This truly huge release is the result of hundreds of hours of work for many people in the Svelte community, including beta testers whose invaluable reviews helped to hone the design of the framework at every stage of this journey.

We think you will like it.

What is Svelte?

Svelte is a component framework similar to React or Vue, but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but not without punishment: the browser has to do additional work to transform these declarative structures into DOM manipulations using techniques such as virtual DOM diffing , which consume the existing budget for rendering frames and add responsibilities to the collector garbage.

Instead, Svelte works at build time , converting your components into highly efficient imperative code that updates the DOM with surgical precision. As a result, you can write ambitious applications with excellent performance characteristics.

The first version of Svelte was dedicated to testing the hypothesis that a specially designed compiler can generate reliable code and provide an excellent user experience. The second version was dedicated to small improvements that brought a number of things in order.

Svelte 3 is already a significant revision. Over the past five or six months, we have been paying particular attention to the user experience of the developers . Now you can write components with the amount of boilerplate code significantly less than anywhere else. Try our brand new tutorial and see what we mean - if you are already familiar with other frameworks, we think you will be pleasantly surprised.

To make this opportunity a reality, we first needed to rethink the concept behind modern UI frameworks: reactivity.


Redefining Reactivity Report at You Gotta Love Frontend Code Camp 2019

Move reactivity to language

In previous versions of Svelte, you had to tell the computer that some part of the state had changed by calling the this.set method :

const { count } = this.get();
this.set({
  count: count + 1
});

He made the component react. By the way, this.set is almost identical to the this.setState method , which was used in the classic (before hooks) React:

const { count } = this.state;
this.setState({
  count: count + 1
});

There are important technical differences (as I explain in the video above - React does not respond), but conceptually this is the same thing.

Everything has changed with the advent of hooks in React , which control the state in a completely different way. Many frameworks started experimenting with their own hook implementations, but we quickly came to the conclusion that this is not the direction we would like to go. Hooks have some intriguing properties, but they also include unnatural code and create unnecessary work for the garbage collector. For the framework that is used on embedded devices , as well as in heavy interactive animations, this is not good.

So we took a step back and asked ourselves what type of API would be best for us ... and realized that the best API is the lack of an API. We can just use the language . Updating the count value and all the things that depend on it should be simple:

count += 1;

Since we are a compiler, we can do this by actually assigning behind the scenes:

count += 1; $$invalidate('count', count);

It is important to note that we can do all this without unnecessary costs and complexity of using proxies or accessors. This is just a variable.

New look

Not only the components received a facelift. Svelte itself now has a completely new look thanks to the amazing design work of Achim Vedam , who created a new logo and website that moved from svelte.technology to svelte.dev .

We also changed our slogan from “Magically Disappearing UI Framework” to “Cybernetically Enhanced Web Applications”. Svelte has many strengths - excellent performance, small bundle size, accessibility, built-in style encapsulation, declarative transition animations, ease of use, the fact that it is a compiler and many others. Therefore, focusing on one of them seems unfair to others.

Update from version 2

If you are already a Svelte 2 user, I'm afraid you will need to manually update your projects. In the coming days, we will release a migration guide and an updated version of the svelte-upgrade utility , which will do everything possible to automate the process. But the changes are too significant, so not everything can be processed automatically.

This decision was not easy for us: I hope that having tested Svelte 3, you will understand why we considered it necessary to break with the past.

Still ahead

No matter how exhausting this release may be, we are not finished yet. We have a ton of ideas on how to generate code smarter, more compact, and a long wish list. Sapper , our Next.js-style application framework, is still in the process of being updated for use with Svelte 3. The Svelte Native community project , which allows you to write Android and iOS applications on Svelte, is moving forward and deserves more full support from kernels.

We do not yet have many extensions for editors, syntax highlighting, component sets, devtools, etc., which other frameworks have, and we must fix this. And we really want to add first-class TypeScript support.

Despite all this, we believe that Svelte 3 is now the best way to build web applications. Take an hour to complete the tutorial and we hope to convince you of this. In any case, we would like to see you in our Discord chat , on the Russian-language Telegram channel and on GitHub - welcome everyone, especially you.

P / S - Some More Useful Links

Documentation in Russian at Svelte 3.
Textbook on Russian for Svelte 3.
Examples of Russian at Svelte 3.

For work on the Russian-language website and thank you very much separate AlexxNB ! Gip-gip hooray!