Svelte 3:重新思考反应性

就在前一天,SvelteJS社区发生了一件大事,在我看来,对于整个现代前端来说,确实如此-期待已久的Svelte 3发行! 因此,删节后是Svelte文章的翻译以及他在YGLF 2019的报告中的精彩视频。



终于他在这里


经过几天的飞行,几天之后,我们就可以宣布Svelte 3的稳定发布了。我们真正的庞大发布是Svelte社区中许多人(包括Beta测试人员)花了数百小时的工作的结果宝贵的评论有助于在此过程的每个阶段磨练框架的设计。

我们认为您会喜欢的。

什么是斯维尔特?


Svelte是一个类似于React或Vue的组件框架,但是有一个重要的区别。 传统框架允许您编写声明式的状态驱动代码,但并非一无所获:浏览器需要做额外的工作,以使用虚拟DOM扩散等技术将这些声明性结构转换为DOM操作,这些技术会消耗现有预算来渲染框架并向收集器添加责任。垃圾。

相反,Svelte 在构建时就工作 ,将您的组件转换为高性能的命令性代码,从而以手术精度更新DOM。 因此,您可以编写具有出色性能特征的雄心勃勃的应用程序。

Svelte的第一个版本专用于测试以下假设 :专门设计的编译器可以生成可靠的代码并提供出色的用户体验。 第二个版本致力于一些小的改进,使许多事情井井有条。

Svelte 3已经是一个重大修订。 在过去的五六个月中,我们一直特别注意开发人员的用户体验。 现在,您可以使用很少的样板代码来编写组件。 试试我们全新的教程 ,了解我们的意思-如果您已经熟悉其他框架,我们认为您会感到惊喜。

为了使这个机会成为现实,我们首先需要重新考虑现代UI框架背后的概念:反应性。


You Gotta Love Frontend Code Camp 2019中重新定义反应性报告

将反应性转移到语言


在以前的Svelte版本中,您必须通过调用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! - !

Source: https://habr.com/ru/post/zh-CN449450/


All Articles