震惊!前端竟拿go做这种事情

越是火的语言社区越是喜欢玩跨界。最近go语言社区就出了这么一个框架,竟然可以用来写前端页面。你肯定会好奇了,go语言不是后端语言么,怎么可以在浏览器里运行呢。具体怎么回事,让咱们通过一个demo来说明吧。

  1. 首先创建一个空文件夹,可以起名字叫 testapp 或者你喜欢的名字。
  2. 声明一个 go.mod 文件,你需要在里边声明自己的模块,例如:module example.org/someone/testapp
  3. 创建一个名为root.vugu组件文件,为什么是vugu后缀,因为这个框架的名字就叫做 Vugu,里边的内容如下:
<div class="my-first-vugu-comp">
    <button @click="data.Toggle()">Click Me</button>
    <div vg-if="data.Show">Hello World!</div>
</div>

<style>
.my-first-vugu-comp { background: #eee; }
</style>

<script type="application/x-go">
type RootData struct { Show bool }
func (data *RootData) Toggle() { data.Show = !data.Show }
</script>
  1. 创建一个devserver.go文件,内容如下:
// +build ignore

package main

import (
    "log"
    "net/http"
    "os"

    "github.com/vugu/vugu/simplehttp"
)

func main() {
    wd, _ := os.Getwd()
    l := "127.0.0.1:8844"
    log.Printf("Starting HTTP Server at %q", l)
    h := simplehttp.New(wd, true)
    // include a CSS file
    // simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }
    log.Fatal(http.ListenAndServe(l, h))
}
  1. 启动服务 go run devserver.go
  2. 访问:http:///127.0.0.1:8844
  3. 这个时候网页上会出现Click Me 的字符串,点击后就会出现经典的Hello World!

打开浏览器的控制台,你会发现浏览器加载了一个叫做main.wasm的文件,打开后会发现是一串乱码。这就要提到浏览器的特性WebAssembly了

什么是WebAssembly

WebAssembly 是一种新的字节码格式, 和 JS 需要解释执行不同的是,WebAssembly 字节码和底层机器码很相似可快速装载运行,因此性能相对于 JS 解释执行大大提升。 也就是说 WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行, 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。

WebAssembly 原理

WebAssembly 字节码是一种抹平了不同 CPU 架构的机器码,WebAssembly 字节码不能直接在任何一种 CPU 架构上运行, 但由于非常接近机器码,可以非常快的被翻译为对应架构的机器码,因此 WebAssembly 运行速度和机器码接近,这听上去非常像 Java 字节码。

关于Vugu

  1. 前端语法属于一个Vue的超子集,只实现了基本的组件功能。
  2. 目前还是一个纯试验性质的库
  3. 相比于传统前端框架除了效率高一些,并没有什么优势,因为前端的壁垒不在语言,而是庞大的生态,其他语言要在短期赶上很难。

WebAssembly的展望

既然Vugu目前还处于一个纯探索性质的库,那WebAssembly还有什么用呢?当然有用了,因为WebAssembly性能快的特性,另外在移动端的支持性已经非常好,详见支持列表。已经可以用在一些计算密集的领域了。

  1. 各种加密库
  2. Vue、React、AngularJs框架的核心库,像dom diff 这些运算密集的操作就可以用Webassembly来做。
  3. 游戏引擎,粒子特效、龙骨等运算量大的操作其实都可以把核心库迁移到WebAssembly来做,例如WebAssembly 在白鹭引擎5.0中的实践

现在开始学习WebAssembly

说了WebAssembly这么多的好处,那么我要从哪里开始入手呢?这里给大家推荐几个比较好的学习资源

  1. awesome-wasm awesome系列,万物皆可awesome,哪里不会点哪里,妈妈再也不用担心我的学习。
  2. WebAssembly 现状与实战 IBM Developer上的关于WebAssembly的介绍,建议入门阅读
  3. http://webassembly.org.cn/ 官方WebAssembly的中文镜像。
  4. assemblyscript WebAssembly的js实现,根本上就是把js转成机器码让速度更快