Svelte，为何受到如此多的炒作？

什么是 Svelte？

里奇·哈里斯

Svelte 的立场

结论

自 2019 年 4 月发布第 3 版以来，Svelte 一直备受关注。但原因何在？是什么推动了它的流行？它有什么新特点？Svelte 能否成为当下流行的前端 JavaScript 框架的继承者？我将在本文中尝试解答这些问题。

什么是 Svelte？

Svelte 是一个面向组件的 JavaScript 库，例如 React 和 VueJS。与大多数流行的前端 JS 库一样，Svelte 提供了一个轻量级框架，具有强大的功能和语法糖，可以简化开发人员的工作。Svelte 的主要区别在于库内部的引擎，因为Svelte 主要是一个编译器。

里奇·哈里斯

杰出的个性

Svelte 由《纽约时报》图片编辑 Rich Harris 开发。他最著名的成就包括：

• Ractive，一个模板驱动的 UI 库
• Rollup，一个模块打包器
• Bublé，一个 ES2015 编译器

这并不是 Rich Harris 第一次尝试创建 JavaScript 库。

除了开发技能之外，Rich 在 JavaScript 社区也非常活跃。他在Twitter上非常活跃，参与 JavaScript 生态系统的讨论，经常发表非常有见地的观点和精彩的答辩。他也是一位优秀且鼓舞人心的演讲者，经常出席各种会议，谈论 Svelte。我强烈推荐他的演讲，尤其是这场关于响应式编程的演讲：

不可否认，他在社交媒体和聚会上的存在极大地提高了 Svelte 的知名度，并让人们谈论它（无论好坏），从而吸引最感兴趣的人发现 Svelte。

历史

近几个月来，Svelte 一直是热议话题，自 2019 年 4 月发布第 3 版以来，其人气更是飙升。目前，该项目在GitHub上的 Stars 数量已达 3.4 万 ！🤩

但 Svelte 并非新事物。虽然最近很多关注点都集中在版本 3 上，但该项目早在 2016 年就已启动。为什么我们要等到版本 3 才知道它呢？因为 Svelte 版本 3 关注的是大多数开发人员担心的两个关键点：

• 语法简单
• 反应性

Rich Harris 对框架的批评

Svelte 1.0 发布时，Rich Harris 发表了一篇文章《没有框架的框架：我们为什么没有早点想到这一点？》，文中他指出了当前框架存在的一些问题：

• 申请权重
• 表现不佳
• 缺乏互操作性

在这篇 2016 年的文章中，他设想在 2018 年，前端开发人员将完全放弃在运行时工作的框架。

等等，这个新框架有运行时吗？呃。谢谢，我算了。——  2018 年的前端开发者

从他的角度来看，Web 应用程序嵌入了过多的代码。这是现实情况，并且对其性能产生了重大影响。与要访问的 Web 应用程序进行交互之前的时间差，即著名的“可交互时间”，不仅与下载应用程序内容所需的网络时间有关，还与 JavaScript 引擎解析和解释代码所花费的时间有关。受此观察的启发，Rich Harris 决定创建 Svelte，并将其打造为一个编译器，而不是一个运行时框架。

Rich Harris 喜欢将 Svelte 与 React 或 VueJS 进行比较，他尤其喜欢稍微挑衅一下它们，并提醒它们并非真正的响应式，而 Svelte 在这一点上领先一步。这似乎是他推广 Svelte 的沟通策略的一部分，或许这也是我们如此热衷于讨论 Svelte 的原因。但为什么他觉得 React 和 VueJS 不是响应式的呢？

反应性是当我们的应用程序中发生事件（例如单击按钮或保存值）触发另一个操作（例如更新显示）时发生的：一段代码做出相应的反应并更新DOM。

React 和 VueJS 的反应性基于虚拟 DOM 系统。它实际上是一个 JavaScript 对象，用于这两个库的内部功能。它是真实 DOM 的虚拟表示，用于进行比较，而无需操作 DOM API。因此，框架可以检测真实 DOM 是否有需要更改，并为用户生成新的渲染。

在 React 和 VueJS 中，响应式的工作原理如下：当检测到组件状态发生变化时，虚拟 DOM 会进行相应更新，并与之前的版本进行比较。如果检测到差异，则必须更新真实 DOM。

虚拟 DOM 运行良好，比较算法也经过了充分优化，适用于大多数用途。但当我们对渲染性能有要求时，尤其是像《纽约时报》的 Rich Harris 那样围绕数据可视化（DataViz）进行工作时，它就显得不够了。他还在一篇博客文章中介绍了虚拟 DOM 的局限性：

Svelte 的立场

仅嵌入基本功能的编译器

React、Vue、Angular 等等，都是在运行时工作的。因此，为了让你的应用程序正常运行，大量的框架代码会被嵌入到发送给用户的包中，即使是一个简单的“Hello World”代码也是如此。用户编写的代码会以某种方式嵌入到应用程序中，以便与框架代码协同工作。

Svelte 采用了不同的方法，而这正是编译器的意义所在。Svelte 提供的是让开发者使用特定语法编写代码的能力，而 Svelte 只是能够理解该代码并生成标准浏览器优化 JavaScript 的工具。由于它是一个编译器，因此应用程序中不会嵌入任何不必要的代码。最终的打包文件将仅包含开发者按照 Svelte 语法编写并由编译器翻译的代码。Svelte仅在构建阶段将指令转换为浏览器优化的代码。

少写多产

Svelte 最重要的承诺是让开发者编写更少的代码。我们开发者每天大部分时间都在阅读和编写代码。我们编写的每一行代码都会增加我们在项目中积累的技术债务，并产生新的 bug 可能性。事实上，我们常说，最好的代码就是那些没有被编写的代码。

文件包含的代码越多，理解其功能所需的认知努力就越大。为了解决这个问题，我们会花时间进行一些重构来简化理解：我们将代码片段共享，添加注释等等。有时，所有这些会导致编写更多代码，然后，我们就会陷入一种恶性循环，损害生产力。

最后，每个人都会同意这个事实：编写更多代码会耗费更多时间，从而减少用于其他任务（尤其是优化）的时间。因此，Svelte 的目标之一是让开发人员在确保高可读性的同时尽可能少地编写代码。

Rich Harris 在 Svelte 的博客上撰写了相关文章。他介绍了 Svelte v3 的语法，并饶有兴致地将其与 React 和 VueJS 进行了比较：

反应性增强

反应性是 Svelte 的核心，它无疑是版本 3 的重点，也是导致其突然流行起来的功能。

Svelte 的理念是将响应式重新融入语言之中。Svelte中的响应式基于变量的赋值，这意味着在 Svelte 中定义一个变量就已经使其具有响应式。

别忘了，Svelte 本身就是一个编译器，正因如此，它可以在构建阶段在代码中插入用于响应式的指令。这些指令的作用很简单：“每次赋值时，计算依赖项或副作用，并相应地更新 DOM”。Svelte 本身就是一个编译器，它可以在构建阶段计算每个用户操作的副作用，这是其竞争对手在运行时无法做到的。正因如此，Svelte 可以直接定位 DOM 中需要修改的位置。响应式最终由编译器而非浏览器承担。它非常高效，而且最重要的是，它非常强大！

结论

Svelte 3.0 发布近一年后，依然备受关注。Rich Harris，尤其是他出色的沟通能力，显然是 Svelte 的主要架构师。在开发者寻求新的优化方法的当下，他发起了一个项目，旨在缩减 Web 应用程序的大小，并享受高性能渲染。Svelte 始终信守其编写简单、响应迅速的承诺，这为其持续的声誉做出了贡献。

编译器框架为 Web 的未来开辟了新的视野。我们是否会走向如今我们熟知的前端框架的衰落，为编译器让路？这种情况何时会发生？如何发生？谁将成为主要参与者？现在下结论还为时过早，这一切都需要时间，但有一点是肯定的：Svelte 为这一新势头做出了巨大贡献，并推动着 Web 向前发展。