Svelte 3:反思响应式编程

  • A+
所属分类:Web前端
摘要

注意:原文发表于2019-4-22,随着框架不断演进,部分内容可能已不适用。原文:Svelte 3: Rethinking reactivity
作者:Rich Harris
翻译:前端子鱼
声明:转载请指明本文出处。

Svelte 3:反思响应式编程

注意:原文发表于2019-4-22,随着框架不断演进,部分内容可能已不适用。

原文:Svelte 3: Rethinking reactivity
作者:Rich Harris
翻译:前端子鱼
声明:转载请指明本文出处。


终于,尘埃落定。

历经数月之后,这几天来我们喜不自胜:我们宣布 Svelte v3 稳定版即将正式发布了。

这是一个大版本。

这次的发布,是 Svelte 社区众多贡献者耗费了数百小时的心血,包括来自 beta 版测试人员的宝贵反馈,他们聚沙成塔,众志成城,使得各项设计精益求精,日臻完善。

相信这次发布能不负众望,让你喜欢上它。

什么是 Svelte?

Svelte 是一个组件框架(就像 React 或 Vue),不过与他们又截然不同。

传统的框架也允许你编写声明式的、状态驱动的代码,不过是要付出代价的:

浏览器做了很多额外的工作,去将这些声明式的结构转换为 DOM 操作,使用 Virtual DOM 差异比较(diffing) 等这类技术,可能会超出你的设想,并且加剧垃圾回收的负担。

相反,Svelte 在执行 build 的时候,将组件转化为高效的命令式代码,并能精确地更新 DOM。

因此,你可以写出高性能且炫酷的程序。

Svelte 的首个版本完全是为了 验证这么一个假设,即通过一个专用的编译器可以生成高度可靠的代码,同时还能提供出色的用户体验。

第二版是较小的升级,稍作调整。

第三版我们进行了重大的改进。

在过去的五六个月里,我们工作的重点是在给程序员提供出色的开发体验上。

现在编写组件比起其他框架而言,样板代码少得多

如果你使用过其他框架的话,我们认为你会被惊艳到。耳听为虚,不妨试读一下我们全新的教程,甄辨真伪。

我们首先需要反思现代 UI 框架的核心概念:响应式编程(下方是反思响应式编程的视频(建议您直接阅读本文,也即视频所讲的内容),你也可以在 You Gotta Love Frontend Code Camp 上观看)。

将响应式融入语言

在旧版的 Svelte 中,你可以通过调用 this.get 方法来告诉程序有某些状态已更改:

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

这可以让组件得到响应。

刚好说到这里顺便提一下,this.get 与经典(Hooks 之前的) React 中使用的 this.setState 方法几乎相同:

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

但有一些重要的技术差异(正如我在《反思响应式编程》的视频中解释的那样,React 不是响应式的),不过从概念上讲却是同一回事。

随着 Hooks 的降临,引起了翻天覆地的改变,Hooks 以与众不同的方式来处理 的降临,引起了翻天覆地的改变,Hooks 以与众不同的方式来处理状态。

许多框架竞相效尤,纷纷开始尝试实现自己的 Hooks,不过我们很快就当机立断:这并非完美致力的方向。

(实际上,Svelte v3 基本上是 Sunil 的错

Hooks 有一些吸引人的特性,但是它们也包含了一些不太自然的代码,并为垃圾回收器制造了些不必要的麻烦。

对于一个用于嵌入式设备和大量动画交互的框架来说,这不是一件好事。所以我们先退后一步静心自问,什么样的 API 才适合我们……

道说:大方无隅,大音希声,大象无形……

—— 没有 API 就是最好的 API!

我们豁然开朗,我们可以凭借语言来另辟蹊径。

更新 count 的值,以及所有依赖它的东西,应该像这样轻而易举:

count += 1; 

由于我们是一个编译器,因此我们可以通过在幕后检测赋值操作来实现这一点:

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

更重要的是,我们可以在没有使用代理或者 get/set 访问器带来的开销和复杂性的情况下,实现了这些能力。

它不过是一个普通的变量而已。

焕然一新

除了编写组件的方式焕然一新外,Svelte 自身也不同往日了,拥有了全新的外观和感觉。

仰赖 Achim Vedam 出色的工作,设计了我们新的徽标和网站,并启用了新的域名 svelte.dev 代替了 svelte.technology

我们还更改了口号,从“神奇地销声匿迹的UI框架”改成了“增强控制力的 Web APP”。

Svelte 八面玲珑 —— 出色的性能、尺寸很小的包、可访问性、内置样式封装、声明式转换、易用性以及它本质上只是一个编译器等等。

这些我们都会面面俱到,绝不厚此薄彼。

“增强控制力” 旨在升华 Svelte 的整体设计理念,即我们的工具应该为我们自身的智能扩展而存在,期望再次带火 William Gibson 风格。

从 v2 升级

如果你是 Svelte 2 的用户,那么可能要手动做一些升级。

在接下来的几天,我们将会发布迁移指南和 svelte-upgrade 的更新版本,我们将尽最大努力使得这个过程自动化。

但这毕竟是一次重大的变更,并非所有内容都能自动处理得了。

当然我们不会掉以轻心:希望你体验了 Svelte 3 之后能够明白,我们为什么认为有必要与过去决裂。

拭目以待

尽管这个版本已经够折腾的了,但我们还远未完成。

我们还有大量的想法来生成更智能、更紧凑的代码,以及一个长长的特性期望列表。

Sapper,我们一个 Next.js 风格的应用框架,目前仍处于更新迭代中,支持使用 Svelte 3。

Svelte Native 这个社区项目可以使你用 Svelte 来编写 Android 或 iOS 的 APP,该项目虽然取得了一些进展,但应该得到 core 的更全面的支持。

我们还没有其他框架那样拥有很多编辑器扩展、语法高亮、组件工具、devtool 等等,我们也应该丰富这些。

我们也确实是想添加一流的 TypeScript 支持。

与此同时,我们认为 Svelte 3 是构建 Web 应用的最佳方式。

花个把小时浏览一下我们的教程,希望能使你有所动容。

无论如何,我们都希望在 Discord 聊天室Github 上看到你。

欢迎每一位开发者 —— 尤其是你。

< The End >