乐趣区

关于javascript: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,不过咱们很快就毅然决然:这并非咱们致力的方向。

(实际上,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 >
– 窗明几净,静候时日变迁 –

退出移动版