至少这样做了几年的任何Web开发人员都可能日复一日听到类似的问题：
我真的很想成为一名Web开发人员，但我不知道从哪里开始。 有什么建议吗？
大约十年前，答案非常简单。 只需创建index.html，在其中添加一些标签，使用CSS将标题设为红色，并使jQuery能够处理点击！
哦，一切都变了。 现在，我们正在使用构建工具，客户端路由，具有出色运行时的特殊框架，在各处绑定“ this”，模板文字，CSS-in-JS ...如何选择最重要的？
所有这些导致了从何处开始的无数变化，变化程度从“现在就输入，我将在后面解释”开始。 一些人鼓励新来者立即学习React或Vue，以开始现代实践。 当其他人从山顶上大喊时，初学者应该始终从基础开始。 实际上，两种方法都有其优点。 第一种可能会吸引新手加入热装和组件之类的事物，冒着太多留给一方的风险。 尽管第二种方法使新来者了解DOM的工作原理，但与此同时，也许让人们分散了香草JS的复杂性，而我们早就忽略了它们。
这就是为什么我们需要一个中间立场。 一种从基础开始的方法，同时吸收诸如基于组件的开发，隔离与级联CSS，模板，声明性函数等现代概念。 等
苗条，为您服务
SvelteJS是js框架框架中的一个相当新的组件，刚刚开始引起人们的注意。 发布
JavaScript 2018状态后可能有人知道它。 简而言之，Svelte旨在成为一个并非真正的框架。 它基于在组装阶段用于编译组件的工具，该工具使您可以仅在页面上加载显示应用程序所需的内容。 这意味着没有虚拟DOM，在框架之上没有框架，并且
在runtime也不存在框架 。
对于经验丰富的开发人员来说，所有这些都是相当严肃的论据，但是大多数初学者可能在不打破头脑的情况下无法阅读最后一段。 幸运的是，使Svelte对初学者如此友好的不是编译魔术，而是它的语法。
如果您从未见过Svelte组件，这是一个简单的示例：
<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> .pretty { color: red; } </style> <script> let name = "Ben"; </script>
让我们弄清楚。 因此，首先，值得注意的是，如果您的灵魂愿意的话，所有这些都可以编写成普通的
.html文件甚至
.svelte文件。 我们还看到一些熟悉的标记，让人联想到没有框架的开发：
style和
script 。 在这些标记中编写了样式和JS代码，以正确地构建组件。 此外，它还允许语法高亮显示而无需其他编辑器插件，例如CSS-in-JS解决方案。 此外，Svelte编译器足够智能，可以默认隔离任何特定于组件的样式。 因此，您将不会在组件之间流动样式。
您还将看到JavaScript变量
名如何神奇地发生。 这是Svelte 3的一个绝妙的新概念，其中可以从标记访问组件脚本中的任何变量。 我们没有特殊的语法需要学习以管理状态。 既没有Angular
$范围 ，也没有React
this.state ，也没有来自Vue的
数据 。 取而代之的是，我们可以简单地使用普通变量来描述状态，从而只要其值发生更改就可以重新呈现。
不受语法“行话”的限制，这意味着创建组件开始像创建CodePen一样，而不必考虑如何将声明性JS函数连接到某种DOM选择器。
另一个好处是，Svelte组件的导入与传统组件一样容易。 您可以简单地导入
.html ，因为Svelte知道如何部署它：
<div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script>
很酷，但是请稍等...
一些读者可能会觉得这个概念像我一样令人叹为观止。 同时，其他人可能有反对使用这种方法教初学者的观点。 他们不好奇DOM操作实际上如何工作吗？
答案是……可能。 但是，当某人刚刚起步时（至少从个人经验出发），您可以接受一些抽象，以便更快地创建很棒的东西。
此外，就像某些语言（例如Java和JS）通过垃圾回收来抽象指针管理一样，大多数现代Web开发工具都忽略了DOM操作。 除了初学者可能不需要的更困难的极端情况。 顺便说一句，如果您对指针管理是什么感到困惑，我认为这只能证明我的观点。 因此，为什么不让他们直接从标记中直接访问变量，而不是强迫新手操纵DOM或学习特定于框架的状态管理方法？ 现在，他们可以学习组件状态管理的基本原理，而不必为之苦恼。
好的，我看到一个基本示例，但是Svelte应该具有一些特定功能才能正常工作。
毫无疑问，这是真的，但是比您想像的要少得多。 Svelte语法的一部分是用于迭代和有条件地映射DOM元素。 它的工作原理与JSX中的
地图非常相似，但是没有所有这些嵌套的括号，新来的人（和我）很容易迷失其中。 这是从数组生成元素列表的基本方法：
<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>
同样，我了解对语法的任何批评，但我喜欢它的理解是如此容易。 我们没有说将JavaScript嵌入到我们的HTML代码中，而是简单地说：嘿，让我们循环遍历此数组并为每个数组创建一个元素。
值得一提的是Svelte的另一个功能，我不太热衷：将props传输到组件的语法。 是的，它功能齐全且易于学习，但是同时，对于某些人来说，它似乎太神奇了。 要处理道具，我们只需将它们传递到组件中导入的任何位置...
<Profile coolGuy="Scott Tolinski" />
...，然后将此变量作为导出的“ let”获取：
<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的语法，在撰写本文时，该版本仍处于beta中。 令人兴奋的是，我还要等几个月，然后赶他去编程研讨会。 尽管如此，Svelte
为版本3提供了一个非常简洁的
文档页面，可以使初学者更轻松。
因此，让我们看一下使用Svelte学习Web开发的一些主要好处：
- 这是一个具有0个其他插件的组件框架。
- 他管理国家没有任何普通的垃圾
- 使用样式隔离而不使用CSS-in-JS（因此不需要编辑器插件或愚蠢的语法）
- 首先，您只需要一个非常简单的构建脚本。
- 基本项目中几乎没有其他文件
当然，如果我不能在本文中说服您，这是完全正常的。 所有好的文章都引发了一些争议！ 但是我希望这篇文章至少向您展示了如何学习Svelte多么酷又简单。
感谢您阅读本文！
我是学习过程中的前端Web开发人员，总是为新事物而烦恼。 我将尝试在此处定期发布，如果您愿意，请写信！
***
来自翻译者：
感谢您阅读此翻译！ 我希望本文鼓励您将Svelte视为培训工具或什至是新项目的工具。
参加 5月24日至25日在
HolyJS Piter上有关Svelte 3的2小时工作坊。 谁愿意跟随Svelte的发展而来，欢迎来到俄罗斯电报频道
SvelteJS 。 我们将很高兴见到您！
并进行了少量调查，未参考框架和技术。 您的意见很有趣。