前言

本文主要和大家討論全網(wǎng)最火的4個基于Wasm 的 Go生態(tài) Web 框架，使得開發(fā)者不用編寫一行 JS 代碼就可以寫前端應用。在年初，我也確實使用 WebAssembly 將客戶端應用成功移植到了 Web，這也是為什么我一直對 WebAssembly 充滿好奇的原因。我甚至在頭條上開了一個合集《WebAssembly 前沿技術》來專門探討 WebAssembly ，并將持續(xù)關注 WebAssembly 的最新動態(tài)。

正如大家所看到的，當我們還在遲疑是否要在日常開發(fā)中引入 WebAssembly 的時候，很多優(yōu)秀的應用、工具已經(jīng)開始吃 WebAssembly 的紅利了，而且取得了不錯的成就，這可能也是為什么各個瀏覽器廠商、開發(fā)者如此熱衷 WebAssembly 的原因吧。

話不多說，直接進入這幾個框架的介紹。

vugu

Vugu（發(fā)音為 /?vu?.ɡu?/）是一個用 Go 編寫并以 webassembly 為目標的 web UI 的實驗庫。其受到了以 wasm 為目標的 Go 中 VueJS 庫的啟發(fā)。在 Vugu 的世界里，沒有前端開發(fā)的那些 Node.js、NPM、JS 等等，也沒有龐大的 node_modules 占用大量空間。

Vugu 的典型特征包括：

使用 WebAssembly 在瀏覽器中運行
單文件組件
類似 Vue 的標記語法
原生的 Go 代碼、標準 Go 構建工具
快速成型
~3 分鐘快速啟動

Vugu 框架的基本思路如下：

開發(fā)者在 .vugu 文件中編寫 UI 組件，這些文件類似于在 JAVAScript 框架中看到的 UI 組件（例如 .vue 文件）。但是，它們不包含 JavaScript，而是包含用于 if、for 和其他此類功能的 Go 語言表達式。
每個 .vugu 文件都會轉換為對應的 .go 文件， Vugu 項目中有一個開發(fā)服務器可以在頁面重新加載時自動執(zhí)行此操作，或者可以使用 vugugen 命令行工具與 go generate 集成。代碼生成還嘗試在需要時提供合理的默認值，以便 .vugu 文件包含盡可能少的樣板文件，同時允許根據(jù)需要進行廣泛的自定義。
項目被編譯為 WebAssembly 模塊并在瀏覽器中運行，當然這依賴于開發(fā)服務器，同時也允許對開發(fā)服務器進行自定義配置。
Vugu 庫（包：Github.com/vugu/vugu）提供了根據(jù) .vugu 文件中的標記在網(wǎng)頁上高效同步 html DOM 的功能。支持附加 DOM 事件處理程序（單擊等）和將大頁面分解為組件等功能。

目前 vugu 在 Github 上通過 MIT 協(xié)議開源，有超過 4.6k 的 star，177 的 fork、項目使用量 155、是一個值得關注的跨端項目。

vecty

Vecty 允許開發(fā)者使用 WebAssembly 在 Go 中構建響應式和動態(tài)的 Web 前端，與 React 和 VueJS 等現(xiàn)代 Web 框架競爭。

通過使用 vecty 框架，開發(fā)者可以享受以下諸多好處：

Go 開發(fā)人員可以成為有競爭力的前端開發(fā)人員
在前端和后端之間共享 Go 代碼
通過 Go 包共享組件的可重用性，以便其他開發(fā)人員可以簡單地導入。

Vecty 框架的目標是：

簡單化：從頭開始設計，以便新手（如 Go）輕松掌握。
高性能：高效且易于理解的性能，小的包大小，與原始 JS/HTML/css 相同的性能。
可組合:嵌套組件以開發(fā)整個用戶界面，像任何普通的 Go 包一樣在邏輯上將它們分開。
專為 Go 設計（隱式）

Vecty 框架的典型特征包括：

通過標準的 Go 編譯器編譯為 WebAssembly
包體積小：0.5 MB hello world
快速基于期望的瀏覽器 DOM diff，支持虛擬 DOM 但資源使用更少。

目前 Vecty 在 Github 上通過 BSD-3-Clause 協(xié)議開源，有超過 2.6k 的 star，是一個值得關注的跨端項目。

go-App

Go-app 是一個用于使用 Go 編程語言 (Golang) 和 WebAssembly (Wasm) 構建漸進式 Web 應用程序 (PWA) 的軟件包。 UI 是通過使用聲明性語法完成的，該語法僅通過使用 Go 編程語言創(chuàng)建和組合 HTML 元素。

因為 Go-app 使用聲明式語法，因此開發(fā)者只需使用 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 框架還包括以下核心特點:

作為單頁應用程序工作
搜索引擎優(yōu)化友好
可安裝
支持離線模式
狀態(tài)管理

目前 go-app 在 Github 上通過 MIT 協(xié)議開源，有超過 7k 的 star，400+的 fork、是一個值得關注的跨端項目。

vue

vue 是 WebAssembly 應用程序的漸進式框架，具有以下核心特點。

為前端空間的框架、狀態(tài)管理器和路由器提供統(tǒng)一的解決方案
利用模板將應用程序邏輯與前端渲染分開
簡化數(shù)據(jù)綁定以簡化狀態(tài)管理與渲染的關系
鼓勵組件重用以提高開發(fā)效率

比如下面的 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>