本文主要和大家讨论全网最火的4个基于Wasm 的 Go生态 Web 框架，使得开发者不用编写一行 JS 代码就可以写前端应用。在年初，我也确实使用 WebAssembly 将客户端应用成功移植到了 Web，这也是为什么我一直对 WebAssembly 充满好奇的原因。我甚至在头条上开了一个合集《WebAssembly 前沿技术》来专门探讨 WebAssembly ，并将持续关注 WebAssembly 的最新动态。
正如大家所看到的，当我们还在迟疑是否要在日常开发中引入 WebAssembly 的时候，很多优秀的应用、工具已经开始吃 WebAssembly 的红利了，而且取得了不错的成就，这可能也是为什么各个浏览器厂商、开发者如此热衷 WebAssembly 的原因吧。
话不多说，直接进入这几个框架的介绍。
Vugu（发音为 /ˈvuː.ɡuː/） 是一个用 Go 编写并以 webassembly 为目标的 web UI 的实验库。其受到了以 wasm 为目标的 Go 中 VueJS 库的启发。在 Vugu 的世界里，没有前端开发的那些 Node.js、NPM、JS 等等，也没有庞大的 node_modules 占用大量空间。
Vugu 的典型特征包括：
Vugu 框架的基本思路如下：
目前 vugu 在 Github 上通过 MIT 协议开源，有超过 4.6k 的 star，177 的 fork、项目使用量 155、是一个值得关注的跨端项目。
Vecty 允许开发者使用 WebAssembly 在 Go 中构建响应式和动态的 Web 前端，与 React 和 VueJS 等现代 Web 框架竞争。
通过使用 vecty 框架，开发者可以享受以下诸多好处 ：
Vecty 框架的目标是：
Vecty 框架的典型特征包括：
目前 Vecty 在 Github 上通过 BSD-3-Clause 协议开源，有超过 2.6k 的 star，是一个值得关注的跨端项目。
Go-app 是一个用于使用 Go 编程语言 (Golang) 和 WebAssembly (Wasm) 构建渐进式 Web 应用程序 (PWA) 的软件包。 UI 是通过使用声明性语法完成的，该语法仅通过使用 Go 编程语言创建和组合 HTML 元素。
因为 Go-app 使用声明式语法，因此开发者只需使用 Go 编程语言即可编写可重用的基于组件的 UI 元素。
// 通过与 HTML 元素组合来显示 Hello world 的组件，
// 条件和绑定
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.P().Body(
app.Input().
Type("text").
Value(h.name).
Placeholder("What is your name?").
AutoFocus(true).
OnChange(h.ValueTo(&h.name)),
),
)
}
下面使用 Go 标准 HTTP 模型为使用 go-app 构建的应用程序提供服务。
func mAIn() {
//Go-app组件路由（客户端）：
app.Route("/", &hello{})
app.Route("/hello", &hello{})
app.RunWhenOnBrowser()
// 标准 HTTP 路由（服务器端）
http.Handle("/", &app.Handler{
Name: "Hello",
Description: "An Hello World! example",
})
if err := http.ListenAndServe(":8000", nil); err != nil {
log.Fatal(err)
}
}
go-app 框架还包括以下核心特点:
目前 go-app 在 Github 上通过 MIT 协议开源，有超过 7k 的 star，400+的 fork、是一个值得关注的跨端项目。
vue 是 WebAssembly 应用程序的渐进式框架，具有以下核心特点。
比如下面的 hello world 示例，main.go 文件被编译为 .wasm WebAssembly 文件。
package main
import "github.com/norunners/vue"
type Data struct {
Message string
}
func main() {
vue.New(
vue.El("#app"),
vue.Template("<p>{{ Message }}</p>"),
vue.Data(Data{Message: "Hello WebAssembly!"}),
)
select {}
}
index.wasmgo.html 文件获取并运行一个 .wasm WebAssembly 文件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="{{ .Script }}"></script>
</head>
<body>
<div id="app"></div>
<script src="{{ .Loader }}"></script>
</body>
</html>
本文主要和大家介绍4大顶级零 JavaScript Go 框架崛起。相信通过本文的阅读，大家对 vue、go-app、vecty、Vugu 会有一个初步的了解。
因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！
https://github.com/hexops/vecty
https://github.com/vugu/vugu
https://www.vugu.org/doc
https://go-app.dev/
https://github.com/maxence-charriere/go-app
https://github.com/norunners/vue
https://medium.com/the-godev-corner/expand-web-app-development-with-go-fc07d55b41f6
京公网安备 11010802035086号