Svelte 3: Rethinking Reactivity

Just a few days ago, there was a big event for the SvelteJS community, and indeed, I think, for the entire modern frontend - the long-awaited release of Svelte 3! Therefore, under the cut translation of the article by the author Svelte and a great video from his report on the YGLF 2019.

Finally he's here

After several months that flew like a couple of days, we are in seventh heaven because we can announce the stable release of Svelte 3. This truly huge release is the result of hundreds of hours of work of 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 penalties: the browser must do additional work to convert these declarative structures into DOM manipulations using techniques such as virtual DOM diffing , which consume the existing drawing frame budget and add responsibilities to the assembler garbage.

Instead, Svelte works at build time , transforming 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 devoted to testing the hypothesis - that a specially created compiler can generate reliable code and provides an excellent user experience. The second version was devoted to minor improvements that put a number of things in order.

Svelte 3 is already a major revision. For the past five or six months, we have paid particular attention to the user experience of developers . Now you can write components with the number of template code, much smaller 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 had to rethink the concept underlying modern UI frameworks: reactivity.


Report “Reconsidering Reactivity” at You Gotta Love Frontend Code Camp 2019

Relocation of reactivity to language

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

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

. , this.set this.setState, ( ) React:

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

( — React ), .

React, -. , , , . , . , embedded-, , .

, API … , API — API. . count , , :

count += 1;

, , :

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

, . .

. Svelte Achim Vedam, -, svelte.technology svelte.dev.

« UI » « web-». Svelte — , , , , , , , . .

2

Svelte 2, , . svelte-upgrade, , . , .

: , , Svelte 3, , .

, . , , . Sapper, Next.js, Svelte 3. Svelte Native, Android iOS Svelte, .

, , , devtools . ., , . TypeScript.

, , Svelte 3 — -. , , . , Discord , Telegram GitHub — , .

P/S —

Svelte 3.
Svelte 3.
Svelte 3.

AlexxNB! - !