试试Svelte吧
最近，我在观看2019年州立大学的比赛时，再次遇到了这颗冉冉升起的新星。他们获得了“预测奖”，这意味着他们“被授予了一项可能取代…的新兴技术”还是不要？“。
我去年读过关于斯维尔特的报道，但没有什么能吸引我，以至于我把它忘了。但是stateofjs 2019年让我很好奇，所以我访问了这个网站。
好的，不错的…。是啊，听起来不错！我当时不知道，我会推荐你的下一款应用的框架，但是它引起了我的注意。多年来，我一直沉迷于ReactJs和角色化，我认为有足够多的前端框架可以让人深入了解。我看了一下VueJs，我也很喜欢它，但我从来没有在项目中使用过它。
回到主题上来！他们鼓励你阅读他们的介绍性博客文章，所以我继续说。从这里开始。你们都应该看看Rich Harris关于“反思反应性”的视频，这段视频来自You Gotta Love前端代码营。即使你对学习Svelte不感兴趣，如果你只喜欢ReactJs，Vue或任何其他原因。这次演讲非常有趣。
查看您在Svelte中的第一个组件需要了解的内容，并从编译器框架了解版本3的主要优点。这篇文章试图勾勒出Svelte的关键事实，而不是像角度和Svelte一样的比较。
如果你喜欢这篇文章，请分享它，关注我，查看我的RSS feed，订阅我的时事通讯。
那是什么？它是一个组件框架。您可以定义组件，并在您的Web应用程序、网站或您正在实现的任何东西上重复使用它们。就像在ReactJs、VueJs或任何其他框架中一样。但是有什么不同呢？其中一个主要区别是在构建时运行。
但这意味着什么，它在构建时运行？这意味着Svelte更像是一个编译器，而不是一个运行时组件框架。它不需要浏览器中的任何抽象层来运行您的代码。它将您实现的组件编译成纯JavaScript代码。
所有浏览器都喜欢纯JavaScript或Vanilla JavScript，因为这种高效的代码可以比其他任何代码更快地解析和执行。因为它是纯JavaScript，所以您的代码直接更改DOM。Svelte不需要虚拟DOM来模拟对用户的快速更新。
此外，它还带有内置的反应性机制。因此，您不需要任何状态管理或外部数据绑定库来同步动态div类属性。
…。框架主要是用来组织思想的工具，而不是用来组织代码的工具。(里奇·哈里斯)。
Svelte是一个框架。REACTION和ANGLING也是框架，我们也可以考虑使用VueJ。使用Svelte的主要理由是什么？
在部署时，您将获得在浏览器中运行的普通JS。快速、纯净的JavaScript。
开发的应用程序高度兼容。例如，如果使用Svelte开发计时器，则可以在任何其他框架中使用小部件的编译版本。为什么？看看1号，它是瓦尼拉JS。
如果没有运行时框架的抽象层，向浏览器提供的代码就会更少。代码拆分可能更有价值。您只需为您的代码提供服务，而不使用框架代码。
维护人员可以自由选择他们想要包含在框架中的功能。因为Svelte本身不在编译后的JavaScript输出中，所以他们可以添加特性，而不必担心用户在运行时的性能问题。他们可以添加很多特性，而我们开发人员中没有一个人因为捆绑包大小而处于劣势。
密切关注这样伟大的方法总是很好的。就性能和用户体验而言，我认为像GatsbyJs这样的JAMStack应用是不可或缺的。
剧透：背后的团队还开发了Sapper-web开发中的下一个小东西。
最简单的方法是使用他们的REPL。REPL是一个在线编辑器，您可以在其中查看浏览器中的框架功能。我建议您也完成教程。它们彼此构建得很好，但如果您只是想在功能之间跳转，它们仍然是独立的。
如果您想在本地机器上构建应用程序，请确保安装了NodeJS。否则，您可以使用REPL。
在本例中，我们使用Node安装，并使用npx命令在本地机器上安装开发环境。
这些命令为我们下载所有必要的文件，我们需要使用NPM install完成安装，以安装我们的Package.json中列出的所有依赖项。
运行npm run dev在浏览器中启动并访问端口5000上的localhost。
在开始编码之前，让我们快速了解一下组件基础知识：
您可以在每个组件文件中编写HTML代码。我的文件底部有我的HTML。例如，没有样式和JavaScript的简单组件如下所示。
组件样式包装在<；style>；标记之间，并包含组件的HTML。我们在上面的标题中添加了一些样式，我将该文件重命名。
我们将<；script>；标记添加到文件中。脚本块包含JavaScript逻辑。为了说明这一点，我创建了另一个名为DynamicStyledHeadline.svelte的文件。
看看我是如何将相同的变量添加到HTML{Variable}中的花括号中的。这就是让模板可以访问变量的方式。
从'；./Components/SimpleHeadline.svelte；导入简单标题。；从'；导入样式标题。/Components/StyledHeadline.svelte；从'；./components/DynamicStyledHeadline.svelte'；；导入动态样式标题{/*...*/}<；！--...-->；
如果您像上面那样将组件导入到您的App中，您可以在本地页面上看到DynamicStyledHeadline。
⚠️标记清理⚠️如果您想要将标记插入到变量中，您可以使用类似语法的注释。{@html string}不会清理您的标记。您应该手动退出它。
我喜欢的是框架提供的警告。在下面的示例中，将显示一条警告，指出未找到alt属性。您可以在本地开发环境或REPL中看到通知。
让src=#39；tutorial/image.gif=#39；；<；！--速记-->；<；！--svelete期望此行具有alt属性：<；img{src}alt="；一个男人跳舞。"；>；-->；
在应用程序的大多数情况下，您需要根据应用程序或组件状态呈现标记。在Svelte中，您可以使用if/Else语句来实现这一点。如果您在任何项目中使用车把，您可能会觉得它们很眼熟。任何条件块都以#开头，以/结束。如果需要Else块，可以使用：字符，如下所示。Else块可以是普通的，也可以带有另一个if语句。
让name='；Nora&39；；{#if name='；Nora&39；}{name}--多美的名字。{/if}{#if name='；Nora'；}{name}-多美的名字。{：Else if name='；Linda'；}{name}-我喜欢那个名字{：Else}{name}-这个名字也很美。{/if}。
在现实世界中，我们需要遍历数据。与if语句一样，块以#开头，以/character结束。只要对象具有Length属性，就可以循环遍历任何对象。您可以使用每个[...iterable]循环遍历泛型迭代器。在我们的示例中，我们循环遍历Names数组，并在as关键字的帮助下访问当前名称。此外，我们还获得作为第二个参数的当前索引。
您也可以使用解构语法。在本例中，使用每个名称作为{name}。
让Names=[{name：'；Nora'；}，{name：'；linda'；}，{name：'；helga'；}]；美丽的名字{#每个人的名字都是currentName，index}{currentName.name}{/each}。
因为我们在Web开发中都必须处理异步，所以我们也必须等待它。像AWAIT关键字这样的JavaScript语言特性可以帮助我们做到这一点。在SVELTE中，我们获得了一个方便的语法来等待承诺的解析：#Await🚀。
让Promise=getRandomNumber()；异步函数getRandomNumber(){const res=等待读取(`torial/Random-Number`)；const text=等待res。Text()；if(res.ok){返回文本；}Else{抛出new(Text)；}}函数handleClick(){Promise=getRandomNumber()；}生成随机数{#aWait Promise}...Waiting{：Then Number}数字为{number}{：catch error}{error.message}{/await}
您可以在GitHub上找到本文的所有资源。请随时查看，尝试一些东西或叉子。
现在您应该已经为您的第一个组件打包好了。如果你想潜水得更深，我建议你花一两个小时的时间，通过官方的Svelte培训教程。👨🏫。
如果你喜欢这篇文章，请微笑片刻，分享它，关注我，查看我的RSS订阅源，订阅我的时事通讯。