使用Golang作为前端框架的实践与探讨

嗨 @Sibert

在你的Go应用之上构建了漂亮的用户界面/用户体验。我想知道是否可以用它来创建一个带有博客和评论功能的网站，让用户可以登录、评论并管理评论。例如，使用Facebook、Google或自定义注册等方式进行评论等。对于一个初学者，你有什么推荐吗？

谢谢

在Go语言中构建全栈Web应用是可行的，主要通过两种方式实现：服务端渲染（SSR）和WebAssembly（WASM）。以下是具体实践和示例：

1. 服务端渲染（SSR）方案

使用标准库html/template或第三方框架如templ进行服务端渲染：

// 使用标准库示例
package main

import (
    "html/template"
    "net/http"
)

func main() {
    tmpl := template.Must(template.ParseFiles("layout.html"))
    
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := struct {
            Title   string
            Message string
        }{
            Title:   "Go全栈应用",
            Message: "这是Go渲染的页面",
        }
        tmpl.Execute(w, data)
    })
    
    http.ListenAndServe(":8080", nil)
}

2. WebAssembly方案

将Go编译为WASM在前端运行：

// main_wasm.go
package main

import (
    "syscall/js"
)

func main() {
    document := js.Global().Get("document")
    h1 := document.Call("createElement", "h1")
    h1.Set("innerHTML", "Go WASM前端")
    document.Get("body").Call("appendChild", h1)
    
    // 保持Go程序运行
    select {}
}

编译命令：

GOOS=js GOARCH=wasm go build -o main.wasm main_wasm.go

3. 完整全栈框架示例

使用go-app框架构建同构应用：

package main

import (
    "net/http"
    
    "github.com/maxence-charriere/go-app/v9/pkg/app"
)

type hello struct {
    app.Compo
    name string
}

func (h *hello) Render() app.UI {
    return app.Div().Body(
        app.H1().Body(
            app.Text("Hello, "),
            app.If(h.name != "",
                app.Text(h.name),
            ).Else(
                app.Text("World"),
            ),
        ),
        app.Input().
            Value(h.name).
            Placeholder("输入姓名").
            AutoFocus(true).
            OnChange(h.OnInputChange),
    )
}

func (h *hello) OnInputChange(ctx app.Context, e app.Event) {
    h.name = ctx.JSSrc().Get("value").String()
    h.Update()
}

func main() {
    app.Route("/", &hello{})
    app.RunWhenOnBrowser()
    
    http.Handle("/", &app.Handler{
        Name:        "Go全栈应用",
        Description: "Go构建的前后端应用",
    })
    
    http.ListenAndServe(":8080", nil)
}

4. 实际项目示例

• Hugo：静态网站生成器，使用Go模板引擎
• Grafana：监控平台，后端使用Go，部分前端逻辑通过WASM实现
• Dgraph：图数据库，管理界面使用Go+WASM构建

5. 工具链

• Vecty：React-like的Go前端框架
• GopherJS：将Go编译为JavaScript
• tinygo：针对WASM优化的Go编译器

这些方案证明Go可以用于全栈开发，虽然生态不如JavaScript丰富，但在特定场景下具有性能优势和类型安全特性。