🖱️ ✉️ 💗 为什么要在Web项目中使用Svelte 🎂 ✴️ 🛢️

如果您是Web开发人员，则可能听说过Svelte Js。但是，我想您会想知道为什么它越来越流行，以及它对Web开发人员有什么有趣的优势。

我们将对该框架及其优点和缺点进行简要的回顾，以便在阅读后可以确定它是否适合您的项目。

Svelte框架于2018年出现，轰动一时。初学者和经验丰富的开发人员都喜欢将其用于各种项目。在这方面，让我们花一点时间来弄清楚是什么使Svelte如此易于使用。

什么是Svelte，它的优点是什么？

对于某些开发人员而言，Svelte JS被称为最流行的前端框架，该框架未包含在2018年JavaScript排名前六的状态中。有一篇关于Svelte 的维基百科文章，但仅在六个月前出现，因此那里没有太多信息。

Svelte最初是一个框架，但实际上，它是一个旨在在构建阶段编译组件的组件框架。由于采用了这种方法，您每页仅可以上传一个bundle.js来呈现整个应用程序。

简而言之，使用Svelte，您可以使用HTML，CSS和JavaScript编写组件。在开发过程中，框架将它们编译为小型独立JavaScript模块。这样可确保在浏览器部分完成最少的工作，从而使Web应用程序更快，并且编写代码更容易。

这是作者对Svelte的简短描述：

资料来源：Svelte.dev

由于所有这些，Svelte Mobile是“启动性能”方面的领导者之一。其他类型的优化则没有。Svelte通过使用可访问的基于浏览器的JavaScript编译器（而不是任何第三方编译器）获得了如此出色的结果。因此，在其他流行的框架和编程语言中，我们为Web开发提供了一个很好的解决方案。

因此，Svelte实现了准确的代码响应速度并提高了生产率，这对于开发人员和企业所有者而言都是极好的框架。此外，Svelte对开发人员的另一个优点是为初学者提供了方便，语法结构清晰。

Svelte体系结构概述

与任何其他库相比，Svelte以其速度而广受欢迎。这是由于摆脱了用于构建虚拟DOM的框架的加载阶段。Svelte代码不是在运行时使用该工具，而是在构建阶段编译为JS。这意味着该应用程序不需要依赖关系即可运行。

苗条的工作原理

我将尝试用最简单的词来解释Svelte的原理：

您打开站点。
用纯JS渲染页面。
您将该页面传递给您的同事[如果您从事多个工作]。
同事们希望从页面上获得真正的反应。
如果他们找到了它，那么应用程序/站点应该不仅在测试模式下而且在战斗中也能顺利运行。

Svelte JS与反应与 Vue：比较

许多工程师将Svetle.Js与其他框架进行了比较。最著名的替代品是React和Vue。

最受欢迎的Web框架（例如Angular，React和Vue.js）基于等待代码加载以构建虚拟DOM的原理。只有这样，他们才能使用库渲染页面。

例如，由Facebook在2011年开发的React，使得反应式编程非常流行。该框架首先开始使用虚拟DOM。它分离了事件处理，属性操纵和手动DOM更新，而这些事件原本是构建应用程序所必需的。这是使React如此吸引人的关键因素。

同时，Svelte是编译器。它使用JavaScript编译组件，而不是依靠Virtual DOM之类的概念来更新浏览器DOM。多亏了Svelte打字稿，才有可能更有效地构建应用程序。您可以使用CSS，HTML和JavaScript编写组件，并且在构建过程中，Svelte会将它们编译为单独的JavaScript模块。

结果，Svelte 3构建了重量更轻的DOM。例如，Svelte上压缩格式的TodoMVC实现重3.6 KB。为了进行比较，即使没有应用程序代码，React加ReactDOM的压缩形式也重约45 KB。在React上完全下载TodoMVC在浏览器上花费的时间比在Svelte上花费的时间长10倍。

的确，与框架相比，很难公正地评估Svelte的性能，因为框架本质上是非常不同的。

但是，如果您想了解有关这些Web框架的实际比较的更多详细信息，观看此视频将很有用。

根据GitHub的说法，Svelte Native的速度明显快于Ember，Angular，React，Ractive，Preact，Mithril或Riot。它甚至能够与Inferno竞争，后者可能是目前世界上最快的UI框架。最后，这是决定性的优势，因为更高的应用速度可以使您领先于竞争对手。

苗条的组件

让我们深入研究Svelte结构的细节。 Svelte上的任何PWA [Progressive Web Application]组件都可以包含三个部分：脚本，样式和模板。这是什么意思的更详细描述：

脚本标签：可选的JavaScript块，其中包含在组件内部使用的函数和变量的声明。

样式标签：另一个可选单位。可以将其视为常规HTML样式标签，但有一个关键的区别。在此块中描述的规则仅适用于当前组件。将样式应用于元素P不会影响页面上的所有段落。很好，因为不需要为不同元素提供类。也就是说，您将无法无意中重新定义另一个样式规则。

模板块：这是最后一个也是唯一的块，通常是H1标签。这既是组件的视图又是组件的视图。它定义了其行为和设计，因此与脚本和样式块紧密相关。

为了更好地创建所有这些组件，我建议您阅读A镜头代码中的简短易懂的解释：

由于这些原因，我们可以将Svelte视为试图将模块化引入前端的库。通过对各种组件进行分组来支持这种模块化。但是，该框架还隔离了模板，逻辑和设计。默认情况下，Svelte分别为每个组件构建样式。也就是说，您将避免组件之间的任何样式泄漏，这不保证使用某些其他框架。

值得注意的是，Svelte与名为的JavaScript变量可以很好地交互name。这是Svelte v3的新概念。现在可以从HTML标记访问组件脚本中的任何变量。您也不需要学习用于管理状态的任何特定于框架的语法。您不需要处理dataVue，$scopeAngular或this.stateReact。相反，您可以在任何地方使用let以实现分配的状态值。每次更改值都会自动重新渲染。

在实际中是这样的：

创建一个Svelte组件类似于使用CodePen。您不必怀疑如何连接通过一些学习的声明性JS函数DOM query-selector。苗条不会影响 window listeners或callback functions。这些基本原理保持应有的状态。

这些组件的另一个好处是它们与传统组件一样具有优先权。您需要做的就是导入.html，Svelte将了解如何部署它。

关于Svelte.js您还需要了解什么

与其他框架相比，让我们谈谈Svelte在开发过程中的其他重要优势。

初学者友好

前面我们提到过，Svelte受欢迎的部分原因是它对于初学者来说很简单。使用它时，无需操纵DOM。另外，您无需了解特定于框架的状态包装器。可以直接从标记获得对变量的访问，这大大简化了创建应用程序的过程。与Svelte合作，程序员可以学习组件状态的基本原理，而不会在细节上感到困惑。

Svelte为条件语句提供了自己的语法，并为显示DOM元素提供了循环。这里的操作原理类似于JSX。但是，所有这些封闭的括号对于初学者来说很容易迷失，并不是那么重要。

值得一提的是Svelte的一个奇怪之处：它将属性传递给组件。该框架易于学习且功能齐全，但是，对于某些开发人员而言，其语法过于奇特。

向后兼容

以前，例如，如果您需要将某些日历小部件或任何其他日历小部件集成到您的应用程序中，则只能使用构建该小部件的框架的相同版本来执行此操作。也就是说，如果您在Angular中构建应用程序，并且该小部件是在React中构建的，则您将无法对其进行集成。但是，如果小部件或您的应用程序是使用Svelte构建的，则有可能实现。

代码分离

假设您使用React作为主要框架。如果您最初只使用一个React组件，而没有使用很多组件，那么您仍然必须下载整个React。使用Svelte，由于将框架内置到组件中并且该组件非常小，因此代码分离效率更高。

支持开源社区

Svelte是由发烧友开发的开源软件。因此，使用Svelte框架是免费的，并允许您免费实现许多功能。此外，Svelte在GitHub上拥有活跃的开发人员社区，您可以加入该社区，您随时可以在其中寻求帮助或对此技术做出贡献。

Svelte是否足够稳定和可靠

对于最近投放市场的框架来说，这是一个紧迫的问题。以上所有示例均与Svelte版本3语法有关，目前仍处于beta版本。与ReactJS和VueJS等行业巨头相比，它不是很发达。

不管SvelteJS多么有趣，您都应该等待一会儿，然后再学习使用它的代码的大师班。这是因为Beta版本可能与最终版本有所不同。但是，Svelte为版本3提供了简洁的文档，这对于初学者而言可能更容易。因此，该框架当然可以视为您值得信赖的技术堆栈的一部分。

Svelte.js是下一个巨头吗？

很难回答。 Svelte能否击败Vue和React作为经受住时间考验的前端框架？

这不是那么容易预测。目前，他尚未达到某些兄弟的知名度。他没有像React那样得到大公司的支持。但是话又说回来，没有她，Vue的表现还不错。

去年，对JS州进行了另一项研究。每年举行一次，以评估领先开发商的偏好。与调查中包含的其他图书馆相比，Svelte已成为最受欢迎的图书馆。这可能意味着迟早它将被视为最佳的JS框架之一。

斯维尔特vs. React是程序员之间讨论的常见话题，但是其中一个框架不一定明显优于另一个框架。Svelte非常适合开发Web应用程序或MVP，而Angular非常适合PWA或企业Web应用程序。一些开发人员找到了他们喜欢并坚持使用的框架，但是即使如此，也不要让它尝试Svelte。您可能喜欢我们描述的功能。

让我们

再次简要介绍Svelte的主要功能：️

这是一个基于组件的框架，不需要其他插件。
️它可以与状态管理一起使用，没有任何常见的困难。
️它允许您使用内置的[在组件中]样式，而无需CSS-in-JS，因此不需要代码编辑器扩展或奇怪的语法。
️一个非常简单的构建脚本足以开始使用。
️要开始基础项目的工作，几乎不需要文件。

如果您是需要新框架的Web开发人员，请确保Svelte值得一试。在其他情况下，如果您正在寻找适合您的Web解决方案的最佳技术，那么Svelte可能是一个值得关注的好选择。

为什么要在Web项目中使用Svelte