Svelte 3: Reaktivität neu denken

Erst neulich fand ein großes Ereignis für die SvelteJS-Community statt, und tatsächlich scheint es mir für das gesamte moderne Frontend - die lang erwartete Veröffentlichung von Svelte 3! Unter dem Schnitt befindet sich daher eine Übersetzung des Artikels von Svelte und ein ausgezeichnetes Video aus seinem Bericht bei YGLF 2019.

Endlich ist er da

Nach einigen Monaten, die wie ein paar Tage vergangen sind, sind wir im siebten Himmel, weil wir die stabile Veröffentlichung von Svelte 3 ankündigen können. Diese wirklich riesige Veröffentlichung ist das Ergebnis von Hunderten von Arbeitsstunden für viele Menschen in der Svelte-Community, einschließlich Betatester, deren Wertvolle Bewertungen haben dazu beigetragen, das Design des Frameworks in jeder Phase dieser Reise zu verbessern.

Wir denken, es wird Ihnen gefallen.

Was ist Svelte?

Svelte ist ein Komponenten-Framework, das React oder Vue ähnelt, jedoch einen wichtigen Unterschied aufweist. Mit herkömmlichen Frameworks können Sie deklarativen zustandsgesteuerten Code schreiben, jedoch nicht ohne Bestrafung: Der Browser muss zusätzliche Arbeit leisten, um diese deklarativen Strukturen mithilfe von Techniken wie virtuellem DOM-Diffing in DOM-Manipulationen umzuwandeln , die das vorhandene Budget für das Rendern von Frames verbrauchen und dem Kollektor Verantwortlichkeiten hinzufügen Müll.

Stattdessen arbeitet Svelte zur Erstellungszeit und konvertiert Ihre Komponenten in leistungsstarken Imperativcode , der das DOM mit chirurgischer Präzision aktualisiert. Auf diese Weise können Sie anspruchsvolle Anwendungen mit hervorragenden Leistungseigenschaften schreiben.

Die erste Version von Svelte widmete sich dem Testen der Hypothese, dass ein speziell entwickelter Compiler zuverlässigen Code generieren und eine hervorragende Benutzererfahrung bieten kann. Die zweite Version war kleinen Verbesserungen gewidmet, die eine Reihe von Dingen in Ordnung brachten.

Svelte 3 ist bereits eine bedeutende Überarbeitung. In den letzten fünf oder sechs Monaten haben wir der Benutzererfahrung der Entwickler besondere Aufmerksamkeit gewidmet. Jetzt können Sie Komponenten mit einer deutlich geringeren Menge an Boilerplate-Code schreiben als anderswo. Probieren Sie unser brandneues Tutorial aus und sehen Sie, was wir meinen. Wenn Sie bereits mit anderen Frameworks vertraut sind, werden Sie angenehm überrascht sein.

Um diese Gelegenheit zu verwirklichen, mussten wir zunächst das Konzept überdenken, das modernen UI-Frameworks zugrunde liegt: Reaktivität.


Neudefinition des Reaktivitätsberichts bei Ihnen muss das Frontend Code Camp 2019 lieben

Reaktivität auf Sprache verschieben

In früheren Versionen von Svelte mussten Sie dem Computer mitteilen, dass sich ein Teil des Status geändert hat, indem Sie die Methode this.set aufrufen:

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