试试Svelte吧

2020-09-23 17:49:21

最近,我在观看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订阅源,订阅我的时事通讯。