webassembly

webassembly

by Martin Olsansky (olso)

由Martin Olsansky(olso)

全球最简单的WebAssembly简介？ (The world’s easiest introduction to WebAssembly?)

Golang的WASM，适用于JavaScript开发人员。 (WASM in Golang for JavaScript developers.)

• Do you think that WebAssembly (WASM) is only used for image manipulation, hard math, or other niche use cases on the web?
  您是否认为WebAssembly(WASM)仅用于图像处理，硬数学或Web上的其他特定用途？

• Are you still confusing WASM with Web Workers and Service Workers?

  您是否还在将WASM与Web Workers Worker和Service Workers Worker混淆？

• Not interested because you think that JavaScript web apps being developed today will still need to be maintained for the next 10+ years?
  不感兴趣，是因为您认为当今正在开发JavaScript Web应用程序在未来10年以上仍需要维护？
• Do you want to do frontend web development in non-JS languages?
  您是否要使用非JS语言进行前端Web开发？

For the skimmers, here are the links to demo or /src ?. “Reading/writing is a transaction”, I’ll try not to waste your time. There are gists with explanatory comments in the code.

对于略读者，以下是demo或/ src ？ 的链接 。 “ 读/写是一项交易”，我将尽力不浪费您的时间。 代码中有带有解释性注释的ists 。

故事情节？ (Storyline ?)

Our goal is to create a simple game for cats ?: moving a red laser on mobile with some ? audio effects and vibrations. We will implement everything in Golang (Go), including DOM manipulation, logic, and state.

我们的目标是为猫创造一个简单的游戏？ 音频效果和振动。 我们将在Go lang( Go)中实现所有内容，包括DOM操作，逻辑和状态。

Aaaaaand since, cats cannot use a mouse, we’ll need touch interaction for those cat paws ?.

而且，由于猫无法使用鼠标，因此需要为猫爪进行触摸交互吗？

介绍解释！ (Intro explained!)

Think of WASM as the Universal Virtual Machine (sandbox), where you write ANY code once, and it runs everywhere.

将WASM视为通用虚拟机 (沙盒)，您只需编写一次任何代码，它便可以在任何地方运行。

WASM is a compile target, not a language. As if you were to compile for Windows, Mac OS, and Linux at once!

WASM是编译目标，而不是语言。 就像您要同时针对Windows，Mac OS和Linux进行编译一样！

I don’t think that WASM is about dethroning JS, it’s about having alternatives without any sacrifices.

我不认为WASM是要废除JS，而是要有其他选择而不付出任何代价。

Imagine all the people that are developing in Go, Swift, Rust, Ruby, C++, OCaml or others. Now, they can use their preferred language to create an interactive, networked, fast, offline-capable websites and web apps.

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

Have you ever been part of a discussion about whether your project will be a mono-repo or a multi-repo?

您是否曾经参与过有关您的项目将是单仓库还是多仓库的讨论？

You’re now also going to have a discussion about whether your project is a mono-language or a multi-language.

现在，您还将讨论项目是单语言还是多语言。

When people can work with the same tech stack, everything becomes easier. Especially communication between teams.

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

You can still use React, Vue but now you’re not forced to use JS anymore.

您仍然可以使用React，Vue，但是现在您不再被迫使用JS。

WASM与服务和Web Worker有何不同？ (How is WASM different from the Service and Web Workers?)

Service & Web Workers allow you to run background, offline & caching processes. They mimic threading, don’t have access to DOM and can’t share the data (only through messaging) and are running in a separate context. Heck, you could even run WASM instead of JS in them. To me, they only provide some abstraction layer with special privileges, nobody said that these layers have to execute JS.

Service & Web Workers允许您运行后台，脱机和缓存过程。 它们模拟线程，无权访问DOM，并且不能共享数据(仅通过消息传递)，并且在单独的上下文中运行。 哎呀，您甚至可以在其中运行WASM而不是JS。 对我来说，它们仅提供一些具有特殊特权的抽象层，没有人说这些层必须执行JS。

Service & Web Workers are a browser feature, they are not some exclusive JS feature.

Service & Web Workers是浏览器功能，不是某些JS专有功能。

设置开发环境？ (Setup the dev env ?)

We’re going to use WASM, Go, JS and (optionally) Docker ?.

我们将使用WASM，Go，JS和(可选)Docker ？。

If you don’t know Go but know JS, learn Go and then come back here. Let’s start by going to the Go WASM wiki.

如果您不懂Go但懂JS，请学习Go ，然后再回到这里。 让我们从Go WASM Wiki开始 。

Use your local go, I’m using golang:1.12-rc Docker image. Just set two WASM flags for the go compiler here. Create a simple hello world within main.go to test it.

使用您的本地go ，我正在使用golang:1.12-rc Docker映像。 只需在此处为go编译器设置两个WASM标志。 在main.go创建一个简单的hello世界进行测试。

$ GOOS=js GOARCH=wasm go build -o game.wasm main.go

Now, grab the wasm_exec.js glue provided by the Go team. This Go global abstracts WASM initiation. We don’t have to craft any DOM abstraction from scratch ?. Finally, fetch the .wasm file and run our game.

现在，抓住Go团队提供的wasm_exec.js胶水。 此Go全局摘要WASM初始化。 我们不必从头开始制作任何DOM抽象吗？ 最后， etch 。 wasm文件并运行我们的游戏。

All in all, it should look like this:

总而言之，它应该看起来像这样：

给我看Go代码！ (Show me the Go code already!)

To render our simple game, <canvas> should be sufficient. We can create the DOM structure and elements right from the Go code! That syscall/js (included as a standard Go package) handles the DOM interaction for us.

为了渲染我们的简单游戏， <canv as>应该足够了。 我们可以直接从Go代码创建DOM结构和元素！ That sysc所有/ JS(作为标准去包)处理st他DOM互动而生。

主要() (main())

I bet you haven’t seen main() in a long time ?.

我敢打赌，您很久没见过main()了？

Looks pretty similar to JS, doesn’t it?

看起来很像JS，不是吗？

Yes, that’s all you need to interact with the DOM! Just a few Get and Call functions for now.

是的，这就是与DOM交互所需的全部内容！ 现在只有几个Get and Call函数。

At this point, I was asking myself. I’m still kind of writing JS in some way… how is this an upgrade? Because we don’t have direct access to the DOM yet, we have to resort to calling the DOM (via JS) in order to do anything. Imagine how you could abstract this away with let’s say, JSX/React. Actually, you already can, but let’s leave that for my next article ?.

此时，我在问自己。 我仍然以某种方式写JS……这是如何升级？ 因为我们还没有直接访问DOM的权限，所以我们不得不诉诸DOM(通过JS)来做任何事情。 想象一下如何用JSX / React将其抽象化。 实际上，您已经可以了，但是让我们将其留给我的下一篇文章吗？

“渲染”和事件处理 (“Rendering” and the event handling)

Directly using the syscall/js lib reveals some ES5-like callbacks. We are able to listen for the DOM events. Looks very clean with those static types!

直接使用syscall/js库会显示一些类似于ES5的回调。 我们能够监听DOM事件。 那些静态类型看起来很干净！

记录，音频和“异步” (Logging, Audio and “async”)

In Go, there is a convention to write all the func in a sync way. It’s up to the caller to decide whether func is async. Making a func run asynchronously is really easy. Just prefix it with go and there you go! It creates a thread with its own context. You can still bind the parent context to it, don’t worry.

在Go中，有一种约定以同步方式编写所有func 。 由调用方决定func是否异步。 使func异步运行真的很容易。 只要在go前面加上前缀，就可以开始！ 它使用自己的上下文创建线程。 您仍然可以将父上下文绑定到它，不用担心。

永远运行我们的游戏！ ♾ (Running our game forever! ♾)

That code creates an unbuffered channel, and attempts to receive from it. And since no-one ever sends anything on it, it’s essentially a blocking forever operation, allowing us to run our program forever.

该代码创建一个未缓冲的通道，并尝试从中接收。 而且由于没有人发送过任何东西，因此从本质上讲这是一个永久的阻塞操作，使我们可以永远运行程序。

更新游戏状态并移动红色激光 (Updating the game state and moving the red laser)

No state management to see here, just a simple typed struct, that doesn’t allow you to pass any incorrect values inside.

这里没有状态管理，只有一个简单的类型struct ，不允许您在其中传递任何不正确的值。

结论 (Conclusion)

The fact that WASM is still considered an MVP (MAP) and that you can create a game like this, without writing a single line of JS, is amazing! CanIUse is already fully green, there is nothing stopping you from building WASM powered websites and apps.

WASM仍然被认为是MVP (MAP)，并且您无需编写任何JS代码就可以创建这样的游戏，这一事实真是令人惊讶！ CanIUse已经完全是绿色的，没有什么可以阻止您构建WASM支持的网站和应用程序。

Look, you can combine all the languages you want, event JS -> WASM. In the end, they’ll all compile down to the WASM bytecode. If you need to share anything between them, you can, because they can share a raw memory.

看，您可以组合所有想要的语言，事件JS-> WASM。 最后，它们都将编译为WASM字节码。 如果您需要在它们之间共享任何内容，则可以，因为它们可以共享原始内存。

What I’m afraid of is, in recent news, we learned that Microsoft is building a Chromium browser and Firefox market share is below 9%. This gives Google a kill switch power over WASM. If they don’t go with it, masses may never know.

我担心的是，在最近的新闻中，我们了解到Microsoft正在构建Chromium浏览器，而Firefox的市场份额不到9％ 。 这使Google在WASM上具有了致命的切换能力。 如果他们不这样做，群众可能永远不会知道。

谁已经在使用WASM？ (Who is using WASM already?)

Agreed, my example just draws a full-page canvas . Here are more advanced examples that focus on the semantic web awesome-wasm#web-frameworks-libraries.

同意，我的示例仅绘制了一张全页canvas 。 这里有一些更高级的示例，它们集中在语义Web awesome-wasm＃web-frameworks-libraries上 。

Quite a few projects have jumped on the WASM train already. Some of the more interesting to me are Spotify, Twitch, Figma & EWASM.

WASM火车上已经有很多项目开始了。 我比较感兴趣的是Spotify，Twitch， Figma和EWASM 。

Web3时代的WASM (WASM in the Web3 era)

Nowadays, if you want to use some Ethereum wallet on the mobile web, you have to download a mobile wallet like Status.im from some centralized App Store and trust all the parties.

如今，如果您想在移动网络上使用一些以太坊钱包，则必须从某个集中的App Store下载诸如Status.im之类的移动钱包，并信任各方。

How about a Progressive Web App that would run geth (Go Ethereum client) with light sync over WebRTC? It could use Service Worker to update its WASM code and run in it the background, could be hosted on IPFS/Dat.

在WebRTC上以光同步运行geth (Go Ethereum客户端)的渐进式Web应用程序怎么样？ 它可以使用Service Worker更新其WASM代码并在后台运行，可以托管在IPFS / Dat上。

有用的WASM文章，资源和好吃的东西？ (Useful WASM articles, resources & goodies ?)

• WebAssembly is more than the web

  WebAssembly不仅仅是网络

• WebAssembly and Go: A look at the future and the HN comments

  WebAssembly and Go：展望未来和HN评论

• posts by Mozilla Hacks & Hacker News

  Mozilla Hacks ＆ Hacker News发表的帖子

• WebAssembly architecture for Go

  用于Go的WebAssembly体系结构

awesome-wasm, awesome-wasm-langs, gowasm-experiments, WasmWeekly, WasmRocks, SPA with C++, better DOM bindings for Go

真棒 ， 真棒wasm-langs ， gowasm实验 ， WasmWeekly ， WasmRocks ， 带有C ++的SPA ， 更好的Go DOM绑定

Thanks to for optimizing Go on the Chrome for Android!

感谢！

下一篇文章？ ✍️ (Next article? ✍️)

We will take a look at interoperability with JS modules & React. Stay tuned!

我们将研究与JS模块和React的互操作性。 敬请关注！

If you liked it and would like to see more content, don’t forget to follow and keep pressing that clap button ?.

如果您喜欢它并希望看到更多内容，请不要忘记关注并按住该鼓掌按钮 ？。

关于我⚡️ (About me ⚡️)

Hi, I’m Martin Olsansky (olso). If you have any questions/suggestions, feel free to contact me at or @olso_uznebolo

嗨，我是Martin Olsansky ( olso ) 。 如果您有任何疑问/建议，请随时通过或@ olso_uznebolo与我联系

I’m also interested in DIYBio, Tech-augmented ecosystems/plants, Open Patient Data & Digital Health, Cryptocurrencies, Web3, P2P.

我也对DIYBio ， 技术增强的生态系统/植物 ， 开放式患者数据和数字健康 ，加密货币，Web3，P2P感兴趣。

翻译自: /

webassembly