Svelte 3: Repenser la réactivité

L'autre jour, un grand événement s'est produit pour la communauté SvelteJS, et en effet, il me semble, pour l'ensemble du frontend moderne - la sortie tant attendue de Svelte 3! Par conséquent, sous la coupe se trouve une traduction de l'article de Svelte et une excellente vidéo de son rapport au YGLF 2019.

Enfin il est là

Après plusieurs mois qui se sont écoulés en quelques jours, nous sommes au septième ciel car nous pouvons annoncer la sortie stable de Svelte 3. Cette sortie vraiment énorme est le résultat de centaines d'heures de travail pour de nombreuses personnes de la communauté Svelte, y compris des bêta-testeurs dont des évaluations inestimables ont aidé à affiner la conception du cadre à chaque étape de ce voyage.

Nous pensons que vous l'aimerez.

Qu'est-ce que Svelte?

Svelte est un framework de composants similaire à React ou Vue, mais avec une différence importante. Les frameworks traditionnels vous permettent d'écrire du code déclaratif basé sur l'état, mais pas sans punition: le navigateur doit faire un travail supplémentaire pour transformer ces structures déclaratives en manipulations DOM en utilisant des techniques telles que la différenciation DOM virtuelle , qui consomment le budget existant pour le rendu des trames et ajoutent des responsabilités au collecteur ordures.

Au lieu de cela, Svelte fonctionne au moment de la construction , convertissant vos composants en code impératif hautes performances qui met à jour le DOM avec une précision chirurgicale. En conséquence, vous pouvez écrire des applications ambitieuses avec d'excellentes caractéristiques de performances.

La première version de Svelte était dédiée à tester l'hypothèse qu'un compilateur spécialement conçu peut générer du code fiable et fournir une excellente expérience utilisateur. La deuxième version était consacrée à de petites améliorations qui mettaient un certain nombre de choses en ordre.

Svelte 3 est déjà une révision importante. Au cours des cinq ou six derniers mois, nous avons accordé une attention particulière à l'expérience utilisateur des développeurs . Vous pouvez désormais écrire des composants avec une quantité de code passe-partout nettement inférieure à n'importe où ailleurs. Essayez notre tout nouveau tutoriel et voyez ce que nous voulons dire - si vous êtes déjà familier avec d'autres frameworks, nous pensons que vous serez agréablement surpris.

Pour faire de cette opportunité une réalité, nous avons d'abord dû repenser le concept sous-jacent aux cadres d'interface utilisateur modernes: la réactivité.


Redéfinir le rapport de réactivité au You Gotta Love Frontend Code Camp 2019

Déplacer la réactivité vers le langage

Dans les versions précédentes de Svelte, vous deviez indiquer à l'ordinateur qu'une partie de l'état avait changé en appelant la méthode this.set :

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