• 你认为 WebAssembly (WASM) 只用于图像处理、复杂的数学计算或者 Web 上的小小应用吗?
  • 你是否经常将 WASM 与 Web Workers 和 Service Workers 的概念混淆?
  • 你对 WASM 不感兴趣,是因为你认为现在的 Web 应用程序在未来 10 年里依旧是 JavaScript 主导?
  • 你是否想过用 JS 以外的语言做 Web 前端开发?

如果你不想细读,你可以看下我做的 页面或者直接看下 这个项目,我会讲的简洁一些,尽量不浪费你的时间。以下是我这个项目的一些关键的代码解析。

故事开始了

我们的目标是给猫 做一个简单的小游戏:做一个小红点在手机上不停的移动,整个过程还有 HiFi 音乐 还有震动。整个项目我们会用 (Go)这门语言来实现,包括 DOM 操作、逻辑还有相关的状态。

而而而而而且,由于猫咪不会使用鼠标,我们还需要给猫爪 做一些点击触摸的交互。

说一下我的理解!

把 WASM 想象成一个 或者一个沙箱,你只需编写一次任何代码,它便可以在任何地方运行。

WASM 是一个编译目标,而不是一种语言。就像你要同时针对 Windows,Mac OS 和 Linux 进行编译一样!

我不认为 WASM 会废弃 JS,你可以有其他选择而不用付出任何代价。

想象一下使用 Go,Swift,Rust,Ruby,C ++,OCaml 或者其他语言的开发人员。现在,他们可以使用自己喜欢的语言来创建交互式,联网,快速,具有脱机功能的网站和Web 应用。

你是否曾经参与过类似「一个项目是用一个代码仓库管理还是多个代码仓库管理?」问题的讨论?

好吧,不管你有没有,你现在也要想一下现在这个项目打算用一门语言实现还是多门语言实现了。

当大家可以使用相同的技术栈时,一切都会变得更加容易,尤其是团队之间的沟通。

你可以依旧使用 React 或者 Vue,但你现在开始也可以不用使用 JS 来开发了。

WASM 跟 Service Workers 还有 Web Workers 有什么区别?

Service WorkersWeb Workers
Service Workers 还有 Web Workers 是浏览器上的功能,不是 JS 的专有功能。

设置开发环境

我们将使用 WASM,Go,JS 和 Docker(这个是可选的) 来进行开发。

如果您不了解Go,但了解 JS,请 ,然后再回来继续阅读。让我们从 开始。

gogolang:1.12-rcmain.go
Go.wasm

总而言之,它应该看起来像这样:

放码过来!(当然是 Go 的码)

main() 方法

main()

看起来是不是很像 JS 代码?

是的,这就是与 DOM 交互所需的全部内容!现在只需要几个 get 方法还有调用函数即可。

在这一点上,我问自己:在某种程度上,我仍然在写 JS … 这怎么算是升级?因为我们还不能直接访问 DOM,所以我们必须(通过 JS)调用 DOM 来做任何事情。想象一下如何用 JSX / React 来抽象化它。

实际上,已经可以做到了,请期待我的下篇文章 。

「渲染」还有事件处理

syscall / js

日志记录、音频播放以及「异步」执行

go

让游戏一直跑下去!

该代码创建一个非缓冲通道,并尝试从该通道接收数据。因为没有人向它发送任何东西,它本质上是一个永久的阻塞操作,允许我们永远运行我们的程序。

更新游戏状态并移动小红点

这里没有状态管理,只有一个简单的声明类型的结构体,它不允许在内部传递任何不正确的值。

总结

事实上,WASM 仍然被认为是一个 [MVP](https://hacks.mozilla.org/2018/10/webassembly -post- MVP -future/) (MAP),你可以不用编写一行 JS,就能创建一个像这样的游戏。惊不惊讶! 上 WASM 的支持已经是一片绿色了,没有人可以阻止你去创建基于 WASM 的网站和应用。

你可以组合所有你想要的语言,像是把 JS 转成 WASM。最后,它们都将编译成 WASM 字节码。如果你需要在他们之间分享任何东西,也没问题,因为它们可以共享原始内存。

我担心的是,在最近的新闻中,我们关注到 还有 。这使谷歌在 WASM 上有了致命的切换能力。如果他们不愿意配合,大众可能永远不会知道有这个特性。

现在都有谁在用 WASM?

你必须得承认,我的项目已经在用了。这个项目仅仅是画了一个全屏的画布,这里有一些更高级的例子,它们关注于语义 Web 。

同时,也有相当多的项目已经上了 WASM 的车了。我对 Spotify、Twitch 和 和 更感兴趣。

Web3 时代的 WASM

现在,如果你想在手机上使用以太坊钱包(Ethereum wallet),你必须从应用商店下载一个类似于 http://Status.im 的移动端钱包 App,并且信任所有商家。

如果有一个先进的 Web App,可以运行 geth (Go Ethereum 客户端),并且能在 WebRTC 上光速同步,这会怎么样?它可以使用 Service Worker 来更新它的 WASM 代码并在后台运行,可以托管在 IPFS/Dat 上。

一些有用的关于 WASM 的文章、资源还有学习资料

感谢 在 Android Chrome 上对 Go 的优化!


活动推荐
腾讯 2020 TLC大会将于9月5日在深圳举办。大会设置“前沿技术”、“研发效能”、“信息流”等专场,通过分享业内知名企业在Serverless、大前端、工程化、WebAssembly等领域的实践方案,希望为大家在新技术的探索道路上提供借鉴和帮助!


更多干货尽在腾讯技术,官方QQ交流群已建立,交流讨论可加:957411539。