使用SvelteKit构建实时websocket应用程序 - Ingest

使用SvelteKit构建实时websocket应用程序 - Ingest

我们最近构建了一个webhook 测试工具，可以为每个请求自动生成类型。它叫做https://typedwebhook.tools，它是免费的、开源的，它的目的是让开发更容易。

在这篇文章中，我们将介绍如何使用 Svelte 为 webhook 工具构建实时 UI。以下是我们将讨论的内容：

Svelte 是一个用于构建逐步增强的Web 应用程序的前端框架。它有几个关键思想：

• 没有运行时。它在构建时生成组件（使用 Vite），并且不发布运行时。简而言之，这意味着更快、更小的客户端代码。
• 共用工具。 它使用 JS（或 TS）、CSS 和 HTML。您已经知道的工具。
• 多合一。它带有内置的状态管理、转换、动画等。状态管理是轻松且被动的。

简而言之，它是为高性能 Web 应用程序、开发人员效率和开发人员 UX（这是我们的核心原则之一）而设计的。

为u什么使用Svelte？

我们对React非常熟悉。我们已经发布了许多使用它的应用程序——无论是 Web 应用程序还是 React Native。那么，为什么要承担使用新框架来构建 UI 的生产力损失呢？

Svelte 有一些特性使其非常适合该项目。正如我们所提到的，我们正在制作一个工具，允许您创建免费的、唯一的 URL，您可以将其用作 Webhook 端点进行测试。我们提取 webhook 请求，将标头和正文存储 60 分钟，然后向您显示数据。

新颖的部分：我们还为我们看到的每个 JSON 有效负载自动生成typescript类型、提示类型和 JSON 模式，以便您可以轻松地处理数据。

所以这就是我们选择SvelteKit的原因。

• 使用Vite，它可以在开发中快速构建。而且它有HMR，有开箱即用的状态持久性。不知何故，无论你使用什么工具包，这在每个react应用中都是被破坏的。
• 它有开箱即用的SSR。它是为渐进式增强而构建的，而且配置预渲染是我见过的最简单的。Next也有这个功能--我们的网站使用Next，并为我们的文档建立了自己的Next.JS文档插件--但在NextJS中处理状态就有点困难了。我们发现Next非常适合于静态网站，或者有少量交互性的网站。这给我们带来了...
• 状态管理很容易。它很容易与商店合作。你可以（广义上）从任何地方使用商店：不需要顶层上下文。它是开箱即用的，而且在任何地方都能工作。它也是反应式的，而且很容易与那些不在组件中的东西集成（咳，websockets）。

而且，由于SvelteKit带有标准的做事方式（CSS、JS、表单、状态、路由），它很容易操作，也很容易在开发者之间分享。这就是为什么我们选择SvelteKit而不是纯粹的Svelte。它很容易设置并运行你的整个框架--想想NextJS和reate-react-app在Svelte中的混合。

以下是对Svelte(Kit)的快速评价。

它很容易开始和深入。你可以通过使用npm init svelte@next来启动和运行SvelteKit。它就像CRA那样为一个项目搭建脚手架。你可以用一个空白项目或演示项目作为支架。如果你最好的学习方式是到处乱搞，那么用一个现有的项目做脚手架来看看它是如何工作的就很好。

路由是简单明了的，就像Next一样。它使用相同的原则：文件夹路径代表路由，[params]代表动态内容，等等。

需要一点时间来适应他们定义组件的方式（一个脚本标签、一些HTML和一些CSS）。这很独特，但很好。它强制要求每个文件有一个组件，使CSS变得容易，而且为组件定义任意的JS也很容易。

标准的$lib/Foo.svelte导入破坏了Storybook，使类型检查更加困难。它还破坏了neovim LSP的跳转定义，等等。通过一些配置的改变，这可以被修复，但在开箱后这是一个小障碍。

状态管理是如此简单。从字面上看，创建一个存储，你就可以开始工作了。变更存储空间也很容易。我们花了大约3分钟将websocket突变整合到存储中，并使其在整个应用中传播。

查看状态最初感觉很奇怪（但效果不错）。假设我们在一个名为pages的变量中拥有一个存储。你使用pages访问存储的订阅和变异功能。而你用$前缀的版本访问数据：$pages。这里有一些神奇的事情发生。这里也有很好的解释。这在第一天很容易忘记，但你会习惯它--一个小问题。

衍生的商店，商店的绑定--它是经过深思熟虑的，而且很简洁。这让我非常高兴，因为我们已经从过去的冗长中取得了进步。

使用标签的Reactive语句有点古怪。如果你来自React，你可能会认为声明变量 "就是有效的"。渲染那些因为你忘了标记为反应式而不更新的内容会容易一点。

把模板中的每一个渲染的变量都标记为reactive也很容易。我想知道这是否可以成为一个默认值，其影响是什么？

做CSS的 "一个 "方法对包来说是很好的。大多数软件包都使用CSS变量来管理主题。它很容易用包装器来调整（这里有一个例子）。它推动了实际的标准。

这就是说，很容易错过 emotion.sh 与选择器的良好嵌套、可靠的 & 和花哨的预处理。

文档在例子和经典文档之间是零散的。这还不错，虽然它们可以整合在一起。

这是一个非常简单的应用。也许你会在更复杂的东西上怀念redux风格的动作（并不是说我们已经使用了Redux，createReducer已经 "足够好 "了），但这里的一个大的警告是，我们还没有使用Svelte到足以知道它在一个可怕的复杂的UI上是如何工作的。

令人惊讶的是，我们需要的两样东西都有Svelte包：JSON 视图和toast 显示 作者是同一个人!

它确实在各方面都有惊人的速度和性能--加载、绘制和使用。在没有任何优化的情况下，这是第一个灯塔配置文件。