使用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 顯示 作者是同一個人!

它確實在各方面都有驚人的速度和效能--載入、繪製和使用。在沒有任何優化的情況下，這是第一個燈塔配置檔案。