Webassembly这七年

自2015年4月W3C WebAssembly Community Group成立以来，已近走过接近7个春夏秋冬

本文旨在调研Webassembly产生的历史背景、能解决的问题、使用Webassembly的产品 和 Webassembly未来的发展趋势，如果错误请求斧正，本文将随着笔者的水平不断提升而持续更新。

相关社区

• W3C Community Group
• Stack Overflow
• Twitter
• Slack: WebAssembly Developers (click here to get an invitation)
• WasmWeekly - a weekly newsletter
• WebAssembly AMA

相关编译工具链

• Emscripten - LLVM-based project that compiles C and C++
• Binaryen - Binaryen is a compiler and toolchain infrastructure library for WebAssembly, written in C++
• Rust - A safe, concurrent, practical language
• ilwasm - CIL to WebAssembly compiler
• WebAssembly for the GNU Toolchain
• faust2 - Functional programming language for signal processing and sound synthesis
• Asterius - A Haskell to WebAssembly compiler
• PPCI.wasm - PPCI Can compile wasm to machine code and run it in the Python process
• TinyGo - Go for embedded devices and WebAssembly. Creates very small .wasm files.
• Bytecoder - A Rich Domain Model for Java Bytecode and Framework to interpret and transpile it to other languages such as JavaScript, OpenCL or WebAssembly
• AssemblyScript - Definitely not a TypeScript to WebAssembly compiler

相关语言支持

Esoteric

• funge.js - A Befunge JIT

Go

• Go - Go programming language WebAssembly support
• Compiling Go to WebAssembly
• VueGo - WebAssembly Vue.js wrapper written in Go

JavaScript-family

• AssemblyScript - A subset of TypeScript that compiles to WebAssembly
• Getting Started with AssemblyScript
• TurboScript - A TypeScript-like language that compiles to asm.js and WebAssembly (unmaintained)
• speedy.js - Accelerate JavaScript Applications by Compiling to WebAssembly (unmaintained)

Kotlin

• Kotlin/Native - Compile Kotlin code to native binaries

Lua

• wasm_lua - Lua VM running in a WASM environment

OCAML

• ocamlrun-wasm - OCaml Bytecode Interpreter in WASM

Python

• Pyodide - The Python scientific stack running in the browser
• Rocket game - Rocket, written in Rust, compiled to WASM, running in Python (using PPCI)

Rust

• Rusty Web
• parity-wasm - WebAssembly serialization/deserialization library in pure Rust
• wasmi - WebAssembly interpreter in pure Rust
• awesome-rust (has scattered references to targeting WASM)

WASM-like

• wah - a slightly higher-level language superset of webassembly
• Walt - Alternative Syntax for WebAssembly
• wam - Superset of wast syntax that is more convenient for humans to write directly

Other

• Lys - a functional language that compiles to WebAssembly
• Never - statically typed, embeddable functional programming language

Benchmarks

• WebAssembly Video Editor

• 3D skeletal animation system

• Cubes JS - Cubes (WebAssembly).

• JavaScript vs WebAssembly easy benchmark

• Performance Testing Web Assembly vs JavaScript

• A Real-World WebAssembly Benchmark by PSPDFKit

• Wasm vs. PNaCl Performance Benchmark by PDFTron

相关基础设施项目

Web frameworks-libraries

• asm-dom - A minimal WebAssembly virtual DOM to build C++ SPA
• Blazor - Microsoft's web UI framework using C#/Razor and HTML, running client-side via WebAssembly
• Yew - Rust framework for making client web apps
• Perspective - Streaming pivot visualization via WebAssembly
• go-vdom-wasm - Webassembly VDOM to create web application using Golang(experimental)
• seed - A Rust framework for creating web apps
• Vugu - A modern UI library for Go+WebAssembly
• Vecty - Lets you build responsive and dynamic web frontends in Go using WebAssembly

Data processing

• jq-web - the JSON processing tool jq ported to the web with Emscripten

WebGL

• ammo.js - direct port of the Bullet physics engine to JavaScript using Emscripten
• Particle System - an experiment designed to benchmark web technologies: ES6, Emscripten and Web Assembly
• Oryol - a small, portable 3D coding framework written in C++

webpack

• wasm-loader - WASM webpack loader
• cpp-wasm-loader - C/C++ to WASM Webpack loader optimized for small bundle sizes

Browserify

• rustify - Rust WebAssembly transform for Browserify

Node.js

• webassembly - A minimal toolkit and runtime to produce and run WebAssembly modules.
• wasm-pack - pack up the wasm and publish it to npm!
• go-wasm-cli - Minimalistic cli to create and run (with hot reload) Go application targeting WASM
• xwasm - WebAssembly Packager and WASM tooling for modern frontend

.NET

• Uno Platform - An implementation of Microsoft's UWP APIs for iOS/Android/WebAssembly, using C#/XAML on top of mono-wasm
• Ooui.Wasm - A Xamarin.Forms backend for WebAssembly, using C#/XAML on top…

Others

• wasm-init - Work environment and code generator for WebAssembly projects

• wasm - Python WebAssembly decoder & disassembler library

• MXnet.js - ASM.js build of MXNet, deep learning (neural nets and so) library

• YAKC - a multi-system 8-bit emulator written in C++

• Eufa - a high efficient utility functions library written in webassembly

• Argon2 in browser - Argon2 library compiled for browser runtime

• cld3-asm - Wasm based JS binding for Google compact language detector 3

• hunspell-asm - Wasm based JS binding for Hunspell spellchecker

• wasm-bindgen - Interoperating JS and Rust code

• ewasm - Ethereum flavored WebAssembly

• webm-wasm - Create webm videos in JavaScript via WebAssembly

• wasm-pdf – Generate PDF files with JavaScript/WASM

• go-web-app – Quickly setup Go + WebAssembly frontend apps

• www.pdftron.com/blog/wasm/w…)

相关工作机会

• WebAssembly Jobs

Examples

• The Windows 10 calculator running in WebAssembly

• webassembly-examples

• Factorial in WebAssembly

• WebAssembly vs. JavaScript Animation Demo

• Web DSP

• wasm-intro - Tiny WebAssembly Examples with LLVM/clang and C

• webassembly-examples - From Simple To Complex.

• D3 force layout with WebAssembly

• wasmBoy - Gameboy Emulator Library written in Web Assembly using AssemblyScript

• CppOpenGLWebAssemblyCMake - C++/OpenGL/OpenAL/GLFW/GLM based app built with CMake to native or WebAssembly

• WebAssembly A* Pathfinding

• HackerNews PWA with wasm-bindgen

• TiDB playground - writing SQL in an in-browser golang database in WebAssembly

• Made With Webassembly - Showcase of Awesome Production Applications, Side Projects, and Use Cases Made With Webassembly

• HandyTools - A tool providing features like base64 encoding/decoding, Unix time conversion, etc. Written in Go + WebAssembly

• WAsm Heatmap - Creates a heatmap layer for Leaflet.js with Go+WebAssembly+WebWorkers

• Modfy - Wasm Video Transcoder

• eBay-Barcode Scanner(eBay条形码扫描)

• AutoCAD Web

• 在线PS软件

• bilibili web投稿

• Figma — 基于浏览器的多人实时协作 UI 设计工具

• Google Earth — 支持各大浏览器的 3D 地图，而且运行流畅

Demos

• Cubes - direct port of the Bullet physics engine
• Basic4GL
• Symatem - an Ontology Engine, Visualizer, and Editor
• Funky Karts
• PSPDFKit for Web - a WebAssembly-based PDF viewer with annotation features
• Uno Platform Playground - a WebAssembly-based XAML playground
• Roslyn Quoter - a WebAssembly-based Roslyn-based C# code quoter
• wasmBoy Demo/Debugger - a Gameboy Emulation library written in Web Assembly using AssemblyScript
• DOOM 3 - Doom 3 WebAssembly port
• Squoosh.app - Compress and compare images with different codecs, right in your browser
• SketchUp - 3D modeling software
• WebViewer - a CAD, MS Office, and PDF SDK

相关视频

• What is WebAssembly? By Some of its Creators (2019-08)
• Level up Your Web Apps with WebAssembly (PerfMatters Conference 2019-04)
• Go WebAssembly Tutorial - Building a Calculator (2018-08)
• Get Going with WebAssembly (2018-08)
• Build the future of the web with WebAssembly and more (Google I/O 2018-05)
• WebAssembly and the Death of JavaScript? (2018-02)
• Practical WebAssembly (2017-12)
• Real World WebAssembly (Chrome Dev Summit 2017-10)
• Andreas Rossberg - Bringing the Web up to Speed with WebAssembly (2017-06)
• Compiling for the Web with WebAssembly (Google I/O 2017-05)
• A Cartoon Intro to WebAssembly (2017-05)
• WebAssembly Demystified (2017-05)
• Meeting C++ 2016: Implementing a web game in C++14 - Kris Jusiak (2017-01)
• CppCon 2016: Dan Gohman "C++ on the Web: Let's have some serious fun." (2016-10)
• WebAssembly and the Future of the Browser (2016-09)
• NYLUG Presents: Luke Wagner -on- WebAssembly: A New Compiler Target For The Web (2016-06)
• Web Assembly - Nick Bray - BlinkOn 5 - (2015-11)
• Web Assembly - Nick Bray - GOTO 2015 - (2015-10)
• From ASM.JS to WebAssembly (2015-06)
• A Talk Near the Future of Python (a.k.a., Dave live-codes a WebAssembly Interpreter)

相关学术论文

• Bringing the Web up to Speed with WebAssembly
• The Web Assembles

WebAssembly现状

• Rust 是最常用和最受欢迎的 WebAssembly 语言
• C++是第三受欢迎的WebAssembly语言
• AssemblyScript 是第二受欢迎的 WebAssembly 语言
• WebAssembly 预计将对 Web、无服务器、游戏和容器化应用程序产生重大影响

Webassembly发展方向逻辑

• 使用Wasm完全重写现有框架
• 使用Wasm重写现有框架的核心逻辑
• 使用Wasm配合框架增强应用的部分功能
• 使用其他语言构建Web前端框架

适用于计算密集型领域，在多功能视频播放器，音频转码工具，网页游戏，加解密上有广泛应用。

Webassembly的不足之处

• 开发者们期待更好的调试支持

相关书籍

• WebAssembly Reference Manual
• Learn WebAssembly - Build web applications with native performance using Wasm and C/C++
• Programming WebAssembly with Rust - Unified Development for Web, Mobile, and Embedded Applications
• Rust and WebAssembly
• WebAssembly in Action - Introduces the WebAssembly stack and walks you through the process of writing and running browser-based applications
• Level up with WebAssembly - A practical guide to building WebAssembly applications
• Hands-On Game Development with WebAssembly
• 《深入浅出WebAssembly》
• 《WebAssembly原理与核心技术》
• 极客时间Webassembly入门课
• WebAssembly资料精选 - 中文版
• WebAssembly标准入门 - 第一本中文图书
• C/C++面向wasm编程 - 第一本中文开源图书
• 《深入浅出 WebAssembly》

参考

github.com/mbasso/awes…

WebAssembly完全入门——了解wasm的前世今身

The State of WebAssembly 2021

c++项目转成wasm全过程-字节WebInfra团队

WebAssembly 中文网

WebAssembly 中文社区

WebAssembly-cn Orgnization