Fitz LiveViews 介紹：單一語言打造即時 UI，零 JavaScript 建置

TL;DR — Fitz LiveViews 是 Fitz 的即時 UI 框架。Fitz 是一種已編譯、漸進式型別的語言，其語法內建 HTTP、WebSockets、驗證和 ORM。您只需撰寫單一檔案元件（.fitzv），包含 state / event / <template>，伺服器便會渲染 HTML、進行差異比對，並透過 WebSocket 將變更套用至瀏覽器 — 無需 JavaScript 建置步驟、無需客戶端框架。同一個 .fitzv 也可以編譯成 WebAssembly，讓元件能在離線環境下執行。平台已提供即時元件展示、課程，以及完整旗艦應用程式（具備驗證、Postgres 與 Docker 的管理面板）。儲存庫：github.com/Thegreekman76/fitz-liveviews · 文件：thegreekman76.github.io/fitz-liveviews

這是 FitzLiveViews 系列的第一篇文章。我將從概念介紹與環境設定開始；後續文章將逐步帶領您實作。

問題

建構現代網頁 UI 通常需要兩種語言、兩套型別系統，以及建置流程：後端（Python / Node / Go）加上前端框架（React / Vue / Svelte），再加上其工具鏈（Vite / Webpack / Babel）。您必須在網路兩端重複定義型別、同步兩套心智模型，而 node_modules 也逐漸變得難以管理。

Phoenix LiveView（Elixir）展示了另一種方式：在伺服器端渲染、透過 WebSocket 推送差異，讓瀏覽器保持簡單。無需客戶端框架、無需手寫 API，也無需 JSON 序列化操作。Fitz LiveViews 將此模型帶入 Fitz — 並增加了一項特色：同一個元件在需要純客戶端離線互動時，也可以編譯成 WebAssembly。

Fitz LiveViews 的樣貌

元件是一個單一 .fitzv 檔案 — 包含狀態、事件處理器與樣板，類似 Vue 或 Svelte：

component Counter {
  state { count: Int = 0 }

  event increment() { count = count + 1 }
  event decrement() { count = count - 1 }
  event reset() { count = 0 }

  <template>
    <div id="counter-app">
      <p>Count: {count}</p>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
      <button @click="reset">Reset</button>
    </div>
  </template>
}

進入全螢幕模式 離開全螢幕模式

在伺服器渲染目標上，框架會註冊此元件、傳送初始 HTML，並在每次事件發生時重新計算 HTML、比對差異，僅將變更透過 WebSocket 傳送。瀏覽器負責套用這些變更。您無需撰寫客戶端 JavaScript、無需定義 API，也無需手動序列化酬載。

在客戶端 WASM目標（fitz build --target wasm-client）上，同一個檔案會編譯成 wasm-bindgen + web-sys 套件，直接掛載並操作 DOM — 離線、無需伺服器。單一元件約為 12 KB（壓縮後）。

與眾不同之處

• 單一語言，前後端一致。 元件、處理器與伺服器皆使用 Fitz。您的 type User { ... } 在兩端完全相同 — 無需重複定義 DTO。
• 零 JavaScript 建置。 無需 npm install、無需打包工具，也無需 node_modules。只需 fitz 二進位檔即可完成編譯。
• 型別檢查樣板。 樣板擁有專屬檢查器：錯誤型別的屬性、綁定至不存在處理器的 @event、缺少對應 <slot name="x"> 的 <slot slot="x"> — 皆在編譯時期捕捉，並指出 .fitzv 檔案與行號。
• 雙重目標：單一來源即可 SSR 或 WASM。 伺服器渲染適合共享、資料庫驅動、多使用者狀態；客戶端 WASM 適合本地、零往返、離線小工具。兩者使用相同的元件模型。
• 封裝 UI 函式庫。 fitz_liveviews.ui.* 提供即插即用的元件（Badge、Card、DataGrid、Pager、Input、Select、Tabs、Stepper、TreeView…），透過 --flv-* 設計權杖進行佈景主題設定。

我們提供即時元件展示 — 真實元件已編譯為 WebAssembly，可直接在瀏覽器中執行，無需伺服器。歡迎點擊體驗。

數據一覽

以下數據來自旗艦管理應用程式與展示平台 — 非合成效能測試：

• 完整伺服器渲染儀表板頁面僅需約 1.1 KB 的 JavaScript（3 個小型內嵌 <script> 區塊：佈景主題預先繪製 + WebSocket 即時客戶端），無外部 <script src>，且無需建置步驟。 頁面 HTML 約 38 KB — 這就是全部內容，無需先下載框架執行環境。相比之下，SPA 的框架執行環境單獨就需要約 40 KB（類 Svelte）至約 140 KB（React + ReactDOM），還不包含您的程式碼與 hydration 酬載。
• 客戶端 WASM 元件約為 12 KB（壓縮後） — 這是整個元件，而非「在 100 KB 執行環境之上的程式碼」。計數器示範為 11.4 KB（壓縮後）；完整的 12 小工具組合展示約為 44 KB。
• 零 node_modules，零打包工具設定。 fitz 二進位檔即為完整工具鏈。git clone → fitz run。
• 原生二進位檔每次互動約快於直譯器 9 倍（fitz run ↔ fitz build 渲染結果位元完全相同），因此您可在直譯器上開發，並發佈二進位檔。

（跨框架請求吞吐量基準測試為未來的誠實工作 — 我寧願提供實測酬載數據，而非空泛的負載測試。）

比較

Fitz LiveViews 真正與眾不同的地方在於：整個堆疊使用單一語言、單一來源即可雙重 SSR/WASM 目標、編譯為獨立原生二進位檔，以及編譯器檢查樣板。誠實來說，其不足之處在於：它尚屬新興，生態系規模較小 — React/Vue/Svelte 已累積十年的函式庫與人才庫。若您認為「以較小的生態系換取極簡堆疊」符合您的建構需求，請繼續閱讀。

開始使用

1. 安裝 Fitz。 Fitz LiveViews 是 Fitz 語言的函式庫，因此請先安裝 Fitz：

curl -sSf https://thegreekman76.github.io/fitz/install.sh | sh
fitz --version

進入全螢幕模式 離開全螢幕模式

Fitz 課程詳細說明安裝 / 解除安裝 / 更新步驟 — 請參閱Fitz 課程 · C1 — 安裝。

2. 安裝編輯器擴充功能。 兩個 VSCode 擴充功能可提供語法醒目提示、診斷、懸停提示與定義跳轉：

• Fitz — 適用於 .fitz 檔案（語言本身）。請從 Fitz 版本 下載 .vsix，並執行 code --install-extension fitz-language-*.vsix。
• Fitz LiveViews — 適用於 .fitzv 單一檔案元件。請從 fitz-liveviews 版本 下載，並執行 code --install-extension fitz-liveviews-*.vsix。

3. 新增相依性。 在專案的 fitz.toml 中：

[dependencies]
fitz_liveviews = { git = "https://github.com/Thegreekman76/fitz-liveviews" }

進入全螢幕模式 離開全螢幕模式

這就是全部設定 — 無需 Node、無需打包工具、無需 package.json。

這不是玩具 — 我們有旗艦應用

為了在真實情境中驗證此模型，我們已使用 Fitz + Fitz LiveViews 建構完整的後台管理面板：登入（Argon2id + 簽署的 JWT 工作階段 Cookie）、回應式殼層（可收合側邊欄、支援低至 320px 的行動抽屜、ES/EN 切換、亮/暗/自動佈景主題）、來自 Postgres 的即時儀表板計數，以及兩個即時 CRUD 畫面（員工 + 部門），包含搜尋、篩選、排序、分頁、豐富分頁表單、多選刪除、群組、逐列展開與 CSV 匯出 — 全部透過 WebSocket 進行差異比對、全部國際化、全部只需 docker compose up。

其中每個可重複使用的部分都是 fitz_liveviews.ui.* 中的封裝元件 — 此函式庫正是從此應用程式中萃取而來。它是活生生的參考實作。

前往

• 儲存庫 — github.com/Thegreekman76/fitz-liveviews
• 文件 — thegreekman76.github.io/fitz-liveviews
• 即時展示 — /live
• 課程 — 逐步動手實作（概覽）
• 客戶端 WASM 指南 — 離線小工具目標（client-wasm）

本系列後續內容

• #2 — 您的第一個元件，兩次。 一個計數器，可在伺服器端透過 WebSocket 渲染，同時編譯為 WebAssembly — 單一來源，雙重目標。
• #3 — 表單、酬載與即時輸入。 事件如何攜帶資料，以及 @input / @change 如何綁定表單值。
• #4+ — 建構旗艦應用。 深入探討管理面板：Cookie 驗證、透過 Postgres 的即時 DataGrid、封裝 UI 函式庫、國際化與 Docker。

如果您喜歡無需 JavaScript 建置的即時 UI，請為 儲存庫 按星號，並追蹤本系列。下一篇：計數器，兩次。