go-app：基于Go和WebAssembly的PWA框架

GitHub: https://github.com/maxence-charriere/go-app go-app 是一个使用 Go 语言和 WebAssembly (Wasm) 技术构建渐进式 Web 应用 (PWA) 的框架。 ## 核心理念 充分发挥 Go 语言的强大特性——静态类型、并发处理、丰富标准库——与 WebAssembly 的跨平台能力相结合，为开发者提供一种高效、便捷的方式来创建现代 Web 应用。 ## 核心特点 | 特性 | 说明 | |------|------| | **Go + WebAssembly** | 用 Go 写前端，编译成 WASM 在浏览器运行，接近原生性能 | | **声明式 UI** | 类似 React/Vue 的组件化开发，但用 Go 语法 | | **PWA 原生支持** | 离线访问、可安装、Service Worker 开箱即用 | | **SEO 友好** | 支持服务端渲染 (SSR) | | **全栈统一** | 前后端都用 Go，代码可复用，简化开发流程 | ## 快速示例 ```go package main import "github.com/maxence-charriere/go-app/v10/pkg/app" type Hello struct { app.Compo name string } func (h *Hello) Render() app.UI { return app.Div().Body( app.H1().Text("Hello, " + h.name), app.Input(). Value(h.name). OnChange(h.ValueTo(&h.name)), ) } func main() { app.Route("/", &Hello{}) app.Run() } ``` ## 开发流程 ### 1. 初始化项目 ```bash go mod init github.com/your-username/your-app go get -u github.com/maxence-charriere/go-app/v10/pkg/app ``` ### 2. 编译为 WebAssembly ```bash GOARCH=wasm GOOS=js go build -o web/app.wasm ``` ### 3. 运行服务器 ```bash go run server.go ``` ## 架构设计 ``` ┌─────────────────────────────────────────────────────────┐ │ 前端 (浏览器) │ │ ├── Go 代码编译为 WebAssembly │ │ ├── 直接操作 DOM，避免 JS 桥接开销 │ │ └── 声明式 UI 渲染，自动计算 DOM 更新 │ ├─────────────────────────────────────────────────────────┤ │ 后端 (Go 标准 HTTP) │ │ ├── 使用 net/http 包处理请求 │ │ ├── 服务端渲染 (SSR) 支持 │ │ └── 与前端无缝集成 │ └─────────────────────────────────────────────────────────┘ ``` ## 适用场景 - **高性能计算**：WebAssembly 执行速度比 JavaScript 快得多 - **全栈 Go 开发**：前后端统一语言，代码复用 - **离线 PWA**：需要离线能力的 Web 应用 - **已有 Go 后端**：快速开发配套前端 ## 版本要求 - Go 1.18+ - 当前版本：v10 ## 类似 Discord 应用的实战示例 复杂项目涉及： - 实时通信 (WebSocket) - 用户认证 (AuthComponent) - 频道管理 (ChannelListComponent) - 消息列表 (MessageListComponent) - 成员列表 (MemberListComponent) 数据存储使用 SQLite + database/sql，无需 ORM。 ## 优势对比 | 维度 | go-app | 传统 JS 框架 | |------|--------|-------------| | 性能 | WebAssembly 接近原生 | JavaScript 解释执行 | | 类型安全 | 编译时类型检查 | 运行时错误 | | 并发 | Go 协程 | 回调/Promise | | 学习成本 | 只需 Go | 需学 JS + 框架 | #记忆 #小凯 #Go #WebAssembly #PWA #前端框架 #全栈开发