Geekly articles weekly

疼痛和眼泪在Svelte 3

而不是前言


对于那些我们决定在实际项目中尝试Svelte的人来说，本文将是有用的。 我们的小公司收到了一项命令，要求开发一个带有Mongodb Stitch后端的服务的Web管理员。 在过去的几年中，前端我们用React或Vue编写（取决于项目的大小以及是否需要ReactNative），但是在听完Svelte的魅力之后，我们决定尝试让它自己了解它是否不错。 也许我们也应该使用它代替Vue或React？

谁是斯维尔特？


图片

简而言之-这是新的js框架（但他不这么认为），它是React和Vue的杀手,，等等，等等……在我的文章中，我不仅要考虑Svelte在“引擎盖下”的酷炫性，而且要从这一点出发在实际项目中使用它的便利性的观点。
我们不制造汽车，我们驾驶汽车，我们有邪恶的顾客，而邪恶的条款也不少。

讲解


开始学习新语言或框架的第一件事是该站点上的教程。 在Svelte，这是Svelte.dev/Tutorial 。

不幸的是，部分教程根本无法在预览版中在网站上运行，尽管尚不清楚它是否可以在现实中使用。 您必须花费时间并手动检查它，因为尚不清楚该教程是否过时或Svelte网站上出现了问题。 这确实需要很多时间。

UI套件和样式


图片

为Svelte寻找UI套件对我们所有人来说都是一个单独的痛苦。 我想大声疾呼：“至少是材料，引导程序……至少是某些东西……”。

仅找到sveltematerialui.com和svelteui.js.org ，此刻看起来很原始。

只需从其中导入<Button/> ，就可以在组装期间从包装中发现一个错误，因此没有时间解决ui kit错误。

快速浏览了文档之后，我决定放弃该文档，转而从CDN导入Vanilla。

我想在项目中使用Material UI，因为有可能也可以通过移动设备使用管理面板，而Material非常适合此操作（在我看来，在桌面上看起来更糟）。

在没有UI套件的情况下使用JS在精神上使我回到了10年前）类机车和怀旧之情。

由于Svelte以“不同的方式”与DOM一起工作，MaterialUI开始弄清与显示如何通过js添加到dom的UI组件有关的各种讨厌的事情。 例如，每隔一段时间显示一次简单的微调器：

图片

经过长时间的搜索后，发现出了什么问题，事实证明，在文档准备就绪（onLoad）之后，通过JS在Material UI中添加了微调器，但是在此事件之后，Svelte开始将其添加到DOM中，并且由于该事件，JS脚本Material根本看不到它。之前。

这必须通过添加到Svelte的父组件来解决：

  afterUpdate(() => { componentHandler.upgradeDom(); });

程式化


使用样式，一切都非常清楚，我们将所有样式都填充为Vue中的样式。 您编写样式，一切都很好，然后编写UI组件（因为您没有UIKit），该组件应带有props参数（例如width和height），并在逻辑上这样做：

 <script> export let width = '20px'; export let height = '20px'; </script> <style> .loader { width: { width }, height: { height }, } </style>

而且...不，在这种风格下，您无法插入变量。 您可以通过“ ReactWay”摆脱这种情况，并在“脚本”中将动态样式作为带有样式返回的变量或函数。

结果，在脚本的style部分中，我们又有了稀饭，这是部分样式。 仅当样式中没有参数或只有动态参数且仅在脚本中时，才会获得纯代码。

路由和路由器


没有普通的路由器，您甚至无法制作一页应用程序。

在扩展“ Hello World”项目时，React，Vue在框中已经带有路由器（或者您可以选择它）。 但是像斯维尔特的一切一样，这并不容易。

您需要自己选择路由器，甚至在非常相似的解决方案之间也要选择。 实际上，到目前为止，只有两个github.com/EmilTholin/svelte-routing和github.com/kazzkiq/svero路由器 。

两者非常相似，但是我选择了第一个，是根据星星的数量选择的（是的，我知道，我是一个可怕的人）。

因此，让我们开始将其嵌入到我们的MDL中。

将所有内容包装在<Router url =“ {url}”>中，并为导航中的链接添加<Link /> 。

图片

转到预览，看看发生了什么。

但事实证明，斯维尔特（Svelte）的童年病仍在继续，无法将课程转移到<Link />。 出现了一个合理的问题，您将如何对其进行样式化？

显然，这仍然是路由器的问题。

幸运的是，我们可以通过指定use：链接将通常的href =''绑定到路由器，对此特别感谢。

失误


与React不同，React根本不允许您创建捆绑包，并且会对错误大声尖叫，Svelte会完美地收集所有包含错误的内容。 同时，如果您忘记了一些东西，请安装npm install或export，一切都会好起来，并且只显示白屏（顺便说一句，在React的第一个版本中就是这种情况）。

在React和Vue中，我们曾经在构建或棉绒阶段看到这种错误。

结果，您将不得不在两个地方捕获错误。 公平地讲-这是在React和Vue中，但频率要低得多，并且这种明显的错误会在皮棉阶段捕获。

Svelte只需要命名约定


在没有命名约定的情况下，您会经常遇到此问题。

例如，回到路由器。

有这样的导入：

     import { Router, link, Link ,Route } from "svelte-routing";

这个链接和链接是什么？ 即使在像我这样的小项目中，Svelte中使用的项目中也缺少命名约定，这已经造成了混乱。

当然，在ReactMan看来应该是这样的：

 import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing";

在Svelte中， ref与React类似，它是对dom元素或组件的引用。
官方教程告诉我们这样做：

 <script> let dialog; </script> <dialog bind:this={dialog} class="mdl-dialog» />

如果组件中有15个变量？

 <script> let loading; let pins; let dialog; let stitch; </script> <dialog bind:this={dialog} class="mdl-dialog» />

这些变量到底在哪里，什么是变量，到组件或元素的链接在哪里？
从初学者及其变量约定的角度来看，我将修改该教程并使示例更正确（请参见React教程中的一个好示例）。 如果让油醋汁做变量，则最好是棉绒或捆扎机在这样的油醋汁处发誓，例如，这是由golang完成的。

 <script> let dialogElement; </script> <dialog bind:this={dialogElement} class="mdl-dialog» />

当您在组件函数中接收到一些数据并且必须将这些数据发送到View时 ，这是“生活”的另一个示例，其中某些变量被拧到UI元素的一部分上。 它对我们（或更确切地说，对于我们的程序员）看起来像这样：

  async function ReloadPins() {        loading =  true;        pins = await getAllPins();        status = 0;    }

当我打开它的代码时，立即对我“清楚”了一个变量，该变量的状态和状态附加到我们的UI上 。

当然，只是开玩笑，还不清楚。 此外，状态甚至不明确，还是只是一个辅助变量。 在React中，这是由状态决定的，这至少在某种程度上带来了清晰度。

发生了什么变化，何处发生了变化？


Svelte组件内部的变量是全局变量，它们随处更改（Hello Angular）。
但是有个好消息，它们在一个组件中是全球性的（而在Angular中），因此，在一个组件中，这种整体的变化并不是那么可怕。

同时，您可以节省代码“美”的时间，而不用考虑将状态设置为变量所需要的内容，而不必考虑要留在函数内部的内容（嗨，React）-您应有尽有。

图片

结果，您可以很快地编写组件，但是几天后，当他本人已经忘记（有时甚至是他的名字）时，很难理解大三在此“沙拉”中写的内容。 因此，如果没有在项目或团队中清楚地组织代码，就不可能理解其中的内容。

装订针


Stitch很棒，我一定会告诉您更多信息，并将其与同行进行比较，在下一篇文章中评估生产中的测试，但现在更多地介绍Svelte。

要使用Stitch，您必须遵循“香草”路径并插入：

 <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script>

由于使用npm和常规导入包时， 缓冲区错误的问题开始了。

我不知道这是否与Svelte收集器或Stitch本身或其他有关，但是我没有时间去挑选它，我只需要添加一个带有import的脚本 ，之后一切都可以成功进行。

这些是我们在与Svelte合作时遇到的主要问题。 老实说-总的来说，我们不喜欢它，没有人...

结果是什么：

为什么需要斯维尔特？


  • 如果您独自工作，并且急需执行MVP或小型管理面板。 大型管理面板会出现问题，因为在编写新代码时，您会忘记旧代码，或者必须编写自我记录的代码，因为Svelte不会“强迫”您这样做。
  • 如果捆绑包的大小对您来说非常重要。 例如，您正在为仍然没有3G或Internet速度非常慢且价格昂贵的国家/地区制作Web应用程序。 在世界上大多数地区，昂贵的程序员而不是Internet，因此在99％的情况下，合理范围内的捆绑包大小将不是实际问题。
  • 如果您刚刚开始学习如何用JS编写文字并进行前端操作，Svelte将为您提供所有“自由自在地”，在办公桌旁或在腿部进行大型拍摄的自由。 实际上，您不需要长时间学习JSX或理解代码约定，您可以立即执行第一个前端项目，并查看您是否已经成功，甚至可以正常工作。

基于后者，我真的不明白为什么Svelte维护者会提供TypeScript支持？ 我们喜欢Svelte只是为了“投足”，而我认为TypeScript就像Svelte跑车的全地形赛道。 您知道，与Svelte一起工作后，我意识到JS近年来发生了很大变化，并且不再是JS。

Svelte提供了使用相同的旧版JS工作的机会，而无需PropTypes，Flow和TypeScript。

我喜欢什么？


  • 易读的if / else，这不在Vue中。 我真的很想在Vue中看到类似的东西。
  • 您可以在组件中创建事件 ，并避免将回调传递给child中的函数，以便child> parent之间进行通信。

为什么不使用Svelte？


  • 没有一个完全正常工作的UI套件。 很难想象没有UIKit的Web应用程序；只有Svelte不适合的大型项目才能自己编写UI Kit。 拧一些香草的东西会创建自己的UI组件（其UI套件），或者与错误和“机车”类作斗争。
  • 一些简单错误的隐性，仅在测试阶段才捕获。
  • 如果要制作一个多平台应用程序（现在到处都是移动设备），则必须将所有内容重写为ReactNative或用手完成生成的NativeScript（Svelte有一个NS生成器）。 公平地讲，Vue在移动开发方面也做得不好，但是它也具有一些工作功能。
  • 您将需要为项目中的开发人员编写非常清晰的代码约定，因为该教程和示例并非为团队开发而设计。

Source: https://habr.com/ru/post/zh-CN469361/

More articles:


All Articles