Svelte前端框架最近发布了Svelte 3。Svelte 3引入了一种新的方法来声明式地表示用户界面实现中涉及的不变量连接实体。因此，开发人员可能不再需要出于性能的考虑而手动处理重新渲染，或者手动同步相关的状态片段。Svelte 3有新的Logo、口号和网站。Sapper（基于Svelte类似Next.js的应用程序框架）和Svelte Native（面向移动应用程序开发）正在升级到Svelte 3。InfoQ采访了Svelte的创建者Rich Harris，并讨论了Svelte 3的意义及其对开发人员的影响。

Svelte 3是Svelte前端框架最新的主要迭代。Rich Harris介绍了Svelte 3的目标：

版本3是一个重大的变革。在过去的5到6个月中，我们一直致力于提供出色的开发体验。现在，你编写组件*所需的样本代码比其他框架都要少很多了。

该版本的核心是一种新的语法，用于声明式地表示渲染过程中涉及的变量之间的永久关系。Svelte 3的文档区分了三种情况：反应性赋值、反应性声明和反应性语句。

为了举例说明反应性赋值，Harris使用Svelte和其他前端框架给出了一个计数器递增的简单例子：

// 使用Svelte
const { count } = this.get();
this.set({
  count: count + 1
});

// 使用React
const { count } = this.state;
this.setState({
  count: count + 1
});

// 使用Vue
(...)
data: () => ({count: 0}),
(...)
this.count += 1;

在这些示例中，开发人员需要捕获或发出嵌入式框架状态更改的信号，以便触发相关的计算和效果。使用Svelte 3，开发人员只需给变量赋值：

count += 1;

Svelte会在构建时生成相应的同步代码：

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

反应性声明处理各种变量之间的关系。使用Svelte 3，开发人员现在可以将变量之间的关系编写为一个等式，使用Svelte编译器确保等式右侧变量的更改反映在左侧变量中，就像电子表格中一样。在下面的例子中：

<script>
	let count = 1;

	// 符号`$:`的意思是指当这些值变化时就重新运行
	$: doubled = count * 2;
	$: quadrupled = doubled * 2;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Count: {count}
</button>

<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>

语法$:double = count * 2;引入了一个将变量doubled与变量count连接起来的等式。在这里，Svelte编译器将生成代码，在count更新时更新doubled：

	let doubled, quadrupled;
	$$self.$$.update = ($$dirty = { count: 1, doubled: 1 }) => {
		if ($$dirty.count) { $$invalidate('doubled', doubled = count * 2); }
		if ($$dirty.doubled) { $$invalidate('quadrupled', quadrupled = doubled * 2); }
	};

反应性语句是指每次因变量发生变化时都要进行求值的语句。它们还使用$语法：

<script>
	let count = 0;

	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

框架会把它编译成如下代码：

	$$self.$$.update = ($$dirty = { count: 1 }) => {
		if ($$dirty.count) { if (count >= 10) {
				alert(`count is dangerously high!`);
				$$invalidate('count', count = 9);
			} }
	};

InfoQ采访了Svelte的创建者Rich Harris，并讨论了Svelte 3背后的动机及其对开发人员的影响。

InfoQ：请给我们介绍下Svelte的历史。您是《卫报》使用的另一个基于模板的前端框架Ractive的创建者，您为什么还要创建Svelte？

Rich Harris：Ractive是2012-13年产生的UI框架的一种，是那个时代的产物。它功能强大且直观，但与其他同类产品一样，它需要在运行时解释声明式组件代码，这将带来一定的损失。与直接手工编写代码来操作DOM相比，你需要使用更大的JS包，而且性能更差。

到2016年，一切都变了。移动设备，而不是桌面设备，突然占据了大部分流量，这使得包的大小和性能变得更加重要。多亏了Babel和TypeScript这样的项目，JS社区重新适应了编译器和构建步骤，所以我就开始想，一个理解声明式组件的编译器能否将它们转换成高度优化的指令代码。到目前为止，我已经花了几年时间考虑UI框架设计，并且构建了一个模块打包器（Rollup）和一个编译器（Buble），所以我觉得自己有很好的条件来做尝试。

InfoQ：Svelte 3引入了一个新的语法来解决一个组件内的同步问题。那么组件间的同步/通信呢？假设两个组件读写一个共享的状态片段，或者两个组件必须通信。您如何使用Svelte处理可能的同步问题？

Harris： Svelte有一个名为store的原语，它与内置的反应系统一起工作。它是一个非常简单的契约——包中有一个引用实现，但是你也可以封装其他库，比如Redux或xstate——可以任意组合。我们还对TC39提出的可观察性规范（由RxJS之类的库实现）提供了原生支持，因为它们恰好符合Svelte store契约。

InfoQ：是否有可能将一个Svelte的组件打包到一个可以在其他框架中使用的Web组件中？反过来，在Svelte中使用Web组件有多容易？

Harris： 编译器的一个好处是可以从相同的组件代码生成不同的输出。生成Web组件只需设置一个编译器选项。使用Web组件同样简单——Svelte在Custom Elements Everywhere测试套件上的得分为30/30。

InfoQ：如果Svelte可以编译成Web组件，这是否意味着开发人员可以在他们的代码库中逐步引入Svelte？这可行吗（与现有代码可能存在任何冲突吗，如冲突标记、捆绑问题等等）？

Harris： 是的，Svelte的设计考虑到了增量采用。自定义元素是实现这一点的一种方便的方法，只要你带来了合适的polyfill。不过，这取决于“主”框架——例如，React对自定义元素的支持很差，所以在迁移期间，最好使用一个React封装器来封装Svelte组件（比如react - svelte）。

InfoQ：开发人员怎么用Svelte处理嵌套路由？

Harris： 最简单的方法是使用Sapper，这是一个构建在Svelte组件框架之上的应用程序框架。Sapper基于应用的文件夹结构为你提供了一个完整的声明式嵌套路由系统，类似于Next.js，但有许多重要的增强。

对于喜欢基于组件或配置路由的开发人员，有几个社区维护的项目可以供他们选择。

InfoQ：如何测试一个Svelte应用程序？

Harris：默认的Sapper模板内置了Cypress集成。对于单个组件测试，我经常使用Puppeteer。我们还在研究最常用的测试故事，应该很快就可以拿出来分享了。

InfoQ：请您给出三个采用Svelte的理由？

Harris： 首先，你将编写更少的代码，这是加速软件构建和减少Bug的最可靠的方法。其次，与主流框架相比，你可以获得更好的性能保证，这意味着，随着应用的增长，或者随着你扩展到设备速度较慢和连接普遍存在的新市场，你不必停下来重写。

第三，Svelte有许多传统框架认为超出范围的特性。这是因为——作为一个编译器——Svelte只需要包含你实际使用的特性，而为其他人节省字节。这意味着我们可以自由地包含其他框架团队认为是浪费的东西，比如声明式转换和动画。

InfoQ：三个不使用Svelte的理由？

Harris：我们还没有像更成熟的框架那样丰富的编辑器集成和开发工具。我们还没有一流的TypeScript支持。我们不属于财大气粗的公司——我们只是一群真正的信徒。

InfoQ：Svelte下一步有什么计划？

Harris： 呼声最高的特性是TypeScript支持，所以我们希望尽快在这方面取得进展。我个人对使用Svelte来构建WebGL应用程序感到很兴奋，并且我还处于早期的探索阶段。最后，还有一个名为Svelte Native的社区项目，它允许你使用Svelte（由NativeScript提供支持）构建Android和iOS应用程序，并且正在取得一些令人难以置信的进展。

InfoQ：您能举几个使用Svelte的公司的例子吗？

Harris： 和其他几家新闻机构一样，我工作的《纽约时报》也将其用于许多项目。我们的网站在主页上还有很多其他的例子——也许最有趣的是，巴西的Stone和俄罗斯的Mustlab正在使用Svelte来驱动嵌入式设备，比如贩卖机系统和智能电视应用。越来越多的前端开发正在转向嵌入式Web，这些公司意识到，传统的JavaScript优先框架不能满足这种环境的需求。

查看英文原文：Svelte 3 Front-End Framework Moves Reactivity Into the JavaScript Language, Q&A With Rich Harris

创作场景

InfoQ 访谈：前端框架 Svelte 3 将反应性移入 JavaScript 语言