前端世界的发展速度令人难以置信。稍微夸张一点地说，几乎每两週就会发布一个新的前端框架。对于刚接触前端开发的新手而言，这种感觉尤为明显，因为他们正试图找到一个入门的方式。

这种情况的发生可能是因为浏览器持续创新，而新的 JavaScript 版本带来了开发者可以利用的新特性，从而能够更快、更轻量地构建前端框架。

与 JavaScript 的演进类似，尽管节奏稍慢一些，CSS 及相关框架也在不断进步。

在本课程中，我们为某些框架做出了选择。重要的是要根据你自身的情况来评估每一个选择，并权衡其优缺点，以确定它是否适合你的场景。

Svelte

Svelte 是构建用户界面的一种全新激进方法。与传统的框架如 React 和 Vue 在运行时于浏览器中完成大部分工作不同，Svelte 将这些工作转移到了构建应用时的编译阶段，如 IJS Blog 提供的示意图所示：

Svelte 不使用诸如 虚拟 DOM diffing 这类技术，而是编写代码，在应用状态变化时精准地更新 DOM。

这与当前流行的虚拟 DOM 库形成了巨大差异。例如，React 网站应用需要浏览器下载 React 框架，而基于 Svelte 的应用则没有这种框架开销。

相当有趣，不是吗？它只是 HTML、一些样式和少量 JavaScript 组合在一个组件文件中。除了几个指令（如 #if、#each、#await）和一些基本概念（如 $:）之外，几乎没有其他需要学习的内容。

尝试一个示例

以下是 index.svelte 中的一个基础示例，点击时计数器会增加数字。运行并尝试修改代码后再次运行。

你也可以尝试 Svelte REPL（读取-求值-打印循环），简单来说就是一个交互式沙盒，用于实验 Svelte，查看上面的例子。你可以更改代码并在右侧实时看到结果。关于各种特性的详细讨论可参见 官方网站。

Svelte 还有一个额外优势：所有样式都仅限于定义它们的组件内！这一点意义重大。从 JavaScript 角度看，开发者被鼓励编写组件，将功能封装其中，并用这些组件组合网页。使用 Svelte 时，一个组件包含了 HTML 结构、JavaScript 功能和样式。这使得 Svelte 组件在不同上下文中使用时完全独立。需要注意的是，其他前端框架也以某种方式支持作用域 CSS。显然，这是一个趋势，而且是积极的趋势。

替代方案

让我们来探索 Svelte 的替代方案。

React

由 Facebook 支持，React 无疑是目前最流行的库之一，因为它被 Facebook、Instagram、Whatsapp 等广泛使用。虽然有一些有趣的进展听起来很吸引人，但只要虚拟 DOM 存在，它可能仍然过于沉重，无法满足大多数开发者追求的网页性能目标。

Vue.js

Vue.js 被称为“渐进式 JavaScript 框架”。与 React 类似，它也使用虚拟 DOM 来计算实际 DOM 需要变更的部分。Vue 3.0 最近已发布，承诺带来一些值得期待的新特性。它被 NASA、Gitlab、任天堂等公司使用。

Angular

“由 Google 强力驱动”，Angular 是“一个框架。适用于移动与桌面”，被阿拉斯加航空、GoDaddy、飞利浦等公司使用。

框架数量太多，根本无法列出全部或任何子集。

为什么选择 Svelte？

Svelte 在多个方面令人印象深刻。一方面，它的简洁性和浅显的学习曲线意味着初学者和新团队成员可以轻松上手，无需经历重大困扰。另一方面，它对性能和打包体积的关注，对用户体验产生了直接且显著的影响。记住，这正是我们的核心原则之一。

为什么不选它？ 有人犹豫的原因是 Svelte 还不如 React、Vue、Angular 成熟。可用的组件也不够多。虽然这确实属实，但对任何新的前端框架来说都是如此。