今日已更新 244 条资讯 | 累计 27419 条内容
关于我们

Introducing Fitz LiveViews: real-time UI in one language, zero JS build

Martin Palopoli 2026年08月01日 20:09 1 次阅读 来源:Dev.to

TL;DR — Fitz LiveViews is a real-time UI framework for Fitz , a compiled, gradually-typed language where HTTP, WebSockets, auth, and an ORM are part of the syntax. You write single-file components ( .fitzv ) with state / event / <template> , and the server renders HTML, diffs it, and patches the browser over a WebSocket — no JavaScript build step, no client framework . The same .fitzv can also compile to WebAssembly for offline, zero-round-trip widgets. There's a live component gallery, a course, and a full flagship app (an admin panel with auth + Postgres + Docker) already built with it. Repo : github.com/Thegreekman76/fitz-liveviews · Docs : thegreekman76.github.io/fitz-liveviews This is the first post in the FitzLiveViews series. I'll start with the pitch and the setup; the following posts build things. The problem Building a modern web UI usually means two languages, two type systems, and a build pipeline: a backend (Python / Node / Go) plus a frontend framework (React / Vue / Svelte) plus its toolchain (Vite / Webpack / Babel). You duplicate your types across the wire, you keep two mental models in sync, and node_modules grows a personality of its own. Phoenix LiveView (Elixir) showed there's another way: render on the server, push diffs over a WebSocket, and let the browser stay dumb. No client framework, no API to hand-write, no JSON serialization dance. Fitz LiveViews brings that model to Fitz — and adds a twist: the same component can also compile to WebAssembly when you want purely client-side, offline interactivity. What Fitz LiveViews looks like A component is a single .fitzv file — state, event handlers, and a template, like Vue or 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 <

本文内容来源于互联网,版权归原作者所有
查看原文