WebAssembly Learning & Practices List

Overview

• 2015-WebAssembly：面向 Web 的通用二进制和文本格式

• 2017-WebAssembly: Mozilla Won: Mozilla staff are being very diplomatic and restrained by allowing WebAssembly to be portrayed as a compromise between the approaches of asm.js and PNaCl. They have good reasons for being so, but I can be a bit less restrained. asm.js and PNaCl represented quite different visions for how C/C++ code should be supported on the Web, and I think WebAssembly is a big victory for asm.js and Mozilla’s vision.

• 2017-How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript

• 2016-awesome-wasm : Collection of awesome things regarding WebAssembly (wasm) ecosystem.

• 2017-A cartoon intro to WebAssembly: WebAssembly is fast. You’ve probably heard this. But what is it that makes WebAssembly fast? In this series, I want to explain to you why WebAssembly is fast.

• 2017-Why WebAssembly is Faster Than asm.js

• 2017-An Abridged Cartoon Introduction To WebAssembly: In this article, I want to help you understand what exactly it is about WebAssembly that makes it fast.

• 2017-The future of WebAssembly - A look at upcoming features and proposals: I’ll skip over some of the more technical proposals, instead focusing on what they might mean for languages that target WebAssembly.

• 2018-WebAssembly’s post-MVP future: There are many features that are coming to WebAssembly which will fundamentally alter what you can do with WebAssembly.

Comparsion

• 2018-WebAssembly: A New Hope: But what is WebAssembly and what does it mean for the web?

Case Study

• 2017-Execute millions of SQL statements in milliseconds in the browser with WebAssembly and Web Workers.

• 2017-WebAssembly cut Figma’s load time by 3x: Many people have started experimenting with toy WebAssembly projects on the side, but it’s hard to tell what the real-world performance gains will be unless you have a large compatible code base for comparison.

• 2017-How to get a performance boost using WebAssembly

• 2018-WebAssembly 在 eBay 的实践：速度提升 50 倍: WebAssembly 自诞生以来就震动了整个前端业界。Web 社区很高兴看到 JavaScript 有了竞争者。何况原生 WebAssembly 的速度比 JavaScript 要快得多。我们 eBay 也身处这一浪潮之中，对 WebAssembly 非常欢迎。

• 2019-Build FFmpeg WebAssembly version (= ffmpeg.wasm) #Series#: How to build native FFmpeg with Docker (and without docker in MacOS)

Tutorial

• 2017-Build Your First Thing With WebAssembly

• 2017-WebAssembly 101: a developer’s first steps: This tutorial will guide you along the necessary steps to port a JavaScript library of the Conway’s game of life to WebAssembly (wasm). This is a simple exercise that is perfect to start beyond a trivial Hello World.

• 2017-Egghead.io WASM Introduction Examples: Course examples from the Introduction to WebAssembly egghead.io course.

• 2018-Writing WebAssembly By Hand: However, it is actually possible to write WebAssembly directly by hand.

Rust

• 2018-Our Vision for Rust and WebAssembly: In a series of follow up posts, we will talk about the next steps for each major component of the Rust and WebAssembly ecosystem.

• Rust 🦀 and WebAssembly 🕸 #Series#: This small book describes how to use Rust and WebAssembly together.

• 2021-Rust meets the web - a clash of programming paradigms: Most code running on the web is event-based, garbage-collected, and dynamically typed. In stark contrast, Rust is a compiled language with static type- and memory-safety without a garbage-collector. What are the implications for a project that compiles Rust to WebAssembly? I try to answer this question with a fictive story and hands-on code examples.

Go

C

• 2020-Hands on WebAssembly: Try the basics: Get started with WebAssembly through our simple hands-on tutorial that assumes only general knowledge in web development.

Docker

• 2022-WebAssembly: Docker without containers!: Note that this article focuses on getting some hands-on experience rather than discussing technical details. You can either reproduce the examples below or just read through them till the end as we will also provide the output.

Under the hood

• 2017-Understanding WebAssembly text format: To enable WebAssembly to be read and edited by humans, there is a textual representation of the wasm binary format. This is an intermediate form designed to exposed in text editors, browser developer tools, etc. This article explains how that text format works, in terms of the raw syntax, and how it is related to the underlying bytecode it represents — and the wrapper objects representing wasm in JavaScript.

• 2018-Asmble : Asmble is a compiler that compiles WebAssembly code to JVM bytecode. It also contains utilities for working with WASM code from the command line and from JVM languages.