​2019 年 WebAssembly 盘点:跟 Javascript 的相爱相杀

简介: 2019 年 WebAssembly 以超乎我们预料的速度在发展,2020 年可能会是一个 Wasm 应用百花齐放的年份。两年多以来,本文作者 Colin Eberhardt 一直在撰写 WebAssembly 每周新闻 [1]。正值 2019 年底,他也借机分享今年他本人最喜欢的一些文章,对 WebAssembly 在 2019 年的发展做一个回顾。

转自 | 前端之巅
作者 | Colin Eberhardt

译者 | 王强
策划 | 张晓楠

2019 年 WebAssembly 以超乎我们预料的速度在发展,2020 年可能会是一个 Wasm 应用百花齐放的年份。两年多以来,本文作者 Colin Eberhardt 一直在撰写 WebAssembly 每周新闻 [1]。正值 2019 年底,他也借机分享今年他本人最喜欢的一些文章,对 WebAssembly 在 2019 年的发展做一个回顾。

运行在浏览器中的《毁灭战士 3》
今年的 WebAssembly 圈子一上来就是一个引人注目的演示应用,它就是经典的《毁灭战士 3》游戏到 WebAssembly 的移植。

http://www.continuation-labs.com/projects/d3wasm/

image.png

这个项目使用 Emscripten 来编译开源的 C++ 代码库,不过这当然没那么简单,它并不是把编译器指向代码库就能搞定的。源代码有许多特性是移植版尚未支持的,因此这个项目还在持续进行中。不过这个演示真的引发了好长时间的欢呼……

如果你对这个消息感兴趣,还可以看一下 InfoQ 上的另一篇报道:如何用 WebAssembly 将桌面游戏编辑器移植到浏览器上。

标准化WASI:在Web外部运行WebAssembly
WebAssembly 运行时是快速、相对简单、可扩展且安全的——同时它也是主机无关的。换句话说,你可以将 WebAssembly 用作浏览器之外的运行时。今年,我们看到了 WebAssembly 在浏览器之外的环境中也产生了巨大吸引力,很多项目和公司正在将 WebAssembly 用作服务器上的运行时(通常用于无服务器函数)、区块链上的运行时(作为智能合约引擎),以及完全独立的运行时。

于是,许多公司都在探索允许 WebAssembly 执行各种 I/O 操作(例如通过套接字通信和访问文件系统)的最佳方法。在业界共同努力下,创造出了 WASI 这个 WebAssembly 的模块化系统界面。

https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/

image.png

Docker 的联合创始人之一在 Twitter 上强调了 WASI 的重要性:

image.png

如果 WASM+WASI 在 2008 年就已诞生,那么我们就用不着创建 Docker 了,由此可见它有多么重要。服务器上的 Webassembly 是计算产业的未来,标准的系统接口就是缺少的那块拼图,希望 WASI 能够胜任这项工作!

Citybound:Rust编写,编译为WebAssembly
是时候介绍另一个酷炫演示了……CityBound,这是一款模拟城市环境的城市建造游戏,里面挤满了人、汽车、道路和房屋。这是一个引人入胜的微缩景观,值得一试。更棒的是整个游戏都是开源的,并用 Rust 编写,编译为 WebAssembly。

https://aeplay.org/citybound

image.png

Pyodide:将科学 Python 栈带到浏览器中
2019 年,Mozilla 发布了关于 Pyodide 的更多信息。Pyodide 是一个实验性项目,旨在创建一个完全在浏览器中运行的完整 Python 数据科学栈,该项目还使用了 Emscripten。

《浏览器将支持 Python 项目!Mozilla 发布 Pyodide》[3]

.NET 5 将于 2020 年 5 月发布
Blazor 于 2017 年诞生,这是由 Steve Sanderson(微软的 ASP.NET 团队成员)开始的有趣实验,它正在寻找一种在 WebAssembly 上运行 C# 的方法。他们最初使用的是.NET 公共语言运行时(CLR)的旧的(且已废弃)C 实现,将其编译为 WebAssembly,结果发现能在浏览器中运行.NET 程序集 DLL。该实验于 2018 年迁移至 Mono,不久后成为正式的 ASP.NET 项目。

这个项目已经相当成熟,今年微软宣布其首个正式版将于 2020 年 5 月发布。

https://devblogs.microsoft.com/dotnet/introducing-net-5/

游戏流体模拟的 WebAssembly 移植
又是演示时间了……这是一个流体动力学模拟,外观精美,运行良好。

https://www.buildingphysicsonline.com/MjgIntelFluidDemo/webgl.html#

Wasm for Blockchain 2019
今年在区块链大会上,我们见证了第一批专用的 Wasm。这篇文章 [4] 给出了所有演讲的精彩摘要。你还可以在 YouTube 上找到所有演讲视频。

《不只是 Web,WebAssembly 在区块链上还有这些用处》[5]

多线程 WebAssembly
我要厚脸皮一些了,这里推荐一下我自己的一篇文章——我特别喜欢这篇文章。WebAssembly Threads 提案目前处于第 2 阶段,这意味着规范草案已完成,且是可用状态。Chrome 已经支持了这一提案对 WebAssembly 运行时添加的额外指令。在这篇博客文章中,我探讨了如何使用新添加的原子操作在多个线程之间分配任务,来提高分形渲染的效率。

《WebAssembly 多线程支持的内部原理》[6]

image.png

WebAssembly 接口类型:与所有事物互操作
为了使 WebAssembly 与主机通信,目前你需要大量的“胶水”代码,以便通过线性内存对复杂类型进行序列化 / 反序列化。新的接口类型提案应该能消除对这种胶水代码的需求,从而使与 WebAssembly 模块的通信变得更加容易,甚至允许它们彼此无缝地通信。

《一篇漫画带你看懂 WebAssembly 与所有语言的互操作!》[7]

WebAssembly 音频实验
大多数 WebAssembly 演示应用都是可视的,但这一个有点不同,它是一个音频演示,是使用 AssemblyScript 创建芯片调谐的实验。你可以在 Peter 的博客中找到有关此项目的更多信息。

https://petersalomonsen.com/articles/webassemblysynth/intro.html

WebAssembly.sh 发布
Wasmer 是一个独立的 WebAssembly 运行时,这个团队有很多很棒的东西,选出其中一样年度最佳是相当困难的。这篇文章宣布了 WebAssembly shell,它使你可以在浏览器中运行 Wasmer 模块。我感觉 Wasmer 到目前为止呈现给我们的是一些拼图碎片的集合,当这些碎片开始聚集在一起时,画面就变得更加清晰,可以预料将会有很多激动人心的事情快要到来了。

https://medium.com/wasmer/webassembly-sh-408b010c14db

字节码联盟宣告成立
这可能是今年最大的事件,也就是字节码联盟的成立,它将 WASI 和其他各种倡议结合在一起,以创建一个用于执行第三方代码的安全环境。这是很重要的事情,团队希望解决 npm、crates 和其他各种程序包管理器中模块的漏洞和恶意攻击等重大问题。

https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/

总结:跟 JavaScript 差距还比较明显
对于 WebAssembly 来说,2019 年是有趣的一年,虽然我们看到 WebAssembly 的发展超过我们预期,但是最近对 JavaScript 开发人员进行的一项调查发现,只有一小部分人在使用 WebAssembly,而且到目前为止,我们还没有看到能够使 Web 开发人员真正倾心的杀手级演示。

《2019 年 JavaScript 生态圈调查报告出炉!》[8]

他们为什么要迁移到 WebAssembly 上呢?毕竟在浏览器中运行的 JavaScript 为开发人员提供了一个成熟的(但仍在不断变化!)的工作环境——JavaScript 几乎无所不能。

我认为,尽管 WebAssembly 的名字里有“Web”,但它将在浏览器之外产生更大的影响力。

相关链接:
[1]:https://wasmweekly.news/

[2]:https://www.infoq.cn/article/d5MhYiuYeayOjSamu81e

[3]:https://mp.weixin.qq.com/s/IoTNZ6A2KNdX8yQl4sLMqg

[4]:https://medium.com/nearprotocol/wasm-for-blockchain-2019-d093bfeb6133

[5]:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247493382&idx=2&sn=7a165ad8795bf5bfef7f8194b48ffa38

[6]:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247492059&idx=2&sn=f8dd1febcc150ac508fba0a41315b6c9

[7]:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247492370&idx=2&sn=1c496eb6438ee5202b93c835da426956

[8]:https://mp.weixin.qq.com/s/TPfSXJX8Ml4xCCbjehX5Wg

作者介绍:
Colin Eberhardt 是 Scott Logic 技术总监,还是横跨多个技术领域的多产技术作家、博客作者和演讲者。

原文链接:

https://blog.scottlogic.com/2019/12/24/webassembly-2019.html

目录
相关文章
|
3月前
|
Rust 前端开发 JavaScript
震惊!JavaScript 与 WebAssembly 强强联合,开启前端性能传奇之旅,你准备好了吗?
【8月更文挑战第27天】在互联网飞速发展的今天,前端技术,特别是核心语言JavaScript,正经历着持续的革新。为了突破JavaScript在处理复杂计算时的性能局限,WebAssembly应运而生。作为一种高效的二进制格式,WebAssembly能以接近原生的速度在浏览器中运行,支持C、C++和Rust等语言编写的高性能代码。它与JavaScript相辅相成,前者专注于高性能计算任务(如游戏开发、图像处理),后者则负责页面的交互与逻辑控制。通过结合使用,二者为前端开发者提供了更为强大和灵活的工具集,共同推动前端技术进入一个全新的性能时代。
92 2
|
5月前
|
JavaScript 前端开发 算法
Box2D(现在通常称为Box2D.js或者其WebAssembly版本,Emscripten Box2D)是一个流行的2D物理引擎,用于模拟刚体动力学、碰撞检测与响应以及关节约束等物理现象
【6月更文挑战第16天】Box2D.js,基于C++的2D物理引擎,经Emscripten编译为WebAssembly,用于JavaScript游戏中的真实物理模拟,包含碰撞检测和关节约束。它提供高效的碰撞检测,易于扩展和定制物理属性。使用步骤涉及初始化世界、创建刚体、添加碰撞形状、模拟物理及处理碰撞事件。物理引擎虽提升逼真度,但也增加复杂性和性能需求。其他选项如p2.js、matter.js和ammo.js也可供选择。
143 8
|
6月前
|
Rust 前端开发 JavaScript
前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】本文旨在探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来革命性变化。传统上,JS一直是前端开发的核心,但随着Wasm的出现,我们看到了前端性能和功能的新天地。文章首先介绍Wasm的基本概念,然后分析其对前端开发的影响,包括性能提升、新功能实现以及开发模式的变化。最后,探讨了Wasm与JS融合的未来趋势,以及这种融合如何推动前端技术的进步。
|
6月前
|
Rust 前端开发 JavaScript
前端技术的未来演进:WebAssembly与JavaScript的深度融合
【2月更文挑战第11天】 在数字化时代,前端技术的迅速发展不仅推动了用户体验的革新,也促进了Web应用的性能提升。本文将探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)之间的深度融合如何成为前端技术发展的关键转折点。不同于传统的技术文章摘要,我们将通过一种叙事式的预览引导读者进入这一技术领域的探索之旅,揭示Wasm和JS结合后为前端开发带来的无限可能性和挑战。
|
6月前
|
Rust 前端开发 JavaScript
探索前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】 随着Web技术的不断进步,前端开发正迎来一场革命性变革。本文将深入探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来前所未有的性能提升与新的编程模式。我们将从两者的基本概念入手,探索它们各自的优势与局限,然后深入分析Wasm和JS协同工作时能够解锁的潜力,最后展望这一技术趋势如何塑造未来的前端开发生态。本文旨在为前端开发者提供洞见,帮助他们理解并准备好迎接这一即将到来的技术浪潮。
|
JSON JavaScript 前端开发
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块? 下
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块?
202 0
|
6月前
|
Web App开发 Rust JavaScript
Rust 笔记:WebAssembly 的 JavaScript API
Rust 笔记:WebAssembly 的 JavaScript API
165 0
|
Web App开发 存储 缓存
WebAssembly 的 JavaScript API
本文介绍 WebAssembly 的 JavaScript API。
196 1
|
JSON 编解码 Rust
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块? 上
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块?
176 0
|
Web App开发 存储 Rust
Node.js 与 WebAssembly
Node.js 与 WebAssembly