4大顶级零JavaScript Go框架大火，前端凉凉？

2023-10-30 今日头条高级前端进阶

前言

本文主要和大家讨论全网最火的4个基于Wasm 的 Go生态 Web 框架，使得开发者不用编写一行 JS 代码就可以写前端应用。在年初，我也确实使用 WebAssembly 将客户端应用成功移植到了 Web，这也是为什么我一直对 WebAssembly 充满好奇的原因。我甚至在头条上开了一个合集《WebAssembly 前沿技术》来专门探讨 WebAssembly ，并将持续关注 WebAssembly 的最新动态。

正如大家所看到的，当我们还在迟疑是否要在日常开发中引入 WebAssembly 的时候，很多优秀的应用、工具已经开始吃 WebAssembly 的红利了，而且取得了不错的成就，这可能也是为什么各个浏览器厂商、开发者如此热衷 WebAssembly 的原因吧。

话不多说，直接进入这几个框架的介绍。

vugu

Vugu（发音为 /ˈvuː.ɡuː/）是一个用 Go 编写并以 webassembly 为目标的 web UI 的实验库。其受到了以 wasm 为目标的 Go 中 VueJS 库的启发。在 Vugu 的世界里，没有前端开发的那些 Node.js、NPM、JS 等等，也没有庞大的 node_modules 占用大量空间。

Vugu 的典型特征包括：

使用 WebAssembly 在浏览器中运行
单文件组件
类似 Vue 的标记语法
原生的 Go 代码、标准 Go 构建工具
快速成型
~3 分钟快速启动

Vugu 框架的基本思路如下：

开发者在 .vugu 文件中编写 UI 组件，这些文件类似于在 JAVAScript 框架中看到的 UI 组件（例如 .vue 文件）。但是，它们不包含 JavaScript，而是包含用于 if、for 和其他此类功能的 Go 语言表达式。
每个 .vugu 文件都会转换为对应的 .go 文件， Vugu 项目中有一个开发服务器可以在页面重新加载时自动执行此操作，或者可以使用 vugugen 命令行工具与 go generate 集成。代码生成还尝试在需要时提供合理的默认值，以便 .vugu 文件包含尽可能少的样板文件，同时允许根据需要进行广泛的自定义。
项目被编译为 WebAssembly 模块并在浏览器中运行，当然这依赖于开发服务器，同时也允许对开发服务器进行自定义配置。
Vugu 库（包：Github.com/vugu/vugu）提供了根据 .vugu 文件中的标记在网页上高效同步 html DOM 的功能。支持附加 DOM 事件处理程序（单击等）和将大页面分解为组件等功能。

目前 vugu 在 Github 上通过 MIT 协议开源，有超过 4.6k 的 star，177 的 fork、项目使用量 155、是一个值得关注的跨端项目。

vecty

Vecty 允许开发者使用 WebAssembly 在 Go 中构建响应式和动态的 Web 前端，与 React 和 VueJS 等现代 Web 框架竞争。

通过使用 vecty 框架，开发者可以享受以下诸多好处：

Go 开发人员可以成为有竞争力的前端开发人员
在前端和后端之间共享 Go 代码
通过 Go 包共享组件的可重用性，以便其他开发人员可以简单地导入。

Vecty 框架的目标是：

简单化：从头开始设计，以便新手（如 Go）轻松掌握。
高性能：高效且易于理解的性能，小的包大小，与原始 JS/HTML/css 相同的性能。
可组合:嵌套组件以开发整个用户界面，像任何普通的 Go 包一样在逻辑上将它们分开。
专为 Go 设计（隐式）

Vecty 框架的典型特征包括：

通过标准的 Go 编译器编译为 WebAssembly
包体积小：0.5 MB hello world
快速基于期望的浏览器 DOM diff，支持虚拟 DOM 但资源使用更少。

目前 Vecty 在 Github 上通过 BSD-3-Clause 协议开源，有超过 2.6k 的 star，是一个值得关注的跨端项目。

go-App

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

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