QuarkFlow 是一個打破傳統邊界的開發架構,結合了 Quarkus 的極致效能、Inertia.js 的無縫橋接以及 Svelte 的簡約美學。它將開發者的精力從「繁瑣的溝通協議」中解放出來,投入到真正的「功能創新」賽道上。
QuarkFlow 採用「單一 Repo、雙引擎」的佈局,確保前後端邏輯緊密結合,同時保持開發工具鏈的獨立性。
QuarkFlow/
├── src/
│ ├── main/
│ │ ├── java/org/quarkflow/ # 🚀 Quarkus 後端核心
│ │ │ ├── controllers/ # Inertia 控制器 (Render 邏輯)
│ │ │ ├── entities/ # Hibernate Panache 資料模型
│ │ │ └── inertia/ # Inertia 配置與過濾器 (Middleware)
│ │ └── resources/
│ │ ├── application.properties # Quarkus 配置文件
│ │ └── web/ # 🎨 Svelte 前端核心 (由 Vite 驅動)
│ │ ├── src/
│ │ │ ├── app.js # Inertia 進入點 (Setup)
│ │ │ ├── Pages/ # Svelte 頁面組件 (對應後端路由)
│ │ │ └── Shared/ # 共用組件 (Layouts, UI Components)
│ │ ├── public/ # 靜態資源
│ │ ├── package.json # 前端依賴
│ │ └── vite.config.js # Vite 配置 (輸出至 META-INF/resources)
├── target/ # 編譯產出
├── pom.xml # Maven 依賴管理 (包含前端插件)
└── README.md
環境準備
啟動開發模式 在根目錄執行以下指令,Quarkus 將自動處理後端邏輯,並透過 Vite 監控前端變更:
./mvnw quarkus:dev
範例:建立你的第一個 Flow 後端 (Java)
@Path("/projects")
public class ProjectController {
@GET
public Response index() {
// 直接渲染 Svelte 組件並傳遞資料
return Inertia.render("ProjectList", Map.of("projects", projectService.listAll()));
}
}
<!-- src/main/resources/web/src/Pages/ProjectList.svelte -->
<script>
export let projects; // 自動從後端接收的資料
</script>
<h1>My Projects</h1>
<ul>
{#each projects as p}
<li>{p.name}</li>
{/each}
</ul>
在傳統架構中,約 50% 的時間 消耗在 API 定義與狀態同步。QuarkFlow 透過 Inertia 徹底抹平了這層隔閡,讓資料像「夸克」粒子一樣自由流動,實現真正的 「想到即做到」。