为什么 SvelteJS 可能是新 Web 开发者的最佳框架

任何从事该行业几年的 Web 开发人员可能每隔一天都会听到这个问题。

我对学习 Web 开发非常感兴趣，但不知道从何入手。有什么建议吗？

十年前，这个问题很容易回答。只需创建一个index.html，往里面放一些标签，用 CSS 把标题变成红色，然后用 JQuery（或者更简单的 JavaScript，取决于你问的是谁）来处理鼠标点击！

……唉，世事变迁啊。现在我们到处都在用构建工具、客户端路由、带有花哨运行时脚本的特殊框架、到处绑定“this”、模板字面量、CSS-in-JS……我们该如何选择最重要的东西呢？🤷‍♀️ 如果有人连 DOM 是什么都不知道，那我们根本没法教 React 如何使用虚拟 DOM！

这导致了无数的入门途径，但都带有不同程度的“现在就写好，我稍后再解释”的倾向。有些人鼓励初学者立即学习 React 或 Vue，以开始现代实践，而另一些人则大声疾呼，初学者应该始终从基础开始。说实话，这两种方法各有优缺点。前者可以让新手对热重载和组件感到兴奋，但风险在于留下太多未知的东西；而后者可以让初学者了解 DOM 操作的底层工作原理，同时可能会让人们远离我们已经抽象出来的 JS 的复杂性。

那么，我们需要的是一个折中方案。一种从基础知识入手，同时吸收现代概念（例如组件驱动开发、作用域与级联 CSS、模板、声明式函数等等）的方法。

输入：Svelte

SvelteJS 是一个相当新的领域，刚刚开始受到一些关注。有些人可能知道它是2018 年 JavaScript 发展报告 (State of JavaScript 2018) 中最受欢迎的撰稿人。简而言之，Svelte 并非真正的框架；它本质上是一个在构建阶段编译组件的工具，允许你bundle.js在页面上加载单个组件来渲染应用。这意味着它没有虚拟 DOM，没有框架之上的框架，也不需要运行时加载框架。

对于经验丰富的开发人员来说，这些是相当重要的卖点，但大多数初学者可能读不完最后一段，脑袋都要炸了。幸运的是，Svelte 对初学者如此友好的并非编译魔法，而是它的语法。

如果您以前从未见过 Svelte 组件，这里有一个非常基本的示例：

<p class="pretty">Here's some markup <strong>written by {name}!</strong></p>

<style>
    /* here's some scoped CSS */
    .pretty {
        color: red;
    }
</style>

<script>
    /* ...and a variable we can access in the markup */
    let name = "Ben";
</script>

让我们稍微解释一下。首先，值得注意的是，所有这些都可以放在一个常规.html文件中，或者.svelte如果你愿意的话，也可以放在一个文件中。此外，我们看到了一些熟悉的标签，让人联想到无框架开发：<style>和<script>。遗憾的是，在这些标签中编写样式和 JS 是正确构建作用域组件的必要条件，但它允许语法高亮显示，而无需额外的文本编辑器扩展（例如 CSS-in-JS 解决方案）。此外，Svelte 的构建步骤足够智能，可以默认设置任何特定于组件的样式的作用域，因此您不会在组件之间出现样式冲突。

您还将看到名为 的 JavaScript 变量带来的一些神奇效果name。这是 Svelte v3 的一个全新概念，组件脚本中的任何$scope变量都可以从标记中访问。因此，无需学习特定于框架的状态管理语法，也就无需 Angular 、Reactthis.state和 Vue 了data。相反，我们可以随处使用lets 来获取可赋值的状态值，并在这些值发生变化时提示重新渲染。

摆脱这些术语的束缚，意味着创建组件几乎就像在 CodePen 上写代码一样简单，但无需费心思考如何将之前学过的声明式 JS 函数与 DOM 查询选择器连接起来。不过也不用担心：Svelte 不会干扰回调函数或窗口监听器，所以这些基本原理依然保留。

这些组件的另一个优点是它们像传统组件一样可导入。只需导入，.htmlSvelte 就会知道如何解包它😊

<div>
    <Wizardry />
</div>
<script>
    import Wizardry from './wizardry.html'
</script>

很棒，但是等一下……

有些读者可能和我一样觉得这个概念令人难以置信，但其他人可能一想到要把这个概念抛给初学者就心烦意乱。这难道不会让他们对 DOM 操作的真正工作原理感到困惑吗？

答案是……也许吧。但对于刚起步的人来说（至少从个人经验来看），为了更快地做出酷炫的东西，接受一点抽象是可以的。

另外，就像 Java 和 JS 等语言通过垃圾回收抽象化了指针管理一样，感觉几乎所有现代 Web 开发工具都抽象化了 DOM 操作，除了一些初学者可能不需要面对的更高级的边缘情况。顺便说一句，如果你对指针管理是什么感到困惑，我想这在某种程度上证明了我的观点 😛 因此，与其强迫初学者操作 DOM 或掌握特定于框架的状态包装器，为什么不让他们直接从标记中访问变量呢？这样他们就可以学习组件状态的基本原理，而不必陷入困境。

好的，我明白你的基本示例了，但是 Svelte 必须具有一些特定于框架的怪异性才能使一切正常工作。

诚然，这是事实，但实际比你想象的要少得多。Svelte-y 语法中有一个用于循环和条件语句来显示 DOM 元素。这很像 JSX 从 a 返回元素的方式map，但没有所有嵌套的括号，初学者（包括我自己）很容易迷失其中。这是一个从数组生成 a 元素列表的基本示例：

<ul>
    {#each profiles as profile}
    <li>{profile.name}: {profile.role}</li>
    {/each}
</ul>

<script>
    const profiles = [
        {name: 'Wes Bos', role: 'React extraordinaire'},
        {name: 'Chris Coyier', role: 'Father of CodePen'},
        {name: 'Cassidy Williams', role: 'Letting you know it's pi time'}
    ]
</script>

再次强调，我理解大家对语法的批评，但我喜欢的是它易于理解。我们不用在 HTML 中嵌套 JavaScript，只需循环遍历这个数组并为每个元素创建一个元素即可。

Svelte 还有另一个值得一提的怪癖，我承认我对此并不太感兴趣：将 props 传递给组件。没错，它功能齐全且易于学习，但语法对某些人来说有点太过玄机。要处理 props，我们只需将 prop 传递给导入到组件的组件即可……

<!-- somewhere.html -->
<Profile coolGuy="Scott Tolinski" /> 

...并将该变量作为导出的“let”

<!-- profile.html -->
<p>{coolGuy}</p>
<script>
    export let coolGuy = '';
</script>

我完全理解有些人会因为滥用“导出”而感到厌烦，但它至少遵循了初学者概念化模块的方式：我们导出我们应该在组件外部访问的内容，并导入我们想要在组件中显示的内容。

我也许能够克服那种奇怪的感觉......但是构建步骤怎么样？

所以，另一个关于帮助初学者入门框架的批评是需要使用包管理器。这意味着……得用终端了！

听着，我明白，打开那个东西可能会让人望而生畏，因为它的等宽字体和那个吓人的“cd”跳转目录键。但公平地说，当你只需要一个命令就能运行时，这真的不是什么大问题。此外，VS Code 内置的终端让上手变得非常简单；它甚至会直接跳到你当前的项目目录！

Svelte 实际上提供了一个可下载的入门模板，开箱即用，效果很好，但我自己制作了一个入门模板，只使用构建工具 Rollup 进行实时重新加载。实际上，配置文件不到 30 行！对于一个基本的 Svelte 项目，以下是您需要的所有目录和文件：

/public
    index.html
/src
   index.html
app.js
rollup.config.js
package.json

只需添加一个命令来运行构建步骤，package.json一切就绪了！当然，你可以说，如果初学者不接触其他框架所需的所有额外模块和文件，它们都不是问题。但在我看来，新手需要思考的额外内容越少越好。

好吧，它很酷，而且对初学者也很友好。但它是一个稳定的框架吗？

对于像 Svelte 这样年轻的框架来说，这是一个非常相关的问题。我展示的所有示例都使用了 Svelte 3 版本的语法， 截至撰写本文时仍处于测试阶段与 ReactJS 和 VueJS 等框架巨头相比，它的追随者相对较少。因此，尽管它令人兴奋，但我还是会再等几个月才会急于用它来教授代码工作坊。不过，Svelte 为版本 3 提供了一个非常简洁的文档页面，可以让初学者轻松上手，而不会被层层解释弄得不知所措。

因此，让我们回顾一下使用 Svelte 学习 Web 开发的一些主要卖点：

• 这是一个基于组件的框架，没有额外的插件
• 它处理状态管理，没有所有常见的繁琐工作
• 它使用范围样式，而不需要 CSS-in-JS（因此无需编辑器扩展或古怪的语法）
• 只需要一个非常简单的构建脚本即可开始
• 基础项目中几乎不需要任何文件

当然，如果我这篇文章没能说服你，也没关系；所有好文章都会引发一些争议！但我希望它至少能让你看到 Svelte 是多么酷炫，而且学习起来多么简单。

学到一点东西吗？

太棒了！万一你错过了，我特意开通了“网络魔法”简报，来探索更多类似的知识！

这东西探讨的是Web 开发的“首要原则”。换句话说，究竟是哪些糟糕的浏览器 API、扭曲的 CSS 规则以及半无障碍的 HTML 支撑着我们所有的 Web 项目？如果你想要超越框架，那么亲爱的 Web 魔法师，这东西就是为你准备的🔮

赶紧在这里订阅吧！我保证永远教书，绝不会发垃圾信息❤️