「2019 JSConf.Asia - Kas Perch」WebAssembly - JS 的将来和 Web 多语言开发

特别说明

这是一个由 simviso 团队对 JSConf.Asia 中关于 WebAssembly 相关话题进行翻译的文档，内容并不是直译，其中有一些是译者自身的思考。分享者是 Kas Perch，Cloudflare 的一名开发人员。

如今，让咱们一块儿来了解下什么是 WebAssembly。

视频地址：WebAssembly - JS 的将来和 Web 多语言开发

视频翻译版权归 simviso 全部

本次参与翻译人员

前端公众号

1、前言

你们好，太棒了。就像他们所说，若是咱们搞定了 WebAssembly 技术，那么就搞定了 JS 的将来和 Web 多语言开发。

正如介绍所言，我叫 Kas Perch，如今是 Cloudflare 公司的一名 Avocado 开发人员。同时，我也很痴迷于机器人编程，而且写过相关书籍。

我已经写了两本使用 JS 给机器人编程的书。我周末也会在 twitch 上直播一些硬件和软件相关的东西。

我养了两只猫，它们是个人最爱。左边的猫叫 Ace，右边的叫 Aria。它们如今对我很生气，由于我已经离开它们三个星期了。

我可能再过一个星期才回去，它们是真的很生个人气。

言归正传，大家来到这里就是为了听一些关于 WebAssembly 的一些东西

2、什么是 WebAssembly

这项技术已经有五年了，咱们还在维护中，咱们冷静下来思考一下，为何直到如今尚未人指出该如何使用它。由于人们很难作到该如何更容易的去理解它（由于它很抽象），这也是为何咱们要来谈下它究竟是什么。

首先，我想说，它不是一个编程语言（注：WebAssembly 是驱动编程语言的存在，此处就至关于一个猎头，针对后面这句话），就像你曾经去领英上面招聘员工同样，你说你须要一个有十年开发经验的 Node.js 程序员。

这个就像是在说，我是一个 WebAssembly 程序员，就好像若是你不会 WebAssembly 编程，你就不会写 WebAssembly 程序（就比如若是你不会 Nodejs，你就不会使用 Nodejs 编程）。

其次，WebAssembly 不会取代 JS ，同时它可让 JS 驾驭任何事。

JS 并不会没落，更不会被 WebAssembly 战胜，由于它并非为了战胜 JS 而设计的。

WebAssembly 偏偏是咱们没法去忽视的东西，由于它可让咱们走得更远

我但愿在接下来二十几分钟大家能被我征服，由于 WebAssembly 是将来的发展趋势。

很差意思，按错了。

那么 WebAssembly 究竟是什么呢？

它为其余语言提供编译服务，你能够将其余语言编译成 WebAssembly，它是一种规范（相似于 jvm 支持的 class 字节码）和要编译成的目标文件类型。

这对于 JS 来讲是一种能力的加强。WebAssembly 根本就不是想要取代 JS ，而是仍然让 JS 作它所擅长的领域，同时也能让 JS 也能作它所不擅长的领域，这就是它要作的事情。

但更重要的是，WebAssembly 表面上很神奇，但却不只仅只是表面上神奇，我会在后面解释这点。

WebAssembly 的目标就是将你用其余语言写的代码编译成 wasm 类型文件。

WebAssembly 已经很好的支持了 Rust 语言，C/C++，GO 和 C# 已经能够用 WebAssembly 编译。

还有不少语言没有提到，固然我能想到的主要就这四个，尤为是 Rust， WebAssembly 对它进行了至关多的优化，你有机会能够尝试一下，这绝对是一个很是酷的编程体验。

那么这里，你可能会问：为何要用其余语言来写 Web 程序？你为何要这么作？为何你会在这里放上 Laurie Voss（npm 的做者） 的演讲照片，而后你使用其余语言来说这些东西？

主要有两个理由：A，我想要和 Laurie Voss 进行合照。B，让你们一块儿拥抱 WebAssembly。

3、下一个 Ajax

对于浏览器来讲它就像是下一个 Ajax（就比如是下一个乔布斯）。

在这周末，我已经看到了不少有这样（惊讶）表情了。

OK，就像下一个乔布斯（这里是 Ajax），听起来很酷。

可是个人意思是说 Ajax 真的高度可信而且使客户端层面应用成为可能，因此说，Ajax 是一个变革，而 WebAssembly 将是下一步的一个变革。

这是我今天早上找到的一张超可爱的宝可梦 GIF，我就想着要把它贴上来。

为了跟贴图保持一致我特地选用了“进化”这个词，不知道大家注没注意 GIF 周边我还写了字的哈。

这时候你可能想着说，行吧，可能这就是下一个 Ajax，但仍是抱着几分迟疑态度。

这幅画是我早上在 OneNote 上画的。

我把它称为 “ancient.png.”

让咱们回过来看这张图，这上面有 HTML，CSS 和 JS。

好比当你打开社交网页的时候js就会播放烦人的音乐，服务器会返回全部这些东西，全部的东西都在这里。

请将你的视线随着我手指移动，当你点击一个连接的时候，它会返回一个页面，你一直点击它就一直会给咱们返回一个页面。

每当你想要从服务器获取新信息的时候，你就须要手动对浏览器进行刷新操做。

我将这张图称之为 then.png，Ajax 不是一个 button 但胜似 button。

Ajax 请求页面，而后获取页面内容，咱们经过发送 Ajax 请求，来避免刷新页面的操做。

咱们经过 Ajax 获得返回的结果，Ajax 结果可能会是另一个页面的请求。

基于这个，咱们获得了一系列的单页应用程序。

当咱们的服务器提供了Restful 风格的 API 的时候，也提供临时的 HTML CSS 和 JS 文件。

这才是我要说的，请看我用高亮颜色所标记出的 WebAssembly 的内容，这里突出了它的工做原理。

能够看到页面请求、返回的页面结果，在这个过程当中 WebAssembly 只是作一些计算而已。

咱们依然来看两个图中左侧的 Browser，而后使用 service worker 做为你的第三方模块。一样是在这个Browser中，你可使用一些 Ajax 请求，同时服务器就相似于图上的 LOL OK。我可能甚至都不是一个真正的服务器，我只是 serverless 服务器上的一个函数而已。

而后返回你的结果。整个过程简直难以想象！

OK，相信你如今应该有点感受了。

4、对 JS 进行加强

可以在浏览器中计算内容，不必定非要用 JS 来实现。

这就是一件大事！至关重要！

那为何这很重要？为何咱们要这么关注？

咱们之因此这么关心是由于咱们对 JS 进行加强。

我知道，这个话题你也许听到过不少次，甚至都已经厌倦了。可是这也是事实，JS 在某些方面的确不擅长。

咱们并不须要为了使用 WebAssembly 而重写整个项目代码，谁也不想重构整个代码库，就像五年前那些包含了单元测试的代码，我想没人愿意来干这个事情（想重构举起大家的手，可是没有）。

挺好

更少的请求调用意味着更少的延迟，也就意味着咱们能够为用户提供更快的 Web 应用。

高性能一直都是很重要的。这样的话，咱们就无需对服务器进行成千上百万次的请求。

因此，咱们来谈谈该如何对 JS 进行加强。

我相信在你的工做过程当中已经看到过不少次这种表达式（0.1 + 0.2 === 0.3 // false）了吧,其实0.1 + 0.2 = 0.30000000000000004（精度运算），因此 0.1 + 0.2 === 0.3 是 false

因此若是你正在作的事情对数字精读有很高的要求，好比：金融应用、股票交易、货币兑换。那么很显然，这些并非 JS 的强项。

你须要对那些运行着不一样语言的服务器发送一个 Ajax 请求，服务器会返回给你精确的结果，而后你对返回的结果进行了错误的转换（经过 JS 对返回的 JSON包含的数字类型的字符串进行转换，出现精读丢失）。

因此经过 WebAssembly，你就能够在浏览器中使用正确的工具来完成这项工做，好比：Rust，C，或者其余浮点数超过32位的语言。

其它 JS 不太强的地方还有，JS 的类型强制转换会有一些负面效应，好比：" " == 0 为 true。我真的很难去理解它，我能够说他们输入了一个非零的数字。

获得和预想中不同的结果，这个结果对我来说彻底是出乎意料的，好比你用 1 和经过选择器（document.getElementById）获取的 input 的值相加，结果只是链接字符串。可是你使用 Number函数处理 input 元素的值，那就会进行两个数字相加，即便后者不是一个真正的数字，可能只是一个 NaN，而后 1+ 9可能也是 NaN。

这下知道个人意思了吧，类型强制转换在这里会很棘手。

说到类型，typeof 关键字是一个迷。就像图中最后一条同样，让人烦躁了不少年（typeof [] === 'array' // false）

若是你以前看过个人演讲，你就会知道使用了 WebAssembly 也就意味着使用了正确的工具来完成对应的工做。工欲善其事必先利其器。

WebAssembly 使用正确的工具来完成 Web 上的工做。

咱们不须要再经过 JS 来作它不擅长的事情。

这对 Web 和浏览器应用程序来讲都是一件大事。

可是这将会干掉 JS。

噢， 咱们将会使用 WebAssembly 去写全部的应用程序，WebAssembly 将会...,不，冷静，冷静。

开个玩笑，它不会干掉 JS。

它让 JS 作它擅长的事情，从而使它变得更好。在 DOM 操做上，React 和其余框架会快得离谱，JS 引擎也使 DOM 操做速度更加快。

我不认为 WebAssembly 会很快战胜 JS 和 DOM 操做。也许在遥远的未来，它能够作到，可是近期看来并不会实现。

而且 JS 也很擅长于操做 CSS 样式，WebAssembly 也不会取代 JS 去操做 CSS。

因此，WebAssembly 用于加强 JS，同时你也能够在此基础上使用 JS，这并不矛盾。

而且 WebAssembly 解决了 JS 所不擅长的，这也减轻了 JS 的负担。

就好像我和个人对象同样。他是很讨厌洗衣服的，真的，特别讨厌。而我又特别讨厌作菜，因此他作菜我洗衣服，而且这样搭配很是完美。

可是如今他仍是必须洗本身的衣服，由于我要出差三周，而他只有两周的衣服穿，因此不得不洗。

就像 Ajax 作的那样，WebAssembly 经过营造更好的浏览器体验来使互联网变得更好。

当你想到这些影响时，这更好的浏览器体验简直使人激动。就像 Jeff Goldblum（美国演员）使人激动那样。

5、举个例子

让咱们经过这个 Demo 来进一步表达个人意思。

这个 Demo 使用了 wasm-imagemagick 技术，若是你以前没有用过 imagemagick 的话我能够解释一下：imagemagick 是一个命令行工具，专用于建立和操纵图片。

它可以建立GIF动画，它可以建立图片的单元格，它可以建立分形图。它是一个很是强大的库以致于我不想用任何其余语言去重写它，更不用说 JS。

咱们将要以十倍快于 JS 的速度来操纵这些图片，因此从某种意义上说 JS 自己并不能作到。

它真正强大的地方在于你不用重写任何代码就能够经过该工具来完成咱们的工做。

让咱们来看看。但愿这行得通。

它以前都是好好的因此此次可能就不行了，你知道我意思吧。

好了我摄像头打开了。咱们来选择一张照片，我要点下面（作鬼脸），照片照出来老是显得我很蠢，因此我放弃挣扎了。

OK，这些按钮的意思是……我把它调大一点大家就看得清了个人舌头和这些按钮了。

咱们点右旋，而后在下面你就能够看到右旋的图片了。这真的真的是很快的了，再左旋一下，你用 CSS 也能快速作到，这好像没什么了不得。咱们来调个灰度，boom, 灰度，没有闪屏。咱们来加点对比度。去掉对比度呢？去掉对比度了。JS 能这么快吗？不可能！

对，这就是个人 Demo，我会在推特上发一下这个 Github 仓库，这是彻底开源的，你想的话能够尝试一下。

对，这是个人 Demo。

哈谢谢大家

6、关于 Nodejs

可是 Nodejs 呢？等等……关于 Nodejs？

这是浏览器的工做，对，这彻底是浏览器中的技术，我刚刚说的也彻底是跟浏览器相关的。

可是，为何我会提到 Nodejs 呢?

我说起它（Nodejs）的缘由是它是模块本地化的，有谁在跑 npm install 的时候看到过 C 编译出错？

大部分人的手都应该举起来了，由于这实在是太常见了，模块本地化实在是 Node 中的一个大坑。

这东西真的很是愚蠢，甚至让你想喊出 Bryan Cranston(绝命毒师男主)嘴里喊的。你可能能从他的唇语里读出来，他喊的是 BLAH，他喊得并非…额你知道的

为何这些模块如此之坑？缘由是它们必须在下载时从新编译，并且必须为每个体系结构从新编译它们。

就拿树莓派平台来讲，由于在这个平台上根本不能正常的工做，就会有人在 Github 上面去提issue ，同时也就意味着你会花很长时间在 Github 上去讨论这个问题。

他们要么会为你的平台编译一个版本，要不就直接不支持这个平台。

的确这也是很棘手的，Github 上面的讨论的确让人感到糟糕。可是我很遗憾的告诉你，这个并不支持 Windows 系统。

首先声明，我很感激hecc(高等教育协调理事会)在 node-gyp 方面所作的研究，他们完成了这是个彷佛不可能完成的任务。所以我很尊重他们。

可是 WebAssembly 只能在 Node8.0 以上版本正常工做。记住这个8.0版本，为何他能够在 Node8.0 以上的版本运行呢？

由于这个版本的 WebAssembly 模块已经预编译了，不须要构建。因此这对于任何平台都是十分便捷，均可以经过 Node 来运行。因此对于整个架构，都不会再有下载重编译这个步骤了。

的确是这样，我已经试过了，你也能够尝试一下，这真的太棒了。

引用 Laurie Voss 今天早上说的一句话

每一个人都不看好 node-gyp，可是 WebAssembly 偏偏让咱们作到了。

这是 Nodejs 的里程碑。在不久的未来，当 Node8 不在维护的时候，Node8 如下的版本将再也不兼容。

这并不意味着人们不能使用它，好比 Android3.0 版本。

其它

OK，WebAssembly 正在往 serverless 上进击。例如，我在 CloudFlare 工做，咱们有运行着 V8 引擎的云平台，因此你能够在 serverless 上运行 WebAssembly，这很酷！

咱们如今为现场的听众提供了一个免费的 serverless 平台。

个人意思是，假设大家中的某些人正在观看这段视频或者直播，可是大家没有这个平台的会员，而后还想白嫖。不要误会个人意思哈，我只是也不喜欢付款而已。

若是你扫描这个二维码，你能够保留一个 workers 的子域，而不是 dev 环境，它包含了 30 个 worker ，天天能处理 10 万个请求，在每秒内，比我不使用 JS 作运算要稍微多一点。

这个我以后会再展现，它在咱们的展位上也有放。但我会等大家都扫完，我再切到下一个 PPT。放二维码显然不是由于我不想让大家看见我。

我想你们基本都扫完了。

此次谈话的重点是试着拥抱 WebAssembly ，我我的特别喜欢 Rust。

我学到更多关于 Rust 的知识就像我学到新东西同样。就好像这不是在 13 天内创造出来的。

我没有瞧不起 JS。它是有史以来最好的语言之一，但它是在13天内完成的，而 Rust 绝对不是在 13 天内完成的。

它绝对是通过深思熟虑的。

WebAssembly 是 JS 全部形式的将来，尽管我但愿能向你展现它将创造更好的浏览器体验。

它将弃用 node-gyp。

从如今起的五年里实际上它并无这样作，请不要引用个人话。

但它可能会弃用 node-gyp。你能够引用个人话。

最后一个问题是，若是你如今是招聘经理，我想让你作一些很是重要的事，那就是雇佣一个和你不一样的人。

他们可能与你有所不一样，他们可能会相信你的不一样之处，他们可能会有所不一样，他们的性别认同可能与你雇佣他们的性别不一样。

在你告诉我这很难以前，我会让你去找 LaBeouf 先生谈这件事。

不难，尽管去作！

有人会以某种方式雇用与你不一样的人。

无论怎么样，感谢你们的聆听 ~