Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
145 lines (101 sloc) 4.06 KB
layout author title date desc bigimg img categories tags extras interesting toc
post
Wouter Van Schandevijl
Google I/O '19: WebAssembly for Web Developers
2019-05-18 17:00:00 -0700
Google I/O '19 talk on why you would ever need WebAssembly.
url desc origin
webassembly-big.png
Photo by Vlad Tchompalov
url desc origin
webassembly.png
Photo by Vadim Sherbakov
javascript
tech-talk
githubproject githubtext
HelloWorld Emscripten example
git desc
AssemblyScript/assemblyscript
Definitely not a TypeScript to WebAssembly compiler
git desc
WebAssembly/proposals
Tracking WebAssembly proposals
title icon
WebAssembly
icon-javascript

{% include post/youtube.html id="njt-Qzw0mVY" desc="" %}

Emscripten

{% include github-stars.html url="emscripten-core/emscripten" desc="An LLVM-to-Web Compiler" %}

Brings your existing C/C++ applications to the web (ex: Autocad, Game Engines like Unity). Provides a drop-in replacement: Whatever you wrote, it should just work on the web. It emulates OpenGL, the FileSystem etc.

For Web Developers

Two main use cases

  • Surgical replacement of tiny modules in your JavaScript, the hot paths, the bottlenecks, with WebAssembly
  • Use existing libraries that do not exist on npm from another ecosystem (C/C++, Rust, ...)

The Performance Myth

WebAssembly and JavaScript both have the same peak performance. But... JavaScript can easily fall off the "fast path" while WebAssembly will not.

{% include post/image.html file="webassembly-v8-js-vs-wasm.png" desc="Inside V8" maxWidth="700px" %}

  • js input
    • Ignition: Interpretes the JS text and runs it. While running, collects analytics data about how the code is behaving before TurboFan kicks in.
    • TurboFan: The optimizing compiler.
  • wasm input
    • Liftoff: The streaming WebAssembly compiler which generates machine code.
    • TurboFan: The optimizing compiler which generates optimized code.

With JavaScript input, TurboFan will deopt (deoptimization) when the assumptions from the collected analytics no longer hold true reverting back to the Ignition interpreter. With Liftoff you always stay on the fast path.

WebAssembly delivers more predictable performance than JavaScript

{% include post/image.html file="webassembly-js-vs-wasm.png" desc="The peak performance is about the same but in some browsers the JavaScript performance is way off!" maxWidth="678px" %}

The Future

WebAssembly Threads and SIMD

Will allow WebAssembly to outperform JavaScript.

  • Shared Linear Memory
  • Atomic operations
  • Implemented with WebWorkers
  • Ships with Chrome 74

Host bindings

Interact easily with JavaScript and DOM objects with the Web IDL interface. Will also greatly reduce the glue overhead that is currently required.

Web IDL is a requirement for other proposals such as Garbage Collection, Tail Call optimizations and Exception Handling.

ECMA module integration

import {foo} from './myModule.wasm';

An Example

Windows Emscripten SDK Installation

Install the Emscripten SDK

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
.\emsdk.ps1 install latest
.\emsdk.ps1 activate latest
emsdk_env.bat

An Application

Your original, mega complex C application HelloWorld.c

#include <stdio.h>

int main(int argc, char ** argv) {
    printf("Hello World\n");
}

Turning it into a wasm file:

emcc HelloWorld.c -s WASM=1 -o HelloWorld.html
npx http-server

Open the generated HelloWorld.html in a browser to see your WebAssembly file executed!

For this "program", a 40kb HelloWorld.wasm file and 55kb of JavaScript glue in HelloWorld.js were generated.

You can’t perform that action at this time.